JSFiddle - React, Tailwind, and code Playground

by web designer

HTML

<header>
    <h1>header</h1>
</header>

<section class="clearfix">
    <div class="left">
        <h1>Leftside</h1>
    </div>
    <div class="right">
        <div class="container clearfix">
            <div class="item">items</div>
            <div class="item">items</div>
            <div class="item">items</div>
            <div class="item">items</div>
            <div class="item">items</div>
            <div class="item">items</div>
            <div class="item">items</div>
            <div class="item">items</div>
            
        </div>
    </div>
</section>

<footer>
    <h1>footer</h1>
</footer>

CSS

header{
    height:100px;
    border:1px solid red;
    background-color:orchid;
}
section{
    height:400px;
    border:1px solid green;
    
}
section .left{
    float:left;
    background-color:green;
    width:15%;
    color:#fff;
    height:600px;
}
section .right{
    background-color:yellow;
    color:#fff;
    float:right;
    width:85%;
}

footer{
    height:100px;
    border:1px solid black;
    background-color:orange;
}
.clearfix{
    clear:both;
}
.clearfix:after{
    content:"";
    display:table;
    clear:both;
}
.item{
   border:1px solid red;
    background-color:#ddd;
    color:red;
    float:left;
    width:200px;
    height:200px;
    line-height:200px;
    margin:10px;
}