JSFiddle - React, Tailwind, and code Playground

by mreis1

HTML

<div class="container">
    
    <div id="aba" style="display:none;">
        
        Hello world
        
    </div>
    <div class="modal" style="display:none;"></div>    

    
    <div class="wrapper">
        
        <div class="my-inner-section">
            
            <div class="sidebar-a">
                
                <img src="http://placehold.it/350x150"/>
                
            </div>
            <div class="sidebar-b">
                
                At vero eos et accusam et justo duo dolores et ea rebum.

                Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.
                
                Lorem ipsum dolor sit amet.
                
                <div class="close">
                </div>
                
            </div>
            
            
            
            
        </div>
        
        
        <ul class="li">
                
            <li>a</li>
            <li>b</li>
            <li>c</li>
            
        </ul>
    </div>
    
<div>

CSS

.container{
    width:100%;
    background:#333;
    padding:5px;
    background:black;
    
}

.wrapper{
    zoom:75%;
    width:75%;
}

.my-inner-section{
    padding:5px;
    margin:0 auto;
    width:75%;
    background:#444;
    border:1px dotted #999;
    clear:both;
    content:"";
    display:table;
}

[class*="sidebar-"]{float:left; color:#fff}
[class*="sidebar-"] img {max-width:100%;}
.my-inner-section div:last-child{color:red;}

.sidebar-a {width:50%; background:#111;}
.sidebar-b {width:50%; background:#222;}

.close:before{
    content: "\25BC\ ";
}
/*.close:after{
    content: "\ \25BC";
}*/
.close{
    width:5px;
    font-size:50px;
}


#aba {color:#fff}

JavaScript

/* Modernizr 2.6.2 (Custom Build) | MIT & BSD
 * Build: http://modernizr.com/download/#-cssanimations-csstransitions-touch-shiv-cssclasses-prefixed-teststyles-testprop-testallprops-prefixes-domprefixes-load
 */
;window.Modernizr=function(a,b,c){function z(a){j.cssText=a}function A(a,b){return z(m.join(a+";")+(b||""))}function B(a,b){return typeof a===b}function C(a,b){return!!~(""+a).indexOf(b)}function D(a,b){for(var d in a){var e=a[d];if(!C(e,"-")&&j[e]!==c)return b=="pfx"?e:!0}return!1}function E(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a[e]:B(f,"function")?f.bind(d||b):f}return!1}function F(a,b,c){var d=a.charAt(0).toUpperCase()+a.slice(1),e=(a+" "+o.join(d+" ")+d).split(" ");return B(b,"string")||B(b,"undefined")?D(e,b):(e=(a+" "+p.join(d+" ")+d).split(" "),E(e,b,c))}var d="2.6.2",e={},f=!0,g=b.documentElement,h="modernizr",i=b.createElement(h),j=i.style,k,l={}.toString,m=" -webkit- -moz- -o- -ms- ".split(" "),n="Webkit Moz O ms",o=n.split(" "),p=n.toLowerCase().split(" "),q={},r={},s={},t=[],u=t.slice,v,w=function(a,c,d,e){var f,i,j,k,l=b.createElement("div"),m=b.body,n=m||b.createElement("body");if(parseInt(d,10))while(d--)j=b.createElement("div"),j.id=e?e[d]:h+(d+1),l.appendChild(j);return f=["&#173;",'<style id="s',h,'">',a,"</style>"].join(""),l.id=h,(m?l:n).innerHTML+=f,n.appendChild(l),m||(n.style.background="",n.style.overflow="hidden",k=g.style.overflow,g.style.overflow="hidden",g.appendChild(n)),i=c(l,a),m?l.parentNode.removeChild(l):(n.parentNode.removeChild(n),g.style.overflow=k),!!i},x={}.hasOwnProperty,y;!B(x,"undefined")&&!B(x.call,"undefined")?y=function(a,b){return x.call(a,b)}:y=function(a,b){return b in a&&B(a.constructor.prototype[b],"undefined")},Function.prototype.bind||(Function.prototype.bind=function(b){var c=this;if(typeof c!="function")throw new TypeError;var d=u.call(arguments,1),e=function(){if(this instanceof e){var a=function(){};a.prototype=c.prototype;var f=new...