JSFiddle - React, Tailwind, and code Playground

by sberube

HTML

<link rel="stylesheet" href="http://960.gs/css/960.css">
<link rel="stylesheet" href="http://960.gs/css/demo.css">
<link rel="stylesheet" href="http://960.gs/css/text.css">
<h1>
  <a href="http://960.gs/">960 Grid System</a>
</h1>
<div class="container_12">
  <h2>
    12 Column Grid
  </h2>
  <div class="grid_12">
    <p>
      940
    </p>
  </div>
  <!-- end .grid_12 -->
  <div class="clear"></div>
  <div class="grid_1 line">
    <p>
      60
    </p>
  </div>
  <!-- end .grid_1 -->
  <div class="grid_11">
    <p>
      860
    </p>
  </div>
  <!-- end .grid_11 -->
  <div class="clear"></div>
  <div class="grid_2 line">
    <p>
      140
    </p>
  </div>
  <!-- end .grid_2 -->
  <div class="grid_10">
    <p>
      780
    </p>
  </div>
  <!-- end .grid_10 -->
  <div class="clear"></div>
  <div class="grid_3 line">
    <p>
      220
    </p>
  </div>
  <!-- end .grid_3 -->
  <div class="grid_9">
    <p>
      700
    </p>
  </div>
  <!-- end .grid_9 -->
  <div class="clear"></div>
  <div class="grid_4 line">
    <p>
      300
    </p>
  </div>
  <!-- end .grid_4 -->
  <div class="grid_8">
    <p>
      620
    </p>
  </div>
  <!-- end .grid_8 -->
  <div class="clear"></div>
  <div class="grid_5 line">
    <p>
      380
    </p>
  </div>
  <!-- end .grid_5 -->
  <div class="grid_7">
    <p>
      540
    </p>
  </div>
  <!-- end .grid_7 -->
  <div class="clear"></div>
  <div class="grid_6 line">
    <p>
      460
    </p>
  </div>
  <!-- end .grid_6 -->
  <div class="grid_6">
    <p>
      460
    </p>
  </div>
  <!-- end .grid_6 -->
  <div class="clear"></div>
  <div class="grid_1 suffix_11 line">
    <p>
      60
    </p>
  </div>
  <!-- end .grid_1.suffix_11 -->
  <div class="clear"></div>
  <div class="grid_1 prefix_1 suffix_10">
    <p>
      60
    </p>
  </div>
  <!-- end .grid_1.prefix_1.suffix_10 -->
  <div class="clear"></div>
  <div class="grid_1 prefix_2 suffix_9">
    <p>
      60
    </p>
  </div>
  <!-- end .grid_1.prefix_2.suffix_9 -->
  <div...

CSS

.line:after {
    border-right: 1px solid #000000;
    bottom: 0;
    content: "";
    display: block;
    margin: 1px;
    position: absolute;
    right: -11px;
    top: 0;
}

.grid_1,  .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9,  .grid_10, .grid_11, .grid_12, .grid_13, .grid_14, .grid_15, .grid_16 {
    position:relative;
    height:100px;
    margin-bottom: 10px;
}

p {
    padding:0;
    height: 100%;
}