JSFiddle - React, Tailwind, and code Playground

by cristianromagnoli

HTML

<div class="wrp clearfix">
    <header class="hdr clearfix">
        header
        <div class="v-carpet">
            <img src="http://oklahomafarmreport.com/wire/news/2010/03/media/03383_JBS_logo.jpg" alt="JBS" />
            <ul class="v-menu">
                <li>v-menu</li>
                <li>v-menu</li>
                <li>v-menu</li>
                <li>v-menu</li>
                <li>v-menu</li>
            </ul>
        </div>
        <ul class="h-menu">
            <li>h-menu</li>
            <li>h-menu</li>
            <li>h-menu</li>
            <li>h-menu</li>
            <li>h-menu</li>
        </ul>
    </header>
    <div class="clearfix">
        <section class="content">content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content...

CSS

*{margin:0;}
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    font-size:0;
}
.wrp{background:#797979; width: 600px; margin: 0 auto; font-family: arial, sans-serif; font-size:13px;}
.hdr{position: relative; background-color:#333; padding: 10px}
.foot{padding: 10px}
.v-carpet{background: #fff; position: absolute; display: block; margin: 0 0 0 10px; padding: 10px; width: 100px; top: 0; left: 0;}
.v-carpet img{width:100px}
.v-menu{list-style:none; margin: 0; padding: 0;}
.h-menu{float: right; color: #fff;}
.h-menu li{display: inline;}
.content{background: #fff; clear:both; width: 440px; float: right; padding:10px;}