JSFiddle - React, Tailwind, and code Playground

HTML

<div class="slider-principal"  >
   <p>Titulo</p>
   <p>Descrição da Imagem</p>
</div>

CSS

.slider-principal{
  background:red;
  position:relative;
  width:250px;
  height:250px;
	content:'\A';
  top:0;
  left:0;
  opacity: 0.8;
}

.slider-principal:after{
  content:"";
  background:rgba(0,0,0,.4);
  width:100%;
  height:100%;
  position:absolute;
  left:0;
  top:0;
  z-index:1;
}

.slider-principal p{
  text-align:center;
  padding:10px;
	color: #fff;
  position:relative;
  color: #fff;
  font-family: "Myriad Pro";
  z-index: 10;
}