JSFiddle - React, Tailwind, and code Playground

by SlurmMcKenzie

HTML

<div class="main">

<section class="info1">
  
</section>

<figure class="figure1">
  <img src="http://www.wohnprojekte-vz.de/usermedia/httpuploads/original/BunterBlock.png" class="figure-img">
</figure>

<figure class="figure2">
  <img src="http://www.wohnprojekte-vz.de/usermedia/httpuploads/original/BunterBlock.png" class="figure-img">
</figure>

<figure class="figure3">
  <img src="http://www.wohnprojekte-vz.de/usermedia/httpuploads/original/BunterBlock.png" class="figure-img">
</figure>

<figure class="figure4">
  <img src="http://www.wohnprojekte-vz.de/usermedia/httpuploads/original/BunterBlock.png" class="figure-img">
</figure>

<figure class="figure5">
  <img src="http://www.wohnprojekte-vz.de/usermedia/httpuploads/original/BunterBlock.png" class="figure-img">
</figure>

<figure class="figure6">
  <img src="http://www.wohnprojekte-vz.de/usermedia/httpuploads/original/BunterBlock.png" class="figure-img">
</figure>

<section class="info2">
  
</section>

<figure class="figure7">
  <img src="http://www.wohnprojekte-vz.de/usermedia/httpuploads/original/BunterBlock.png" class="figure-img">
</figure>

<figure class="figure1">
  <img src="http://www.wohnprojekte-vz.de/usermedia/httpuploads/original/BunterBlock.png" class="figure-img">
</figure>

</div>

SCSS

/* RGB */
$color1: rgba(31, 54, 61, 1);
$color2: rgba(255, 94, 91, 1);
$color3: rgba(152, 166, 212, 1);
$color4: rgba(241, 219, 75, 1);
$color5: rgba(211, 252, 213, 1);

body{
  margin: 0;
}

.main{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
}

figure{
  margin: 0;
  &:hover{
    background-color: #fff;
  }
}

.info1{
  grid-column: span 2;
  grid-row: span 2;
}

.info2{
  grid-column: span 2;
}

.figure1{
  grid-column: span 3;
  grid-row: span 2;
  background-color: $color2;
}

.figure2{
  background-color: $color3;
}

.figure3{
  background-color: $color4;
}

.figure4{
  background-color: $color3;
}

.figure5{
  background-color: $color4;
}

.figure6{
  grid-column: span 2;
  background-color: $color5;
}

.figure7{
  grid-column: span 3;
  background-color: $color1;
}

.figure-img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
      mix-blend-mode: multiply;


}

.info1, .info2{
  padding: 40px;
  background-color: #20262e;
}