JSFiddle - React, Tailwind, and code Playground

by Kumar Sidharth

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/12-column-grid@1/dist/grid.css">
<h1>12-column-grid demo</h1>

<div class="container">
  <div class="grid">
    <div class="col-sm-6 col-md-2 col-xs-12">
      1 of 2
    </div>
    <div class="col-sm-6 col-md-10 col-xs-12">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col-4 col-sm-4 col-lg-6">
      1 of 3
    </div>
    <div class="col-4 col-sm-4 col-lg-6">
      2 of 3
    </div>
    <div class="col-4 col-sm-4 d-lg-none">
      3 of 3
    </div>
  </div>  
</div>

CSS

.row,
.grid {
  background: #d8d9da;
  margin-top: 20px;
}

[class*=col] {
  border: solid 1px #6c757d;
  padding: 10px;
}