JSFiddle - React, Tailwind, and code Playground

by rluuan

HTML

<div class="a d e">
  <div class="b">
    1
  </div>
  <div class="c">
    2
  </div>
  <p>asdf</p>
  
</div>
<div class="a e">
  luan
</div>

<div class='first'>
    
  <span>
    <div class='second'>
      oi
    </div>
  </span>
    
</div>

CSS

.b, .c {
  width: 200px;
  height: 200px;
  background: #ddd;
  border:1px solid black;
}
.a .b, .a .c {
  box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
}
.a.d {
  box-shadow: 1px 1px 3px red;
}
.a.e {
  background: blue;
}
div {
  padding: 10px;
  margin: 10px;
}
.a {
  display: flex;
  justify-content: space-around;

}
div p {
  color: yellow;
}
.first .second {
  color: yellow
}