JSFiddle - React, Tailwind, and code Playground

by aburayane

HTML

<div class='bodyContainer'>
<div class='header'>
    <div class="headerTop">
        <img src="Images/header.png" width="950" />
    </div>
    <div class="headerMenu">
        header menu
    </div>

</div>

<div class='content'>
<div class='menuRight'>
    right right<br/>
    right right<br/>
    right right<br/>
    right right<br/>
    right right<br/>
    right right<br/>
    right right<br/>
    right right<br/>
    right right<br/>
    right right<br/>
    right right<br/>
    right right<br/>
    right right<br/>
    right right<br/>
    right right<br/>
    right right<br/>
    right right<br/>
    right right<br/>
    right right<br/>
    right right<br/>
    right right<br/>
    right right<br/>
    right right<br/>
    right right<br/>
    right right<br/>
    right right<br/>
    right right<br/>
    right right<br/>
    right right<br/>
    right right<br/>
    right right<br/>
    right right<br/>
    right right<br/>
    right right<br/>
    right right<br/>
    right right<br/>
    right right<br/>
    right right<br/>
    right right<br/>
    right right<br/>
    right right<br/>
    
</div>   

<div class='main'>
    <div class="mainMenu">
        menu         
        <br/>
    menu
    </div>
    <div class="">
main  main  main  main  main  main  main  main  main  main    
<br />main  main  main  main  main  main  main  main  main  main    
<br />main  main  main  main  main  main  main  main  main  main    
<br />main  main  main  main  main  main  main  main  main  main    
<br />main  main  main  main  main  main  main  main  main  main    
<br />main  main  main  main  main  main  main  main  main  main    
<br />main  main  main  main  main  main  main  main  main  main    
<br />main  main  main  main  main  main  main  main  main  main    
<br />main  main  main  main  main  main  main  main  main  main    
<br />main  main  main  main  main  main  main  main  main  main    
<br />main  main  main  main  main  main  main  main  main ...

CSS

body{
        margin: 0;
        padding: 0;
    }
    
    .bodyContainer{
        width: 950px;
        margin-right: auto;
        margin-left: auto;
        /*border: 1px solid black;*/
    }
    
    .header, .footer{
        height: 230px;
        background-color: #FFCCFF;
    }
    
    .headerTop {
        height: 200px;
    }
    
    .headerMenu {
        height: 30px;
        background-color: #59709A;
        color: #FFFFFF;

    }
    
    .mainMenu{
        background-color: #E1FAFE;
        
        
    }
    
    .main{
        
    }
    
    .content{
        border: 10px solid red;
        height: auto;
        min-height: 700px;
    }
    
    .menuRight{
        width: 200px;
        float: right;
        overflow: hidden;
        background-color: #CC00CC;
        border: 1px solid green;
        
    }