JSFiddle - React, Tailwind, and code Playground

by jashwant

HTML

<div class="cards">
  <div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio aliquid consequatur sit veritatis, pariatur sapiente facilis sunt praesentium asperiores cumque voluptates totam. Reiciendis ex fugiat sapiente. Praesentium rerum dolorum aut.
  </div>
  <div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio aliquid consequatur sit veritatis, pariatur sapiente facilis sunt praesentium asperiores cumque voluptates totam. Reiciendis ex fugiat sapiente. Praesentium rerum dolorum aut.
  </div>
  <div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio aliquid consequatur sit veritatis, pariatur sapiente facilis sunt praesentium asperiores cumque voluptates totam. Reiciendis ex fugiat sapiente. Praesentium rerum dolorum aut.
  </div>
  <div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio aliquid consequatur sit veritatis, pariatur sapiente facilis sunt praesentium asperiores cumque voluptates totam. Reiciendis ex fugiat sapiente. Praesentium rerum dolorum aut.
  </div>
  <div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio aliquid consequatur sit veritatis, pariatur sapiente facilis sunt praesentium asperiores cumque voluptates totam. Reiciendis ex fugiat sapiente. Praesentium rerum dolorum aut.
  </div>
</div>

SCSS

.cards {
  display: flex;
  flex-wrap: wrap;
  
  > div {
    width: 48%;
    padding: 1%;
    margin-bottom: 30px;
    
    &:last-child {
      margin-bottom: 0;
    }
  }
}