JSFiddle - React, Tailwind, and code Playground

by Dunia Tutorials

HTML

<div class="hl-email">
Get More Free Article!!!<form action="http://feedburner.google.com/fb/a/mailverify" id="feedform" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=duniatutorials', 'popupwindow', 'scrollbars=yes,width=750,height=520');return true">
<input gtbfieldid="3" class="textarea" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter your email here&quot;;}" onfocus="if (this.value == &quot;Enter your email here&quot;) {this.value = &quot;&quot;;}" value="Enter your email here" type="text" />
<input type="hidden" value="Duniatutorials" name="uri"/><input type="hidden" name="loc" value="en_US"/>
<input class="hl-emailsubmit" value="Get It!!!" type="submit" />

</form>
<a class="copyright" href="http://duniatutorials.blogspot.com/2016/09/cara-menambahkan-form-email-subscribe.html" target="blank"> feedburner</a>
</div>

CSS

body{background:#fff;}
#feedform{margin-bottom:12px;}
.hl-email:before,.hl-email:after{content: "";
    position: absolute;
    bottom: -3px;
    left: 2px;
    right: 2px;
    height: 1px;
    border-top: none;
    background: #F0F0F0;
    border: 1px solid #ccc;
}
.hl-email:after{left: 4px;
    right: 4px;
    bottom: -5px;
    box-shadow: 0 0 2px #ccc;
}
.hl-email{
background:url(http://4.bp.blogspot.com/-u3UaeUufpmI/T8lFuelsg8I/AAAAAAAACQY/tOWbHsgTYKc/s1600/mail.png) no-repeat 12px 12px ;
width:270px;
background-color:#f0f0f0;
padding:10px 65px 5px;
padding-right:2px;
float:left;
font-size:1.4em;
font-weight:bold;
margin:0 12px 10px 0;
position: relative;
color:#686B6C;
box-shadow:0 0 13px #cecece;
}
.hl-emailsubmit{
background:#9B9895;
cursor:pointer;
color:#fff;
border:none;
padding:3px;
text-shadow:0 -1px 1px rgba(0,0,0,0.25);
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
font:12px sans-serif;
}
.hl-emailsubmit:hover{
background:#E98313;
}
.textarea{
padding:2px;
margin:25px 10px 6px 2px;
background:#f9f9f9;
border:1px solid #ccc;
resize:none;
box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
-moz-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
-webkit-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1); font-size:13px;
width:150px;
color:#666;}
.copyright{text-decoration:none;color:#9A9794;font-size:11px;font-family:calibri;float:right;margin:0 35px 0 0;}
.copyright:hover{color:#000;}