JSFiddle - React, Tailwind, and code Playground

by mihaibirsan

HTML

<div class="wrapper">
  <div class="a item"></div>
  <div class="b item"></div>
  <div class="c item"></div>
  <div class="d item"></div>
</div>

CSS

.wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
  width: 300px;
  height: 200px;
  resize: both;
}
.item {
  width: 50%;
  height: auto;
}

/* https://color.adobe.com/Copy-of-Elemental-color-theme-10022150/ */
.a { background: #E54661; }
.b { background: #FFA644; }
.c { background: #998A2F; }
.d { background: #2C594F; }