JSFiddle - React, Tailwind, and code Playground

by khamer

HTML

<div class="cards">
  <div class="card">
    <div class="card__contents">
      <h2>Lorem ipsum dolor sit.</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, recusandae!</p>
    </div>
  </div>
  <div class="card">
    <div class="card__contents">
      <h2>Omnis atque, saepe alias.</h2>
      <p>Non illo iusto soluta consequuntur omnis quasi eveniet itaque facilis.</p>
    </div>
  </div>
  <div class="card">
    <div class="card__contents">
      <h2>Assumenda iusto voluptatibus, aut.</h2>
      <p>Ducimus praesentium neque reiciendis porro optio voluptates eaque, facilis adipisci.</p>
    </div>
  </div>
</div>

SCSS

.cards {
  display: flex;
  flex-flow: wrap;
  justify-content: center;

  .card {
    margin: 1em;
    padding: 1em;
    border: 1px solid silver;
    min-width: 300px;
    width: 0%;
    flex-grow: 1;
  }
}