JSFiddle - React, Tailwind, and code Playground

by hugot1944

HTML

<div class="boxWrapper">
  <div class="box" id="box1">
      <a href="/characters/character1.html">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Blue_Square.svg/781px-Blue_Square.svg.png"/>
      <p>Character 1</p>
      </a>
  </div>
  <div class="box" id="box2">
      <a href="/characters/character1.html">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Blue_Square.svg/781px-Blue_Square.svg.png"/>
      <p>Character 2</p>
      </a>
  </div>
  <div class="box" id="box3">
      <a href="/characters/character1.html">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Blue_Square.svg/781px-Blue_Square.svg.png"/>
      <p>Character 3</p>
      </a>
  </div>
  <div class="box" id="box4">
      <a href="/characters/character1.html">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Blue_Square.svg/781px-Blue_Square.svg.png"/>
      <p>Character 4</p>
      </a>
  </div>
  <div class="box" id="box5">
      <a href="/characters/character1.html">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Blue_Square.svg/781px-Blue_Square.svg.png"/>
      <p>Character 5</p>
      </a>
  </div>
  <div class="box" id="box6">
      <a href="/characters/character1.html">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Blue_Square.svg/781px-Blue_Square.svg.png"/>
      <p>Character 6</p>
      </a>
  </div>
  
  <div class="box" id="box7">
      <a href="/characters/character1.html">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Blue_Square.svg/781px-Blue_Square.svg.png"/>
      <p>Character 7</p>
      </a>
  </div>
  <div class="box" id="box8">
      <a href="/characters/character1.html">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Blue_Square.svg/781px-Blue_Square.svg.png"/>
      <p>Character 8</p>
      </a>
  </div>
  <div class="box" id="box9">
      <a...

CSS

/*Box Wrapper Design*/
.boxWrapper{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-column-gap: 2em;
    grid-row-gap: 5em;
    margin-top: 120px;
}

.boxWrapper .box{
    background-color: rgb(241, 240, 240);
    width: 300px;
    height: 355px;
    margin: 0 auto;
    text-align: center;
}

.boxWrapper .box img{
    width: 100%;
    height: 84.5%;
}

.boxWrapper .box a{
    font-size: 22px;
    font-weight: normal;
}

.boxWrapper .box p{
    font-family: "Lato", sans-serif;
    font-weight: bold;
    font-size: 18px;
    color: rgb(22, 22, 22);
}