JSFiddle - React, Tailwind, and code Playground

by the94air

HTML

<main class="contain">
  <div class="column">
    <div class="box-content">
      <h2>Title</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In sed molestias nemo at, ab ea sequi dolorem aliquid animi suscipit harum provident facere quis debitis neque quasi eligendi sunt vitae.</p>
    </div>
  </div>
  <div class="column">
    <div class="box-content">
      <h2>Title</h2>
    </div>
  </div>
  <div class="column">
    <div class="box-content">
      <h2>Title</h2>
    </div>
  </div>
  <div class="column">
    <div class="box-content">
      <h2>Title</h2>
    </div>
  </div>
</main>

CSS

body {
  margin: 0;
}

.contain {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: 100%;
}

.column {
  display: block;
  width: calc(50% - 2px);
}

.column:nth-child(1) {
  background: red;
}

.column:nth-child(2) {
  background: blue;
}

.column:nth-child(3) {
  background: green;
}

.column:nth-child(4) {
  background: yellow;
}

.box-content {
  border: 1px solid black;
  padding: 1rem;
}