JSFiddle - React, Tailwind, and code Playground

HTML

<header class="main-header" style="">
	<div class="container">
		<div class="main-header__holder">
			<div class="main-header__logo">
				<img src="img/icons/logo.png" alt="">
			</div>
			<h3>заголовокss</h3>
		</div>
	</div>
</header>

CSS

.main-header {
	position: relative;
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	background-size: cover;
	background-position: top center;
	min-height: 500px;
	margin: 70px 0;
}

.main-header:after,
.main-header:before {
	position: absolute;
	content: ' ';
	top: 0px;
	left: 0px;
	height: 100%;
}

.main-header:after {
	z-index: 2;
	width: 100%;
	background-image: url(https://klike.net/uploads/posts/2019-01/1547365376_1.jpg);
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	background-size: cover;
	background-position: top center;
	-webkit-filter: blur(10px);
	filter: blur(10px);
}

.main-header:before {
	z-index: 3;
	width: 50%;
	background-color: #1cbcc8;
}

.main-header__holder {
	position: relative;
	z-index: 4;
}

.main-header__logo img {
	display: block;
}