JSFiddle - React, Tailwind, and code Playground

by Karla Jaramillo

HTML

<body>
    <header>
      <code>&#60;header&#62;</code>
    </header>

    <div class="group">
      <code class="default">&#60;section="group"&#62;</code>

      <section class="grid"> 

        <!--Section 1 -->

        <section class="col-1-3">
          <code>&#60;Section 1&#62; <br> inline-block;</code>
        </section><!--

        Section 2

        --><section class="col-1-3">
          <code>&#60;Section 2&#62; <br> inline-block;</code>
        </section><!--

        Section 3

        --><section class="col-1-3">
          <code class=" color-section" id="color-section-id">&#60;Section 3&#62; <br> inline-block;</code>
        </section>

      </section>
    </div>
  
    <footer>
      <code>&#60;footer&#62;</code>
    </footer>
  </body>

CSS

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}


code {
  background: #F64747;
  border-radius: 4px;
  color: #fff;
  display: block;
  font: 14px/24px "Source Code Pro", Inconsolata, "Lucida Console",Terminal, "Courier New", Courier;
  padding: 24px 15px;
  text-align: center;
}


.group,
header,
aside,
footer{
  margin: 0 1.5% 24px 1.5%;
}

footer{
  margin-bottom: 0;
}


/* 
=====================================
Containing floats
=====================================
*/
.default{
  background: none;
  color: #666;
}
.grid{
  margin: 0 auto 30px auto;
}

.grid,
.col-1-3{
  padding-left: 15px;
  padding-right: 15px;
}

.col-1-3{
  display: inline-block;
  width: 33.33%;
}


.group:before,
.group:after{
  content: "";
  display: table;
}

.group:after{
  clear: both;
}

.group{
  background: #eaeaed;
  clear: both;
  *zoom:1;
}

#color-section-id{
  background: #1BBC9B;
}

.color-section{
  background:#D24D57;
}