JSFiddle - React, Tailwind, and code Playground
by Skaiman
HTML
<div class="logo"></div>
<div class="content">
Cras ultricies ligula sed magna dictum porta. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rutrum congue leo eget malesuada. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Cras ultricies ligula sed magna dictum porta. Donec rutrum congue leo eget malesuada. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.
</div>
CSS
body {
background: url(https://svgzone.ru/img/01.png) no-repeat,
url(https://svgzone.ru/img/02.png) no-repeat 100% 0%;
background-color: rgb(189,189,189);
background-size: 30%;
}
.logo {
display: block;
width: 100%;
height: 110px;
background: url(https://svgzone.ru/img/logo.png) no-repeat;
background-size: 30%;
margin: 2% 0 0 20%;
}
.content {
display: block;
background: rgb(245,245,245);
width: 60%;
margin: 2% auto;
padding: 10px 20px;
}
@media (max-width:800px) {
.logo {
height: 80px;
}
}
@media (max-width:610px) {
.logo {
height: 60px;
}
}
@media (max-width:480px) {
.logo {
height: 40px;
}
}