JSFiddle - React, Tailwind, and code Playground
HTML
<div class="page-title-block-wrapper">
<div class="page-title-block">
<div class="page-title">
<span>Информация</span>
</div>
<div class="page-breadcrumb">
<ul class="page-breadcrumb-list">
<li>Главная > </li>
<li class="current-item"><span>Инфо</span></li>
</ul>
</div>
<div class="page-breadcrumb">
<ul class="page-breadcrumb-list">
<li>Главная > </li>
<li class="current-item"><span>Инфо</span></li>
</ul>
</div>
<div class="page-breadcrumb">
<ul class="page-breadcrumb-list">
<li>Главная > </li>
<li class="current-item"><span>Инфо</span></li>
</ul>
</div>
<div class="page-breadcrumb">
<ul class="page-breadcrumb-list">
<li>Главная > </li>
<li class="current-item"><span>Инфо</span></li>
</ul>
</div>
<div class="page-breadcrumb">
<ul class="page-breadcrumb-list">
<li>Главная > </li>
<li class="current-item"><span>Инфо</span></li>
</ul>
</div>
<div class="page-breadcrumb">
<ul class="page-breadcrumb-list">
<li>Главная > </li>
<li class="current-item"><span>Инфо</span></li>
</ul>
</div>
</div>
<div class="page-title-block-image-wrapper-none-shadow">
<img src="http://abali.ru/_d/2013/05/siniy_goluboj_fon_2560x1600.jpg" alt="Студентам">
</div>
</div>
CSS
.page-title-block-wrapper {
position: relative;
}
.page-title-block {
position: absolute;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
color: #fff;
z-index: 10;
left: 0;
right: 0;
}
.page-title {
text-transform: uppercase;
font-size: 50px;
font-weight: bold;
}
.page-breadcrumb li {
display: inline-block;
}
.page-breadcrumb {
text-align: center;
}
.page-title-block-image-wrapper-none-shadow {
height: 285px;
overflow: hidden;
position: relative;
}
.page-title-block-image-wrapper-none-shadow img {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}