JSFiddle - React, Tailwind, and code Playground

by Andrei Gheorghiu

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-12">
      <h1>Normal width</h1>
      <p>Lorem ipsum dolor sit amet, pri ut stet definitiones, et eam erant adolescens contentiones, mea viris facilis ex. Quo nobis maiorum te, suas sale argumentum his ut, nec congue regione repudiare no. In assum nulla vix, cum at dicam prodesset. Posse
        tation erroribus sed at, hendrerit quaerendum no sed.
    </div>
    <div class="col-md-8 offset-md-2 col-sm-10 offset-sm-1 col-12">
      <div class="row">
        <div class="col-12">
          <h1>Restricted width</h1>
          <div class="form-group">
            Parent <code>.col-*</code> uses:
            <input value="col-md-8 offset-md-2 col-sm-10 offset-sm-1 col-12" class="form-control">
          </div>
        </div>
        <div class="col-md-6">Grid</div>
        <div class="col-md-6">More grid</div>
        <div class="col-md-6">Grid</div>
        <div class="col-md-6">More grid</div>
        <div class="col-md-6">Grid</div>
        <div class="col-md-6">More grid</div>
        <div class="col-md-6">Grid</div>
        <div class="col-md-6">More grid</div>
        <div class="col-md-6">Grid</div>
        <div class="col-md-6">More grid</div>
      </div>
    </div>
  </div>
</div>

CSS

/* 
 * Making cols more visible, 
 * NOT needed for example to work!
 */

.col-12>.row {
  background-color: #f5f5f5;
  border: 1px solid #eee;
}

.col-12 .col-md-6 {
  border-top: 1px solid white;
}

@media (min-width: 768px) {
  .col-12 .col-md-6:nth-child(2n+1) {
    border-left: 1px solid white;
  }
}

@media(min-width: 576px) {
  .col-12>.row {
    border-radius: 5px;
  }
}