JSFiddle - React, Tailwind, and code Playground

by klierik

HTML

<div class="wrapper">
  <div class="block main"></div>
  <div class="block main"></div>
  <div class="block main"></div>
  <div class="block dropdown"></div>
  <div class="block main"></div>
  <div class="block main"></div>
  <div class="block main"></div>
  <div class="block dropdown"></div>
  <div class="block main"></div>
  <div class="block main"></div>
  <div class="block main"></div>
  <div class="block dropdown"></div>
  <div class="block main"></div>
  <div class="block main"></div>
  <div class="block main"></div>
  <div class="block dropdown"></div>
</div>

SCSS

body {
  padding: 5%;
}

.wrapper {
  display: flex;
  flex-wrap: wrap;
  
  .block.main {
    height: 150px;
    border: 1px solid #eee;
    width: 33%;
  }
  
  .block.dropdown {
    width: 100%;
    height: 150px;
    margin: 10px 0;
    background: #eaeaea;
  }
}