JSFiddle - React, Tailwind, and code Playground

by Anchit Gupta

HTML

<div class="common-class div1">
  <span class="text">div1</span>
</div>
<div class="common-class div2">
  <span class="text">div2</span>
</div>
<div class="common-class div3">
  <span class="text">div3</span>
  <div class="common-class div4">
    <span class="text">div3.1</span>
  </div>
  <div class="common-class div5">
    <span class="text">div3.2</span>
  </div>
  <div class="common-class div6">
    <span class="text">div3.3</span>
  </div>
</div>

CSS

.common-class{
  width: 100px;
  height: 50px;
  opacity:0.7;
}
.text{
  font-size:15px;
}
.div1{
  background-color:red;
}
.div2{
  background-color:yellow;
}
.div3{
  background-color:green;
  padding: 20px;
}
.div4{
  background-color:pink;
}
.div5{
  background-color:brown;
}
.div6{
  background-color:blue;
}