JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<body>
    <h1>Hello, world!</h1>
<h2> 3 Equal Columns Grid </h2>
<div class="row">
    <div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
    <div class="col-sm-4" style="background-color:lavenderblush;">.col-sm-4</div>
    <div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
  </div>
  <div class="row">
  <h2>-  3 Unequal Columns </h2>
  </div> 
  <div class="row">
    <div class="col-sm-3" style="background-color:lavender;">.col-sm-3 (LEFT)</div>
    <div class="col-sm-6" style="background-color:lavenderblush;">.col-sm-6(MIDDLE)</div>
    <div class="col-sm-3" style="background-color:lavender;">.col-sm-3 (RIGHT)</div>
  </div>
  
  <div class="row">
  <h2>- Responsive Columns for Multiple Display Types </h2>
  </div>
  <div class="row">
        <div class="col-md-4"><p>Box 1</p></div>
        <div class="col-md-4"><p>Box 2</p></div>
        <div class="col-md-4"><p>Box 3</p></div>
        <div class="col-md-4"><p>Box 4</p></div>
        <div class="col-md-4"><p>Box 5</p></div>
        <div class="col-md-4"><p>Box 6</p></div>
        <div class="col-md-4"><p>Box 7</p></div>
        <div class="col-md-4"><p>Box 8</p></div>
        <div class="col-md-4"><p>Box 9</p></div>
        <div class="col-md-4"><p>Box 10</p></div>
        <div class="col-md-4"><p>Box 11</p></div>
        <div class="col-md-4"><p>Box 12</p></div>
    </div>
  
  
  
    
  </body>