JSFiddle - React, Tailwind, and code Playground

by saxxi

HTML

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>

<div id="wrapper">

    <div class="test2 header clearfix">
    
        <div class="test mleft" style="height:100px;">left</div>
    
        <div class="test3 mright" style="height:40px;">right</div>
    
    </div>
    
    <div class="test2 content clearfix">
    
        <div class="test mleft" style="height:300px;">left</div>
    
        <div class="test3 mright" style="height:600px;">
            <div class="inner_content">
                <div class="tmpblock">blocco</div>
                <div class="tmpblock">blocco</div>
                <div class="tmpblock">blocco</div>
            </div>
        </div>
    
    </div>

</div>
    
</body>
</html>

CSS

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}
 
.clearfix {
    display: inline-block;
}
 
html[xmlns] .clearfix {
    display: block;
}
 
* html .clearfix {
    height: 1%;
}

#wrapper { margin-left:2%; margin-right:8%; background:#ccc; min-width:700px; }

.test { border: 1px solid red; background:#fcc; }
.test2 { border: 1px solid blue; margin-bottom:10px; }
.test3 { border: 1px solid green; }
.tmpblock { background:#fff; margin-bottom:20px; height:40px; }

.mleft { float:left; width:100px; margin-left:4%; margin-right:7%; }
.mright { margin-left:100px; padding-left:7%; }
.inner_content { background:#fcf; }

.header, .content { clear:both; }