JSFiddle - React, Tailwind, and code Playground

by AshThakur

HTML

<b:if cond='data:blog.pageType == "item"'>
<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=lordhtml', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<div class='get-sbs'>Subscribe to our Free Email newsletter</div>
<p>Enter your email address:</p>
<p><input class="sbscribe-eml" type="text" style="width:140px" name="email"/></p>
<input type="hidden" value="lordhtml" name="uri"/>
<input type="hidden" name="loc" value="en_US"/>
<input class="submit-btn" type="submit" value="Subscribe" />
<p>Delivered by <a href="http://feedburner.google.com" target="_blank">FeedBurner</a></p>
<div class='mdt-feed'><a href='http://lordhtml.blogspot.com' target='blank'>Add this Gadget</a></div>
</form>
</b:if>

CSS

.feed-frm
{
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,...