JSFiddle - React, Tailwind, and code Playground

by kizer

HTML

<div class="handlebar">

    <input type="text" class="txt" placeholder="hello" />
    <button>?</button>
    
</div>

CSS

html, body {
 margin: 20px;   
}

button {
  z-index: 2;
position: absolute;
right: 41px;
width: 30px;
top: 4px;
bottom: 4px;
border: none;
border-radius: 0px 2px 2px 0px;
background-color: #90BFA7;
background-image: -webkit-gradient(linear, left top, left bottom, from(#90BFA7), to(#8CAF90));
background-image: -webkit-linear-gradient(top, #90BFA7, #8CAF90);
background-image: -moz-linear-gradient(top, #90BFA7, #8CAF90);
background-image: -o-linear-gradient(top, #90BFA7, #8CAF90);
background-image: -ms-linear-gradient(top, #90BFA7, #8CAF90);
background-image: linear-gradient(top, #90BFA7, #8CAF90);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#90BFA7', EndColorStr='#8CAF90');
font-size: 30px;
font-weight: bold;
line-height: 20px;
color: rgba(43, 65, 54, .835);
text-shadow: 0 1px 0 rgba(255,255,255, .445);
box-shadow: 0 1px 4px rgba(0, 0, 0, .443) inset;
}

.handlebar {
 position: relative;
 height: 45px;
 border-bottom: 1px solid #333335;
 border-top: 1px solid #696969;
 border-left: 1px solid #313336;
 border-right: 1px solid #313336;
 border-radius: 5px;
  line-height: 20px;
    box-shadow: 0 2px 2px rgba(255,255,255, 1) inset; 
 background-color: #f2f2f2;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(242, 242, 242)), to(rgb(186, 186, 186)));
background-image: -webkit-linear-gradient(top, rgb(242, 242, 242), rgb(186, 186, 186));
background-image: -moz-linear-gradient(top, rgb(242, 242, 242), rgb(186, 186, 186));
background-image: -o-linear-gradient(top, rgb(242, 242, 242), rgb(186, 186, 186));
background-image: -ms-linear-gradient(top, rgb(242, 242, 242), rgb(186, 186, 186));
background-image: linear-gradient(top, rgb(242, 242, 242), rgb(186, 186, 186));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#f2f2f2', EndColorStr='#bababa');
   
}

.txt {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 17px;
font-weight:...