JSFiddle - React, Tailwind, and code Playground

by TrinhThang

HTML

<!-- table properties -->
<h3> Using table properties</h3>
<div class="col-wrap">
  <div class="col">
    <h2>Column 1</h2>
    <p>Hello World</p>
  </div>

  <div class="col">
    <h2>Column 2</h2>
    <p>Hello World!</p>
    <p>Hello World!</p>
    <p>Hello World!</p>
    <p>Hello World!</p>
  </div>

  <div class="col">
    <h2>Column 3</h2>
    <p>Some other text..</p>
    <p>Some other text..</p>
  </div>
</div>

<br>
<br>
<br>
<!-- Flexbox -->
<h3> Using Flexbox</h3>
<div class="f-grid">
  <div class="f-grid-col">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae, nulla! Assumenda dignissimos harum, molestias iure repudiandae ratione praesentium. Illo facilis et velit ut quam omnis, porro molestiae magni, laboriosam ipsa.
  </div>
  <div class="f-grid-col">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non, quaerat blanditiis. Eligendi quae tenetur ratione repellendus ut.</div>
   <div class="f-grid-col">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae, nulla! Assumenda dignissimos harum, molestias iure repudiandae ratione praesentium. Illo facilis et velit ut quam omnis, porro molestiae magni, laboriosam ipsa.
   </div>
</div>
<br><br><br>

<!--  using css grid</ -->
<h3> Using css grid</h3>
<div class="g-grid">
  <div class="g-grid-col">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia molestiae iure, a laboriosam facere consequuntur repellendus aspernatur porro ut. Doloremque fugiat saepe maiores.
  </div>
  <div class="g-grid-col">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto incidunt, accusantium, cumque obcaecati similique et ducimus inventore fugiat velit exercitationem dolorem iusto porro repellat accusamus quia eum, quos eveniet expedita!
  </div>
    <div class="g-grid-col">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto incidunt, quos eveniet expedita!
    </div>
</div>

<br>
<br>
<br>

<!-- trick -->
<h3> Using float and clear float</h3>
<div...

CSS

/* table properties */
.col-wrap {
    display: table; 
    width: 100%; 
}

.col {
    display: table-cell; 
}
.col:nth-child(even){
  background-color:orange;
}
.col:nth-child(odd){
  background-color:yellow;
}

/* flexbox */
.f-grid {
  display: flex;
  justify-content: space-between;
  margin-left: -1rem;
  flex-flow: row wrap;
}

.f-grid-col {
  flex: 1 0;
  background-color: green;
  margin-left: 1rem;
  margin-bottom: 1rem;
}

/* grid */
.g-grid {
  display: grid;
  /* W(adjusted) = W(individual) - (1rem * 1/2) */
  grid-template-columns: calc(33% - 1rem * 1/2) calc(33.3333% - 1rem * 1/2) calc(33.3333% - 1rem * 1/2);
  grid-column-gap: 1rem;
}

.g-grid-col {
  padding: 1rem;
  background-color:red;
  color:#fff;
}
/* trick */
.container-wrap:after {
    display: table;
    content: "";
    clear: both;
}
#container4 {
    clear: left;
    float: left;
    width: 100%;
    overflow: hidden;
    background: #b2f0f9;
}
#container3 {
    clear: left;
    float: left;
    width: 100%;
    position: relative;
    right: 25%;
    background: #89ffa2;
}
#container2 {
    clear: left;
    float: left;
    width: 100%;
    position: relative;
    right: 25%;
    background: #ffa7a7;
}
#container1 {
    float: left;
    width: 100%;
    position: relative;
    right: 25%;
    background: #fff689;
}
#col1 {
    float: left;
    width: 21%;
    position: relative;
    left: 77%;
    overflow: hidden;
}
#col2 {
    float: left;
    width: 21%;
    position: relative;
    left: 81%;
    overflow: hidden;
}
#col3 {
    float: left;
    width: 21%;
    position: relative;
    left: 85%;
    overflow: hidden;
}
#col4 {
    float: left;
    width: 21%;
    position: relative;
    left: 89%;
    overflow: hidden;
}

/* background gradient */
.five-columns {
  width:100%;
  background-image: -webkit-gradient(linear,
    left top,
    right top,
    color-stop(0, #eee),
    color-stop(20%, #eee),
    color-stop(20%, #ccc),
    color-stop(40%, #ccc),
    color-stop(40%, #eee),
 ...