JSFiddle - React, Tailwind, and code Playground

by ibcLee

HTML

<div class="parent">
<div class="column">1</div>
<div class="column">2</div>
<div class="column">3</div>
<div class="column">4</div>
</div>

SCSS

@mixin common {
  line-height: 100px;
  height: 100px;
  text-align: center;
  color: white;
}

.parent {
  @include common;
  .column{
    float: left;
    width: 25%;
    box-sizing: border-box;
    padding-left: 20px;
    &:nth-child(1){
      background-color: red;
    }
    &:nth-child(2){
      background-color: green;
    }
    &:nth-child(3){
      background-color: blue;
    }
    &:nth-child(4){
      background-color: black;
    }
  }
}