JSFiddle - React, Tailwind, and code Playground

by ricardosc12

HTML

<body>
    <div class="container">
        <div class="head"></div>
        <div class="main">
            <div class="painel"></div>
            <div class="dash">
                <div class="head-dash"></div>
                <div class="content-dash">
                    <div class="email-list">
                        <div class="head-content"></div>
                        <div class="content">
                            <div class="item"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

CSS

*{
        box-sizing: border-box;
        padding: 0px;
        margin: 0px;
    }
    .container {
        display: flex;
        position: absolute;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        width: 100%;
        height: 100%;
        background-color: black;
    }
    .head,.main,.painel,.dash,.head-dash,.content-dash,.email-list,.head-content,.content,.item{
      display: flex;
      position: relative;
      width: 100%;
   
    }
    
    .head{
        height: 40px;
        min-height: 40px;
        background-color: blanchedalmond;
    }
    .main{
        flex-direction: row;
        justify-content: flex-start;
        align-items: flex-start;
        height: 100%;
        background: brown;
    }
    .painel{
        height: 100%;
        width: 200px;
        background: cadetblue;
    }
    .dash{
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        height: 100%;
        background:coral;
    }
    .head-dash{
        height: 100px;
        min-height: 100px;
        background: darkcyan;
    }
    .content-dash{
        height: 100%;
        padding: 25px;
        background: #EEEEEE;
    }
    .email-list{
        justify-content: flex-start;
        align-items: flex-start;
        flex-direction: column;
        height: 100%;
        box-shadow: 0px 0px 10px rgba(0,0,0,.2);
    }
    .head-content{
        height: 40px;
        min-height: 40px;
        background: darkslateblue;
    }
    .content{
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        overflow-y: scroll;
        height: 100%;
        background: #FFFFFF;
        padding-top: 5px;
    }
    .item{
        height: 30px;
        min-height: 30px;
        background: white;
        box-shadow: 0px 1px 0px 0px rgba(0,0,0,.2),
        0px -1px 0px 0px rgba(0,0,0,.2);
    }

JavaScript

const target = document.getElementsByClassName('content')[0]
    const quant = 5
    for(var i=0;i<quant;i++){
        let para = document.createElement("div");
        para.className = 'item'
        target.append(para)
    }