JSFiddle - React, Tailwind, and code Playground

by ciaoben

HTML

<div class="menu"><p>menu</p></div>
<div class="bottoni"> <button>botton1</button><button>botton2</button><button>botton3</button>
</div>
<div class="content">
    <p>content</p> 
    <div class="tabella"><p>tabella</p>   </div>
    <div class="filtri"><p>filtri</p></div>
</div>

CSS

div {
   
    border:solid;
     
}

.menu {
    z-index:1;
    position: fixed;
    top:0;
    width: 100%;
    height: 10%;
    border-color: darkblue;
    background-color: darkblue;
    font-weight: bold;
    font-size: 8;
    color: white;
    text-align: center;
    
}

.bottoni {
    
    position:absolute;
    top: 11%;
    height:10%;
    width: 1280px;
    
    font-weight: bold;
    font-size: 12;
    color: white;
    text-align: center;
  
    
}

.content {
    
    width: 1280px;
    position:absolute;
    top:22%;
    border-color:yellow;
    height:840px;
    background-color: yellow;
    font-weight: bold;
    font-size: 12;
    color: white;
    text-align: center;
}

.tabella {
   
    position:relative;
    top: -40px;    
    height: 70%;
    background-color: orange;
    font-weight: bold;
    font-size: 12;
    color: white;
    text-align: center;
    
}

.filtri {
    position: relative;
    top: -35px;
    
    height:25%;
    
    border-color: white;
    background-color: lightblue;
    font-weight: bold;
    font-size: 12;
    color: white;
    text-align: center; 
}

button {
    
    float:right;
    background-color:blue;
    color:white;
    border-color:white;
}

JavaScript

<html>
<head>
	<style>
		div {
   
    border:solid;
     
}

.menu {
    z-index:1;
    position: fixed;
    top:0;
    width: 100%;
    height: 10%;
    border-color: darkblue;
    background-color: darkblue;
    font-weight: bold;
    font-size: 30;
    color: white;
    text-align: center;
    
}

.bottoni {
    
    position:absolute;
    top: 11%;
    height:10%;
    width: 100%;
    
    font-weight: bold;
    font-size: 30;
    color: white;
    text-align: center;
  
    
}

.content {
    
    width: 100%;
    position:absolute;
    top:22%;
    border-color:yellow;
    height:80%;
    background-color: yellow;
    font-weight: bold;
    font-size: 12;
    color: white;
    text-align: center;
}

.tabella {
   
    position:relative;
    top: -40px;    
    height: 70%;
    background-color: orange;
    font-weight: bold;
    font-size: 60;
    color: white;
    text-align: center;
    
}

.filtri {
    position: relative;
    top: -35px;
    
    height:25%;
    
    border-color: white;
    background-color: lightblue;
    font-weight: bold;
    font-size: 12;
    color: white;
    text-align: center; 
}

button {
    
    float:right;
    background-color:blue;
    color:white;
    border-color:white;
}
	</style>
</head>
<body>
<div class="menu"><p>menu</p></div>
<div class="bottoni"> <button>botton1</button><button>botton2</button><button>botton3</button>
</div>
<div class="content">
    <p>content</p> 
    <div class="tabella"><p>tabella</p>   </div>
    <div class="filtri"><p>filtri</p></div>
</div>
</body>