UIUX Component

Autocomplete input only in HTML. Try the demo below, click on it or simply type anything. DEMO HTML < input list = "sampleInput" placeholder = "Select Metal Band" /> < datalist id = "sampleInput" > < option value = "Metallica" > < option value = "Slayer" > < option value = "Megadeth" > < option value = "Iron Maiden" > < option value = "Anthrax" > < option value = "Slipknot" > < option value = "Pantera" > < option value = "Rammstein" > < option value = "System of a Down" > </ datalist >

Smooth animation card effect using box shadow with only CSS animations and a pseudo element. Hover over the box below to see the action. DEMO HTML < div class = "box-shadow" ></ div > CSS . box - shadow { position: relative; display: inline - block; width: 100 px; height: 100 px; border - radius: 5 px; background - color: #fff; box - shadow: 0 1 px 2 px rgba( 0 , 0 , 0 , 0.15 ); transition: all 0.3 s ease - in - out; margin: 1 em; background - color: BlanchedAlmond; } . box - shadow::after { content: '' ; position: absolute; z - index: - 1 ; width: 100 % ; height: 100 % ; opacity: 0 ; border - radius: 5 px; box - shadow: 0 5 px 15 px rgba( 0 , 0 , 0 , 0.3 ); transition: opacity 0.3 s ease - in - out; } . box - shadow:hover { transform: scale( 1.2 , 1.2 ); } . box - shadow:hover::after { opacity: 1 ; }

More options to border-style than solid or dotted. Check out the demo below. DEMO none hidden dotted dashed solid double groove ridge inset outset HTML < div class = "wrapper-border" > < div class = "tile border-none" > none </ div > < div class = "tile border-hidden" > hidden </ div > < div class = "tile border-dotted" > dotted </ div > < div class = "tile border-dashed" > dashed </ div > < div class = "tile border-solid" > solid </ div > < div class = "tile border-double" > double </ div > < div class = "tile border-groove" > groove </ div > < div class = "tile border-ridge" > ridge </ div > < div class = "tile border-inset" > inset </ div > < div class = "tile border-outset" > outset </ d