JSFiddle - React, Tailwind, and code Playground

by agib

HTML

<div class="grid-row">
  <div class="grid-item">1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni alias sit officia facere iste numquam, suscipit, fugiat eius rerum, unde eos eum provident ex quas laudantium, quaerat id quae est?</div>
  <div class="grid-item">2. Amet, consectetur adipisicing elit. Magni alias sit officia facere iste numquam, suscipit, fugiat eius rerum, unde eos eum provident ex quas laudantium, quaerat id quae est?</div>
  <div class="grid-item">3. Magni alias sit officia facere iste numquam, suscipit, fugiat eius rerum, unde eos eum provident ex quas laudantium, quaerat id quae est?</div>
</div>
<div class="grid-row">
  <div class="grid-item">1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni alias sit officia facere iste numquam, suscipit, fugiat eius rerum, unde eos eum provident ex quas laudantium, quaerat id quae est?</div>
  <div class="grid-item">2. Amet, consectetur adipisicing elit. Magni alias sit officia facere iste numquam, suscipit, fugiat eius rerum, unde eos eum provident ex quas laudantium, quaerat id quae est?</div>
  <div class="grid-item">3. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni alias sit officia facere iste numquam, suscipit, fugiat eius rerum, unde eos eum provident ex quas laudantium, quaerat id quae est?</div>
</div>
<div class="grid-row">
  <div class="grid-item">1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni alias sit officia facere iste numquam, suscipit, fugiat eius rerum, unde eos eum provident ex quas laudantium, quaerat id quae est?</div>
  <div class="grid-item">2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni alias sit officia facere iste numquam, suscipit, fugiat eius rerum, unde eos eum provident ex quas laudantium, quaerat id quae est?</div>
  <div class="grid-item">3. Magni alias sit officia facere iste numquam, suscipit, fugiat eius rerum, unde eos eum provident ex quas laudantium, quaerat id quae...

CSS

.grid-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
}

.grid-item {
  padding: 1rem;
  background-color: #eeeeff;
  border: 1px solid #ccccff;
}
.grid-item:nth-child(2) {
  display: none;
}