JSFiddle - React, Tailwind, and code Playground

by liu jinkai

HTML

<p>Introduction:
bootstrap is mobile first.
The Bootstrap 3 grid system has four tiers of classes: xs (phones), sm (tablets), md (desktops), and lg (larger desktops). You can use nearly any combination of these classes to create more dynamic and flexible layouts.
Each tier of classes scales up, meaning if you plan on setting the same widths for xs and sm, you only need to specify xs. <p>
<p>
Example:
</p>
from phones scaling to large desktop
<div class="row">
    <div class="col-xs-6">col-xs-6</div>
    <div class="col-xs-6">col-xs-6</div>
</div>
from tablet scaling to large desktop is 6/12,but phones are 12
<div class="row">
    <div class="col-sm-6">col-sm-6</div>
    <div class="col-sm-6">col-sm-6</div>
</div>
from desktop scaling to large desktop is 6/12,but phones and tables are 12
<div class="row">
    <div class="col-md-6">col-sm-6</div>
    <div class="col-md-6">col-sm-6</div>
</div>

CSS

h4 {
  margin-top: 25px;
}
.row {
  margin-bottom: 20px;
}
.row .row {
  margin-top: 10px;
  margin-bottom: 0;
}
[class*="col-"] {
  padding-top: 15px;
  padding-bottom: 15px;
  background-color: #eee;
  background-color: rgba(86,61,124,.15);
  border: 1px solid #ddd;
  border: 1px solid rgba(86,61,124,.2);
}

hr {
  margin-top: 40px;
  margin-bottom: 40px;
}