JSFiddle - React, Tailwind, and code Playground

by fragilewelldone

HTML

<div>
<form action="" name="form1">
<div id="feedback">
    <div class="left">
        <input type="text" name="name" value="Your name:"/>
    </div>
    <div class="right">
        <input type="text" name="email" value="E-mail:"/>
    </div>
    <div class="mess">
        <textarea rows="3" name="email">Message:
        </textarea>
    </div>
</div>
</form>
</div>

CSS

#feedback{
position:relative;
margin:20px 20px 20px 20px;
width:350px;
height:90px;
border-collapse:collapse;
}
input{
display:block;
margin:-4px 0px 0px -4px;
color:#717171;
border:2px solid #000;
width:160px;
}
div.left{
background:#d9d9d9;
padding:0px 2px 4px 0px;
position:absolute;
top:0px;
left:0px;
}
div.right{
background:#d9d9d9;
padding:0px 2px 4px 0px;
position:absolute;
top:0px;
right:0px;
}
div.mess{
background:#d9d9d9;
padding:0px 2px 4px 0px;
position:absolute;
left:0px;
bottom:0px;

}
div.mess textarea{
width:344px; /*(border-left)+(border-right)+width=
=width(#feedback)-(padding-right(div.mess))*/
display:block;
border:2px solid #000;
margin:-3px 0px 0px -3px;
color:#717171;
}