JSFiddle - React, Tailwind, and code Playground

by Luiza CICONE

HTML

<div class="cuisine">
<div class="sol">
  <div class="line">
    <div class="carreau"></div>
    <div class="carreau"></div>
    <div class="carreau"></div>
    <div class="carreau"></div>
    <div class="carreau"></div>
    <div class="carreau"></div>
  </div>
  <div class="line">
    <div class="carreau"></div>
    <div class="carreau"></div>
    <div class="carreau"></div>
    <div class="carreau"></div>
    <div class="carreau"></div>
    <div class="carreau"></div>
  </div>
  <div class="line">
    <div class="carreau"></div>
    <div class="carreau"></div>
    <div class="carreau"></div>
    <div class="carreau"></div>
    <div class="carreau"></div>
    <div class="carreau"></div>
  </div>
  <div class="line">
    <div class="carreau"></div>
    <div class="carreau"></div>
    <div class="carreau"></div>
    <div class="carreau"></div>
    <div class="carreau"></div>
    <div class="carreau carreau-sm"></div>
  </div>
  <div class="line">
    <div class="carreau"></div>
    <div class="carreau"></div>
    <div class="carreau"></div>
    <div class="carreau"></div>
    <div class="carreau"></div>
    <div class="carreau"></div>
  </div>
  <div class="line">
    <div class="carreau invisible"></div>
    <div class="carreau"></div>
    <div class="carreau"></div>
    <div class="carreau"></div>
    <div class="carreau"></div>
    <div class="carreau"></div>
  </div>
  <div class="line">
    <div class="carreau invisible"></div>
    <div class="carreau invisible"></div>
    <div class="carreau"></div>
    <div class="carreau"></div>
    <div class="carreau"></div>
    <div class="carreau"></div>
  </div>
  <div class="line line-sm">
    <div class="carreau invisible"></div>
    <div class="carreau invisible"></div>
    <div class="carreau"></div>
    <div class="carreau"></div>
    <div class="carreau"></div>
    <div class="carreau"></div>
  </div>
</div>



  <div class="verriere"></div>

  <div class="pilier"></div>
  <div class="bar"></div>
  <div...

SCSS

$black:#111;
body {
  background-color: $black;
}
.cuisine {
  box-sizing: border-box;
  position: relative;
  width: 771px;
  height: 465px;
  background-color: white;
  border: 1px solid $black;
  
  > * {
    box-sizing: border-box;
    position: absolute;
    border: 1px solid $black;
  }
}

.verriere {
  width: 7px;
  height: 280px;
  right: 360px;
  background-color: $black;
}

.pilier {
  background-color: $black;
  width: 80px;
  height: 50px;
  top: 250px;
  right: 0;
}

.mur-fond {
  background-color: $black;
  bottom: 0;
  right: 0;
  width: 80px;
  height: 70px;
}

.meubles-bas {
  background-color: #333;
  width:65px;
  height: 240px;
  right: 1px;
  top: 5px;
}

.mur-gauche {
  width: 7px;
  height: 60px;
  bottom: 10px;
  right: 230px;
  background-color: $black;
}


.ilot {
  width: 65px;
  height: 160px;
  top: 75px;
  right: 175px;
  background-color: #333;
}

.bar {
  width: 100px;
  height:200px;
  top: 75px;
  right: 175px;
  background-color: #654321;

}

.rep {
  width: 1px;
  height:1px;
  background-color:red;
  left:493px
}

.chaise {
  width: 30px;
  height:30px;
  background-color: orangered;
}
 .chaise1 {
   top: 290px;
   left:513px
 }
  .chaise2 {
   top: 210px;
   left:453px
 }

 $largeur: 360px;
 $longueur: 465px;
 $taille: 60px;
 $joint: 1.5px;
 .sol {
   right: 0;
   width: $largeur;
   height: $longueur;
   border: none;
 }

 .line {
   display: flex;
   align-content: flex-start;
   
   &.line-sm .carreau{
     height:18px;
   }
 }

 .carreau {
   flex: 0 0 $taille;
   align-self: flex-start;
   width: $taille;
   height: $taille;
   background-color: #222;
   border: $joint solid gray;
   margin: 0;
   padding: 0;
   
   &:first-child {


   }
   
   &:last-child {
     flex: 0 1 auto;
   }
 }
 
 .parquet {
   background-color: white;
   width:200px;
   height:70px;
   bottom: 0;
   right:237px;
   border: none;
 }

.invisible {
  visibility: hidden;
}