JSFiddle - React, Tailwind, and code Playground

by Marcel Hochman

HTML

<div id="visuContainer">
         <div id="visuElements">
                 <div id="element1" class="element">
                        <p id="nomElement1" class="nomElement">Elément 1</p>      
                 </div>  
                  <div id="element2" class="element">
                        <p id="nomElement2" class="nomElement">Elément 2</p>      
                 </div> 
                 <div id="element3" class="element">
                        <p id="nomElement3" class="nomElement">Elément 3</p>                    
                 </div> 
                 <div id="element4" class="element">
                        <p id="nomElement4" class="nomElement">Objectif 4</p>       
                 </div> 
                  <div id="element5" class="element">
                        <p id="nomElement5" class="nomElement">Elément 5</p>     
                 </div>      
        </div> 
     </div>

CSS

#visuContainer {
                  position: fixed;
                  width: 100%;
                  top: 10%;
                  height: 55%;
                  display: flex;
                  justify-content:center;
                 // background-color: yellow;
                 // align-items: flex-start;
                  left: 0;
                  //overflow: auto;
            }
             #visuElements {
                display: flex;
                  justify-content:flex-start;
                  flex-direction: row;
                  flex-wrap: wrap;
                  overflow: auto;
             }
            
 
            .element {
                  display: flex;
                  flex-direction: column;
                  justify-content:center;
                  align-items: center;
                  background-color: white;
                  border: 2px solid black;
                  border-radius: 8px;
                  width: 25%;
                  height: 20vh;
                  margin: 1vh 15px;
                //margin-top:2vh;

             } 
            .nomElement {
                  font-family:"Arial";
                  padding:5px;  
                  padding-left:10px;
                  padding-right:10px;
                  color:black;			     
			           line-height:110%;
                  text-align:center; 
                  font-size:2em;    
             }