JSFiddle - React, Tailwind, and code Playground
HTML
<div class="caption-center">
<div class="slider-title">Testowy Napis</div>
<div class="entry-content">w pełnym zakresie</div></div>
</div>
CSS
.caption-center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
color: #fff;
margin: 0 auto;
}
/*** Caption Center Title ***/
.slider-title {
font-size: 48px;
line-height: 48px;
padding: 16px 30px;
margin-bottom: 15px;
font-weight: 900;
text-transform: uppercase;
background: #29abcd;
color: #fff;
text-align: center;
font-family: 'Raleway', Arial, sans-serif;
}
/*** Caption Center Content ***/
.entry-content {
font-size: 30px;
line-height: 30px;
padding: 16px 30px;
font-weight: 400;
text-transform: uppercase;
background: #112d3b;
color: #fff;
text-align: center;
max-width: 372px;
margin: 0 auto;
font-family: 'Raleway', Arial, sans-serif;
}