JSFiddle - React, Tailwind, and code Playground

by Saksham Malhotra

HTML

<div class="container">
  <div class="one grid-column-start-sm-1 grid-column-end-sm-5 grid-row-start-sm-1 grid-row-end-sm-3 grid-column-start-lg-1 grid-column-end-lg-4">
    <div>YMMS</div>
    <div>vin</div>
    <br><br><button>note</button>
  </div>
  <div class="two grid-column-start-sm-5 grid-column-end-sm-9 grid-row-start-sm-1 grid-row-end-sm-2 grid-column-start-lg-4 grid-column-end-lg-5 grid-row-end-lg-3">
    <div>odo</div>
    <div>odo</div>
  </div>
  <div class="three grid-column-start-sm-9 grid-column-end-sm-13 grid-row-start-sm-1 grid-row-end-sm-2 grid-column-start-lg-5 grid-column-end-lg-7 grid-row-end-lg-3">
    <div>data</div>
    <div>date</div>
  </div>
  <div class="four grid-column-start-sm-5 grid-column-end-sm-9 grid-row-start-sm-2 grid-row-end-sm-3 grid-column-start-lg-7 grid-column-end-lg-9 grid-row-start-lg-1">
    <div>name</div>
    <div>name</div>
  </div>
  <div class="five grid-column-start-sm-9 grid-column-end-sm-13 grid-row-start-sm-2 grid-row-end-sm-3 grid-column-start-lg-9 grid-column-end-lg-11 grid-row-start-lg-1">
    <div>admin</div>
    <div>admin</div>
  </div>
</div>

CSS

.container {
  width: 80%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(2, 1fr);
  border: 1px solid #ccc;
}

.container>div {
  padding: 10px;
  box-sizing: border-box;
}

.one {
  background-color: #acde9a;
}

.two {
  background-color: #decabc;
}

.three {
  background-color: #edfac4;
}

.four {
  background-color: #feacf9;
}

.five {
  background-color: #cacacd;
}





@media (min-width: 576px) {
  .grid-column-start-sm-1 {
    grid-column-start: 1;
  }

  .grid-column-start-sm-2 {
    grid-column-start: 2;
  }

  .grid-column-start-sm-3 {
    grid-column-start: 3;
  }

  .grid-column-start-sm-4 {
    grid-column-start: 4;
  }

  .grid-column-start-sm-5 {
    grid-column-start: 5;
  }

  .grid-column-start-sm-6 {
    grid-column-start: 6;
  }

  .grid-column-start-sm-7 {
    grid-column-start: 7;
  }

  .grid-column-start-sm-8 {
    grid-column-start: 8;
  }

  .grid-column-start-sm-9 {
    grid-column-start: 9;
  }

  .grid-column-start-sm-10 {
    grid-column-start: 10;
  }

  .grid-column-start-sm-11 {
    grid-column-start: 11;
  }

  .grid-column-start-sm-12 {
    grid-column-start: 12;
  }

  .grid-column-start-sm-13 {
    grid-column-start: 13;
  }

  .grid-row-start-sm-1 {
    grid-row-start: 1;
  }

  .grid-row-start-sm-2 {
    grid-row-start: 2;
  }

  .grid-row-start-sm-3 {
    grid-row-start: 3;
  }

  .grid-column-end-sm-1 {
    grid-column-end: 1;
  }

  .grid-column-end-sm-2 {
    grid-column-end: 2;
  }

  .grid-column-end-sm-3 {
    grid-column-end: 3;
  }

  .grid-column-end-sm-4 {
    grid-column-end: 4;
  }

  .grid-column-end-sm-5 {
    grid-column-end: 5;
  }

  .grid-column-end-sm-6 {
    grid-column-end: 6;
  }

  .grid-column-end-sm-7 {
    grid-column-end: 7;
  }

  .grid-column-end-sm-8 {
    grid-column-end: 8;
  }

  .grid-column-end-sm-9 {
    grid-column-end: 9;
  }

  .grid-column-end-sm-10 {
    grid-column-end: 10;
  }

  .grid-column-end-sm-11 {
   ...