JSFiddle - React, Tailwind, and code Playground

by vadimkot

HTML

<main>
<section>

  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>

</section>
</main>

CSS

main {
  background: red;
}

section {
  display: flex;
  flex-flow: row wrap;
  margin: 0 -10px -20px -10px;
  outline: 1px solid black;
}

div {
  flex: 0 0;
  flex-basis: calc((100%/2) - 20px);
  margin: 0 10px 20px 10px;
  background-color: #ddd;
  position: relative;
}

div:before {
  content: "";
  padding-bottom: 100%;
  display: block;
}

body {
  margin: 0;
  display: flex;
  justify-content: center;
  overflow-x: hidden;
}