JSFiddle - React, Tailwind, and code Playground

by mmetsalu

HTML

<div class="dashboard">
        
        <div class="row1">
            
            <div class="equal box1 border">Box 1 <br><br> "w:25%; h:20%;"</div>
            <div class="equal box2 border">Box 2 <br><br> "w:25%; h:20%;"</div>
            <div class="equal box3 border">Box 3 <br><br> "w:25%; h:20%;"</div>         
            <div class="equal box4 border">Box 4 <br><br> "w:25%; h:20%;"</div>
            
        </div>
        
        <div class="row2">
            
            <div class="left-side">               
                
	               <div class="left column">

		                <div class="box5 border">Box 5 <br><br> "w:45%; h:20%;</div>
		                <div class="box8 border">Box 8 <br><br> "w:45%; h:30%;</div>

	               </div>


	              <div class="right column">

	                <div class="box6 border">Box 6 <br><br> "w:40%; h:50%;</div>

	              </div>

	                <div class="box9 border"> Box 9 <br><br> w:85%; h:12.5%;</div>            
	                <div class="box10 border">Box 10 <br><br> w:85%; h:17.5%;</div>
           
            </div> <!-- End left-side -->
            
            <div class="right-side">
                
                <div class="box7 border">Box 7 <br><br> w:15%; h:70%;</div>
                <div class="box11 border">Box 11 <br><br> "w:15%; h:10%</div>
                
            </div>   <!-- End right-side -->
        </div>

    </div>

CSS

html,body,.dashboard{
    width:100%;
    height:100%;
    margin:0;
}
div {float:left;}
.row1, .row2{
    float:left;
}
.row1{
    width:100%;
}
.row1 .equal {float:left; width:25%;}
.row2 {width:100%; float:left; height:100%;}
.left-side {
    width:85%;
    float:left;
    height:100%;
}
.right-side {
    float:right;
    width: 15%;
    height:100%;
}

.left-side .left.column {width:55%;height:50%;}
.box5{
    width: 100%;
    height:40%;
}
.box8 {
    width:100%;
    height:60%;
}
.left-side .right.column {width: 45%; height: 50%;}
.box6 {
    width: 100%;
    height: 100%;
    min-height: 40px; /* For visual demo */
}
.box9 {
    width: 100%;
    height:12.5%;
}
.box10{
   width:100%;
   height: 17.5%;
}
.right-side {height:100%;}
.box7,.box11{
    width:15%;
}
.box7{
    height: 70%;
    width:100%;
}
.box11{
    height:10%;
    width:100%;
}

.border {
  background-color: white;
  box-sizing:border-box;
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
  border:1px solid #000;
}