JSFiddle - React, Tailwind, and code Playground

by Dor Cohen

HTML

<div class="outer">
  <div class="inner">
    <div class="text">
    Some Text
    </div>
  </div>
</div>

CSS

.outer{
  position:relative;
  width:300px;
  height:200px;
  background-image:url("https://upload.wikimedia.org/wikipedia/commons/thumb/d/da/Shunsuke1_20080622.jpg/220px-Shunsuke1_20080622.jpg")
}

.outer .inner{
  width:100px;
  height:50px;
  background-color:pink;
  position:absolute;
  bottom:0;
  text-align:center;
}

.outer .inner .text{
  color:blue;  
}