JSFiddle - React, Tailwind, and code Playground

by Vadim

HTML

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga labore eligendi saepe illo at deleniti sequi autem tenetur molestias quisquam voluptates qui delectus et, numquam itaque voluptas. Esse, temporibus excepturi id, iusto quasi a hic veniam ipsa mollitia aliquam dolorem eos adipisci obcaecati officia, possimus illo? Perspiciatis, ab, dignissimos. Rerum omnis pariatur, ea perferendis consequuntur quis sapiente officiis adipisci assumenda ab mollitia, tempora dolorum sit praesentium in accusamus qui. Nesciunt, sapiente tempore saepe laborum nam nisi libero velit aspernatur fuga illum deleniti possimus explicabo omnis qui delectus. Sunt, maiores architecto porro ut ipsam voluptatum! Sapiente quas similique facere aspernatur, aut.
<div class="grid">
  <div class="item">lorem1</div>
  <div class="item" style="transform: translateY(-30px)">lorem2</div>
  <div class="item" style="transform: translateY(10px)">lorem3</div>
  <div class="item">lorem4</div>
  <div class="item">lorem5</div>
  <div class="item">lorem6</div>
  <div class="item">lorem7</div>
  <div class="item">lorem8</div>
  <div class="item">lorem6</div>
  <div class="item">lorem7</div>
  <div class="item">lorem8</div>
    <div class="item">lorem5</div>
  <div class="item">lorem6</div>
  <div class="item">lorem7</div>
  <div class="item">lorem8</div>
  <div class="item">lorem6</div>
  <div class="item">lorem7</div>
  <div class="item">lorem8</div>
</div>

CSS

.item {
  border: 1px solid red;
  display: inline-block;
  margin: 0 5px;
}

.grid {
  width: 100%;
  max-width: 300px;
  display: flex;
  flex-wrap: wrap;
  clip-path: polygon(0 -1000px, 100% -1000px, 100% 21px, 0 21px);
}