JSFiddle - React, Tailwind, and code Playground

by Sebastian Brosch

HTML

<div class="category-container">
  <!-- Repeat this section for all the blocks -->
  <div class="flexy">
    <a href="#">
      <div class="categories">
        <h2>Title</h2>
        <img src="insertimghere.jpg" />
        <p>
          This is an example description. Look at all
          this information. Wow, such info, very description.
        </p>
      </div>
    </a>
  </div>
  <div class="flexy">
    <a href="#">
      <div class="categories">
        <h2>Title</h2>
        <img src="insertimghere.jpg" />
        <p>
          This is an example description. Look at all
          this information. Wow, such info, very description.
        </p>
      </div>
    </a>
  </div>
  <div class="flexy">
    <a href="#">
      <div class="categories">
        <h2>Title</h2>
        <img src="insertimghere.jpg" />
        <p>
          This is an example description. Look at all
          this information. Wow, such info, very description.
        </p>
      </div>
    </a>
  </div>
  <div class="flexy">
    <a href="#">
      <div class="categories">
        <h2>Title</h2>
        <img src="insertimghere.jpg" />
        <p>
          This is an example description. Look at all
          this information. Wow, such info, very description.
        </p>
      </div>
    </a>
  </div>

  <!-- Repeat this section for all of the blocks -->
</div>

CSS

/* Parent Div - Flexbox */
.category-container {
  padding:0 2% 0 2%;
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  /* Next three lines have no effect when changed */
  justify-content:flex-start;
  align-items:flex-start;
  align-content:flex-start;
}

/* Child Div - Flexbox */
.flexy {
  margin:5px 10px;
  padding-bottom:30px;
}

/* Div inside Flexy */
.categories {
  width:350px;
  height:420px;
  margin:auto;
  background-color:#fff;
  padding:30px 15px 10px 15px;
  box-shadow:0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}