JSFiddle - React, Tailwind, and code Playground

by lottikarotti

HTML

<!doctype html>
<html>
    <head>
        <title>box layout</title>
    </head>
    
    <body>
        
        <header>
            <div>Logo 1</div>
        </header>
        
        <section>
            
            <aside>
                <div>Logo 2</div>
                <div class="big"></div>
                <div class="small"></div>
                <div class="big"></div>
                <div class="small"></div>
            </aside>
            
            <section>
                <nav>
                    <ul>
                        <li></li>
                    </ul>
                </nav>
            </section>
            
        </section>
        
    </body>
</html>

CSS

* {
    margin: 0 ;
    padding: 0 ;
    border: 0 none ;
}

html, body {
    width: 100% ;
    height: 100% ;
    background-color: #efefef ;
}

body > header {
    padding: 30px 0 0 130px ;
    width: 1200px ;
    height: 150px ;
    background-color: #fff ;
}

body > header > div {
    width: 230px ;
    height: 150px ;
    background-color: #a8c2db ;
}

body > section {
    padding-left: 130px ;
    width: 1000px ;
}

body > section > aside {
    float: left ;
    width: 230px ;
}

body > section > aside > div:first-child {
    height: 25px ;
    background-color: #c4ddf3 ;
}

body > section > aside > div:not(:first-child) {
    margin-bottom: 10px ;
    background-color: #fff ;
}

body > section > aside > div.small {
    height: 70px ;
}

body > section > aside > div.big {
    height: 150px ;
}

body > section > section {
    float: left ;
    padding-left: 15px ;
    width: 700px ;
    background-color: lightgreen ;
}