JSFiddle - React, Tailwind, and code Playground

by Marcel Hochman

HTML

<div id="porteMenu"> 
               <div id="menu1" class="menu" name="1">
                   <div id="porteNumeroMenu1" class="porteNumeroMenu">
                       <div id="numeroMenu1" class="numeroMenu">1</div> 
                   </div>
                   <div id="carteMenu1" class="carteMenu">
                       <div id="nomMenu1" class="nomMenu">menu 1</div> 
                   </div> 
                </div> 
               <div id="menu2" class="menu" name="2">
                    <div id="porteNumeroMenu2" class="porteNumeroMenu">
                        <div id="numeroMenu2" class="numeroMenu">2</div> 
                   </div>
                   <div id="carteMenu2" class="carteMenu">
                        <div id="nomMenu2" class="nomMenu">menu 2</div> 
                    </div> 
                </div> 
                <div id="menu3" class="menu" name="3">
                   <div id="porteNumeroMenu3" class="porteNumeroMenu">
                        <div id="numeroMenu3" class="numeroMenu">3</div> 
                   </div>                                 
                   <div id="carteMenu3" class="carteMenu">
                       <div id="nomMenu3" class="nomMenu">menu 3</div> 
                   </div> 
                </div> 
                <div id="menu4" class="menu" name="4">
                      <div id="porteNumeroMenu4" class="porteNumeroMenu">
                        <div id="numeroMenu4" class="numeroMenu">4</div> 
                   </div>
                       <div id="carteMenu4" class="carteMenu">
                           <div id="nomMenu4" class="nomMenu">menu 4 plus long</div> 
                       </div> 
                </div> 
                <div id="menu5" class="menu" name="5">
                   <div id="porteNumeroMenu5" class="porteNumeroMenu">
                        <div id="numeroMenu5" class="numeroMenu">5</div> 
                   </div> 
                   <div id="carteMenu5"...

CSS

body {
      background-color:#ffffcc;
   }
   #porteMenu {
         position:fixed;
         top:140px;https://jsfiddle.net/fredericmarcel/zayfnzns/#
         width:100%;
         left:0;
         height:490px;
        background-color:#ffffcc;
     }
     .menu { 
         width:260px;
         height:120px;
         background-color:white; 
         //display:flex;
        // justify-content:center;
         border:2px solid black; border-radius:8px;
     }
      #menu1 {
         position:fixed;
         top:160px;
         left:61px;
     }
      #menu2 {
         position:fixed;
         top:160px;
         left:382px;
     }
    #menu3 {
         position:fixed;
         top:160px;
         left:702px;
     }

      #menu4 {
         position:fixed;
         top:325px;
         left:61px;
     }
      #menu5 {
         position:fixed;
         top:325px;
         left:382px;
     }
    #menu6 {
         position:fixed;
         top:325px;
         left:702px; 
     }
    #menu7 {
         position:fixed;
         top:490px;
         left:208px;
     }
    #menu8 {
         position:fixed;
         top:490px;
         left:556px;
     }
    
    .porteNumeroMenu {
         display:flex;
         align-items:center;
         justify-content:center;
         z-index:3;
         margin-left:110px;
         margin-top:-20px;
         width:40px;
         height:40px;
         border-radius:50%;
         background:blue;
    }
    .numeroMenu {
         font-family:Arial;
         font-size:25px;
         font-weight:bold;
         color:white;
         line-height:110%;
         text-align:center;
    }
 
    .carteMenu {  
         // margin-top:0;
         // margin-left:0;
          width:230px;
          display:flex;
          align-content:center;
          justify-content:center;
          height:120px;
    }
    .nomMenu {
        font-family:Arial;
        font-size:30px;
        font-weight:bold;
        text-align:center
        width:240px;
       ...