JSFiddle - React, Tailwind, and code Playground

by frapporti

HTML

<body>
    <div id="container">
        <div id="header">
             <h1>
          OnCo
        </h1>

        </div>
        <div id="cont">
            <div id="menu"> <b>
            Menu
          </b>

                <br>ab
                <br>cd
                <br>ef</div>
            <div id="content"></div>
        </div>
    <div id="footer">Copyright Š joj</div>
    </div>
</body>

CSS

div {
    /*colturi rotunde*/
    border-radius: 10px;
}
body {
    /*gradient care se repeta orizontal numai*/
    background-image:url('a.jpg');
    background-repeat:repeat-x;
}
#header > h1 {
    margin-top : 0px;
    margin-bottom: 0px;
}
#container {
    box-shadow: 10px 10px 5px #888888;
    /*bg transparent*/
    background-color:rgba(255, 255, 255, 0.4);
    max-width:960px;
    /*centrat in pagina*/
    margin: 0 auto;
    /*distanta dintre border si continut*/
    padding-top:15px;
    padding-right:15px;
    padding-left:15px;
    min-height: 95vh;
    position: relative;
}
#header {
    background-color:#FFA500;
    position: relative;
}
#menu {
    background-color:#FFD700;
    /*dimensiune*/
    width:15%;
    /*pozitie*/
    float:left;
    position: relative;
    /*margini fata de elemente*/
    margin-right:5px;
    margin-top:5px;
}
#content {
    background-color:#EEEEEE;
    /*dimensiune*/
    min-height:500px;
    width:80%;
    /*pozitie*/
    position: relative;
    /*margini fata de elemente*/
    margin-top:5px;
    margin-bottom:5px;
    padding-bottom: 70px;
    display: inline-block;
}
    #footer {
      background-color:#FFA500;
      text-align:center;
      max-width:960px;
      width: 100%;
    }