JSFiddle - React, Tailwind, and code Playground
HTML
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
MODULE - POST
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<div id='po_wr'>
<div id = 'po_gl_ou'></div>
<div id = 'po_gl_in'></div>
<div id = 'po_gl_co'>
<div id='po_in_wr'>
<input id="po_in" name="name" type="text" maxlength="320" >
<p id="po_lab" >Post a Comment or URL</p>
<p id="po_but" >POST</p>
</div>
</div>
</div>
<style>
#po_in
{
position: absolute;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
width: 290px;
height: 32px;
color: #777777;
border: 1px solid #aaaaaa;
font-size: 16px;
}
#po_but
{
position: absolute;
top: 0px;
left: 292px;
font-size: 16px;
padding: 8px 6px 8px 6px;
border: 1px solid #057ed0;
color: #ffffff;
background: -moz-linear-gradient(top, #31baed, #019ad2);
background: -webkit-linear-gradient(top, #31baed, #019ad2);
cursor: pointer;
border-bottom-right-radius: 4px;
border-top-right-radius: 4px;
line-height: 1em;
}
#po_wr
{
position: absolute;
top: 10px;
left: 10px;
}
#po_in_wr
{
position: absolute;
top: 20px;
left: 10px;
}
#po_lab
{
width: 200px;
font-size: 14px;
position: absolute;
top: 12px;
left: 9px;
color: #777777;
}
#po_but:hover
{
background: -moz-linear-gradient(top, #2aaada, #0271bf );
background: -webkit-linear-gradient(top, #2aaada, #0271bf );
}
#po_but:active
{
border: 1px solid #096eb3;
background: -moz-linear-gradient(top, #0271be, #0271bf);
background: -webkit-linear-gradient(top, #0271be, #0271bf);
}
#po_gl_ou
{
width: 394px;
height: 94px;
border: 1px solid #ffffff;
position: absolute;
top: -1px;
left: -1px;
opacity: .7;
border-radius: 4px;
}
#po_gl_in
{
position: absolute;
width: 394px;
height: 94px;
opacity: .3;
background: #ffffff;
border-radius: 4px;
}
#po_gl_co
{
width: 380px;
height: ...