JSFiddle - React, Tailwind, and code Playground

by ozzon91

HTML

<div id="sidebar-newsletter">
    <div class="sidebar-title">Newsletter</div>
    <div class="sidebar-nl-text">Subscribe to our free weekly newsletter for news, cool apps and new products released for designers (no spam)
    </div>
    <form action="http://webdesignerdepot.us4.list-manage.com/subscribe/post?u=629d7697cf7444ce87d925a95&amp;id=bd6aeb0bdd" id="sb-subscribe-form" method="post">
        <input type="text" class="footer-text-field" name="EMAIL" id="footer-subscribe-email" value="Your email address">
            <input type="hidden" name="MERGE1" id="MERGE1" value="wddsidebar">
           <div id="sb-nl-members-count">427,055 Subscribers             </div>
             <input type="submit" class="footer-submit-btn" id="footer-subscribe-btn" value="Subscribe">
           
           <div class="clr"></div>
           
           
       </form>
</div>

CSS

/*
Theme Name: Flat Design for WDD
Theme URI: http://www.w3-markup.com/
Description: The WordPress flat theme design especially for WDD.
Version: 1.0
Author: W3-MARKUP
Author URI: http://www.w3-markup.com/
Tags: custom header, fixed width, sidebar
*/

/* css reset*/
html, body, div, span, applet, object, iframe,
h1, h2,fo h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, tr {
	margin: 0;
	padding: 0;
	border: none;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

html{ }
body {
/*font-family:Helvetica, Arial, sans-serif;*/ 

color:#000; 

font-size:13px; position:absolute; width:100%; left:0; top:0; min-height:100%;
line-height: 16px;

background:#e7e7e7;
}

body, input {
   font-family: 'Open Sans', sans-serif;
}

/*
#header-menu, .asection-title, .footer-tiny-title, 
.horizonta-post-title, .sidebar-title, h1 , h2 ,h3 {
  font-family: 'Patua One', georgia, 'sans-serif';
}
*/


.max-cdn-img { opacity:0.3;}
.max-cdn-img:hover { opacity:0.4;}

.ads-here:hover {
border: 1px solid #999;
background: #ddd;
color: #333;
text-decoration:none;
}

.ads-here {
width: 198px;
height: 123px;
line-height: 1000%;
font-weight: bold;
font-size: 12px;
text-align: center;
font-family: verdana,sans-serif;
padding:0;
overflow:hidden;
text-decoration:none;
display:block;
color:#666;
border: 1px solid #ccc;
background: #e7e7e7;
}


.mobile-left-column { float:left; width:50%;}
.mobile-right-column { float:right; width:50%;}

.clr {clear:both;}

::selection {
	background: #ebebeb; 
	}
::-moz-selection {
	background: #ebebeb; 
}

a.md-wg-deal-link, a {text-decoration:none; color:#000;  word-wrap:break-word;}
a.md-wg-deal-link:hover { color:#000;}
a.md-wg-deal-link:hover, a:hover...