JSFiddle - React, Tailwind, and code Playground

by DeepakKamat

HTML

<html>
    <head>
        <link href='http://fonts.googleapis.com/css?family=Judson|Poiret+One|Sirin+Stencil|Oleo+Script|Felipa|Holtwood+One+SC|Italiana' rel='stylesheet' type='text/css'/>

    </head>  
<body>    
<form class='feed-frm' action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=MyBlog', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<div class='get-sbs'>Subscribe to our Free Email newsletter</div>
<div class='inp-btntx'>
<p class='ent-emltx'>Enter your email address:</p>
<p class='inp-ares'><input class="sbscribe-eml" type="text" style="width:140px" name="email"/></p>
<input type="hidden" value="MyBlog" name="uri"/>
<input type="hidden" name="loc" value="en_US"/>
<input class="submit-btn" type="submit" value="Subscribe" />
</div>
<p class='fd-feedbrnr'>Delivered by <a href="http://feedburner.google.com" target="_blank">FeedBurner</a></p>
<div class='mdt-links'>
<div class='mdt-feed'><a href='http://stramaxon.blogspot.com' target='blank'>Add this Gadget</a></div>
<div class='mdt-feed2'><a href='http://stramaxon.blogspot.com' target='blank'>Gadget by Deepak Kamat</a></div>
</div>
</form>
</body>
</html>

CSS

.feed-frm
{
    max-height:1000px;
margin-top:70px;
padding: 10px;
border: 4px solid grey;
border-radius: 20px;
background:-webkit-linear-gradient(45deg,rgba(63, 64, 65, 0.46) ,rgba(63, 64, 65, 0.46) ,rgba(92, 93, 95, 0.46),rgba(92, 93, 95, 0.31)),url('https://lh6.googleusercontent.com/-Vm6da4aylN4/T7hVpxDG_CI/AAAAAAAAAHA/f9sn9YsCI2s/s128/ultrasonic_rss-20110830223651-00019.png') no-repeat 420px 40px;
background:-moz-linear-gradient(45deg,rgba(63, 64, 65, 0.46) ,rgba(63, 64, 65, 0.46) ,rgba(92, 93, 95, 0.46),rgba(92, 93, 95, 0.31)),url('https://lh6.googleusercontent.com/-Vm6da4aylN4/T7hVpxDG_CI/AAAAAAAAAHA/f9sn9YsCI2s/s128/ultrasonic_rss-20110830223651-00019.png') no-repeat 420px 40px;
background:-ms-linear-gradient(45deg,rgba(63, 64, 65, 0.46) ,rgba(63, 64, 65, 0.46) ,rgba(92, 93, 95, 0.46),rgba(92, 93, 95, 0.31)),url('https://lh6.googleusercontent.com/-Vm6da4aylN4/T7hVpxDG_CI/AAAAAAAAAHA/f9sn9YsCI2s/s128/ultrasonic_rss-20110830223651-00019.png') no-repeat 420px 40px;
background:-o-linear-gradient(45deg,rgba(63, 64, 65, 0.46) ,rgba(63, 64, 65, 0.46) ,rgba(92, 93, 95, 0.46),rgba(92, 93, 95, 0.31)),url('https://lh6.googleusercontent.com/-Vm6da4aylN4/T7hVpxDG_CI/AAAAAAAAAHA/f9sn9YsCI2s/s128/ultrasonic_rss-20110830223651-00019.png') no-repeat 420px 40px;
background:-linear-gradient(45deg,rgba(63, 64, 65, 0.46) ,rgba(63, 64, 65, 0.46) ,rgba(92, 93, 95, 0.46),rgba(92, 93, 95, 0.31)),url('https://lh6.googleusercontent.com/-Vm6da4aylN4/T7hVpxDG_CI/AAAAAAAAAHA/f9sn9YsCI2s/s128/ultrasonic_rss-20110830223651-00019.png') no-repeat 420px 40px;
transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
}
.feed-frm:hover
{

background:-webkit-linear-gradient(45deg,rgba(63, 64, 65, 0.46) ,rgba(63, 64, 65, 0.46) ,rgba(92, 93, 95, 0.46),rgba(92, 93, 95,...