JSFiddle - React, Tailwind, and code Playground

by Abdul Ahmad

HTML

<div class='boxes'>
  <div class='box big'>
    <div class='content'>
      content
    </div>
  </div>

  <div class='box med'>
    <div class='content'>
      content
    </div>
  </div>

  <div class='box sm'>
    <div class='content'>
      content
    </div>
  </div>

  <div class='box big'>
    <div class='content'>
      content
    </div>
  </div>

  <div class='box med'>
    <div class='content'>
      content
    </div>
  </div>

  <div class='box sm'>
    <div class='content'>
      content
    </div>
  </div>
</div>

CSS

.boxes {
  display: flex;
  align-items: center;
}

.box {
  display: flex;
  align-items: center;
  width: 100px;
  background: teal;
  margin: 2px;
}

.big {
  height: 300px;
}

.med {
  height: 200px;
}

.sm {
  height: 100px;
}