JSFiddle - React, Tailwind, and code Playground

by Alexandru Gatea

HTML

<div class="day">
  <span class="park"></span>
  <span class="golf"></span>
  <span class="forest"></span>
  <span class="national"></span>
  <span class="zoo"></span>
  <span class="theme"></span>
  <span class="sports"></span>

  <span class="beach"></span>
  
  <span class="military"></span>
  <span class="industrial"></span>
  
  <span class="hospital"></span>
  <span class="university"></span>
  <span class="cemetery"></span>
</div>

<div class="night">
  <span class="park"></span>
  <span class="golf"></span>
  <span class="forest"></span>
  <span class="national"></span>
  <span class="zoo"></span>
  <span class="theme"></span>
  <span class="sports"></span>

  <span class="beach"></span>
  
  <span class="military"></span>
  <span class="industrial"></span>
  
  <span class="hospital"></span>
  <span class="university"></span>
  <span class="cemetery"></span>
</div>

SCSS

$day: ( park: #c3e0ad, golf: #c3e0ad, zoo: #c5e2b3, theme: #cceab9, sports: #cfedbe, forest: #bbe8a3, national: #9fe080, military: #abd3bb, industrial: #d3d6dc, hospital: #eddae3, university: #eae1d5, cemetery: #d3e6d9, beach: #fcfae7);
@each $zone,
$color in $day {
  .day .#{$zone} {
    background-color: $color;
  }
  .night .#{$zone} {
    background-color: mix(#000000, $color, 85%);
  }
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.day,
.night {
  display: grid;
  padding: 30px;
  grid-gap: 30px;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  margin-bottom: 30px;
}

.day {
  background: #f8f8f8;
}

.night {
  background: #111111;
}

span {
  width: 100px;
  height: 100px;
  position: relative;
  padding: 10px;
  font-size: 10px;
  display: block;
  &:after {
    content: attr(class);
  }
}