JSFiddle - React, Tailwind, and code Playground

by piiantom

HTML

<div class="holder">
  <span>Hello</span>
  <div>World</div>
  <span>How<span> guys </span></span>
  <div>are</div>
  <span class="you">you</span>
  <span>!</span>
</div>

CSS

.holder {
  background-color: rgba(255, 0, 0, .3);
  
  height: initial;
  width: inherit;
  margin: 120px;

}


.holder > * {
  display: block;
}

.holder > div:nth-of-type(1) {
  background-color: green;
  position:absolute;
  opacity: .5;
  height: 50px;

}
.holder > div:nth-of-type(1)+span {
  background-color: blue;
  position: absolute;
  margin-left: 100px;
  margin-top: 10px;
  z-index:2;
}

.you {
  background-color: rebeccapurple;
  color: #fff;
  transform: translate(20px, 20px);
}



span {
  background-color: yellow;
}
div {
  width: 100px;
  height: 100px;
  background-color: red;
}