JSFiddle - React, Tailwind, and code Playground
HTML
<div class="container">
<input type="text" class="text" />
</div>
<input type="button" class="button" value="Google Search" />
<input type="button" class="button" value="I'm Feeling Lucky" />
CSS
body{
margin-top:50px;
text-align:center;
}
.text{
height:30px;
width:496px;
background:#fff;
border:1px solid;
color:#666666;
font: 20px Tahoma;
padding: 5px;
border-color:#d9d9d9;
border-top-color:#000000;
}
.text:hover{
border-color:#b9b9b9;
border-top-color:#000000;
}
.text:focus{
border-color:#4d90fe;
outline:none;
}
.button{
background-color: #fafafa;
background-image: -webkit-gradient(linear,left top,left bottom,from(#fafafa),to(#F1F1F1));
background-image: -webkit-linear-gradient(top,#fafafa,#F1F1F1);
background-image: -o-linear-gradient(top,#fafafa,#F1F1F1);
background-image: linear-gradient(top,#fafafa,#F1F1F1);
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
border: 1px solid #DCDCDC;
border: 1px solid rgba(0, 0, 0, 0.1);
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
color: #666;
cursor: default;
font-family: arial,sans-serif;
font-size: 11px;
font-weight: bold;
height: 29px;
line-height: 27px;
margin: 11px 6px;
min-width: 54px;
padding: 0 8px;
text-align: center;
}
.button:hover{
background-color: #F8F8F8;
background-image: -webkit-gradient(linear,left top,left bottom,from(#F8F8F8),to(#F1F1F1));
background-image: -webkit-linear-gradient(top,#F8F8F8,#F1F1F1);
background-image: -o-linear-gradient(top,#F8F8F8,#F1F1F1);
background-image: linear-gradient(top,#F8F8F8,#F1F1F1);
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.1);
-moz-box-shadow: 0 1px 1px rgba(0,0,0,0.1);
box-shadow: 0 1px 1px rgba(0,0,0,0.1);
border: 1px solid #C6C6C6;
color: #333;
}
.button:active, .button:focus{
outline:none;
}
.button:active{
-webkit-box-shadow:none;
-moz-box-shadow:none;
box-shadow:none;
}
.container{
margin-bottom:20px;
}
JavaScript
//Google Styling