JSFiddle - React, Tailwind, and code Playground

by Yogesh Kanthale

HTML

<input type='text' class='holo'></input>

CSS

input.holo[type='text'] {
	/* You can set width to whatever you like */
    width: 300px;
	font-size: 12.5px;
	margin: 0;
	padding: 8px 8px 6px 20px;
	position: relative;
	display: block;
	outline: none;
	border: none;
	background: bottom left linear-gradient(#a9a9a9, #a9a9a9) no-repeat, bottom center linear-gradient(#a9a9a9, #a9a9a9) repeat-x, bottom right linear-gradient(#a9a9a9, #a9a9a9) no-repeat;
	background-size: 1px 6px, 1px 1px, 1px 6px;
}
input.holo[type='text']:hover, input.holo[type='text']:focus {
	background: bottom left linear-gradient(#0099cc, #0099cc) no-repeat, bottom center linear-gradient(#0099cc, #0099cc) repeat-x, bottom right linear-gradient(#0099cc, #0099cc) no-repeat;
	background-size: 1px 6px, 1px 1px, 1px 6px;	
}