JSFiddle - React, Tailwind, and code Playground

by Michel Penke

HTML

<main>
  <div class="grid-container">
    <section id="site-card">
      <div class="card" id="site1">


      </div>
      <div class="card" id="site2">


      </div>
      <div class="card" id="site3">


      </div>
    </section>
  </div>
</main>

CSS

.grid-container {
  background-color: #080808;
  display: grid;
  grid-template-areas: "site-card";
  justify-content: space-evenly;
  max-width: 100%;
  height: auto;
}

#site-card {
  grid-area: site-card;
  display: grid;
  grid-template-areas: "site1" "site2" "site3";
  grid-column-gap: 4%;
  grid-row-gap: 10px;
}

#site1 {
  grid-area: site1;
}

#site2 {
  grid-area: site2;
}

#site3 {
  grid-area: site3;
}

.card {
  width: 90px;
  height: 10px;
  background-color: red;
}