JSFiddle - React, Tailwind, and code Playground
HTML
<body>
<header class="header">
<section class="auto-services"><a href="#">Агротехника</a></section>
<section class="auto-services"><a href="#">Легковой транспорт</a></section>
<section class="auto-about-services">
<section class="header-service active">
<h2 class="header-service__title">Агротехника</h2>
<p class="header-service__text">Цели и предполагаемые задачи внедрения:</p>
<ul class="header-service__list">
<li class="header-service__item"><span>Контроль местоположения и состояния автомобиля в Украине и за ее пределами</span></li>
<li class="header-service__item"><span>Контроль расхода топлива</span></li>
<li class="header-service__item"><span>Контроль режимов работы</span></li>
</ul>
<p class="header-service__text">Получай результат от предлагаемого решения:</p>
<ul class="header-service__list">
<li class="header-service__item"><span>Контроль местоположения автомобиля в реальном времени по всему миру</span></li>
<li class="header-service__item"><span>Контроль уровня и расхода топлива</span></li>
</ul>
</section>
</section>
<section class="auto-services"><a href="#">Спецтехника</a></section>
<section class="auto-services"><a href="#">ЖД транспорт</a></section>
</header>
</body>
CSS
body {
margin: 0;
padding: 0;
margin: 0 auto;
max-width: 1900px;
}
.header {
display: flex;
flex-wrap: wrap;
}
.auto-services {
width: 15%;
height: 400px;
}
.auto-services:first-child, .auto-services:last-child {
width: 20%;
}
.auto-services:nth-child(1) {
background: blue;
/* background-image: url('../img/agro-tech.jpg'); */
background-size: cover;
-webkit-clip-path: polygon(0 0, 100% 0%, 75% 100%, 0% 100%);
clip-path: polygon(0 0, 100% 0%, 70% 100%, 0% 100%);
}
.auto-services:nth-child(2) {
background: green;
/* background-image: url('../img/light-car.jpg'); */
}
.auto-services:nth-child(4) {
background: yellow;
/* background-image: url('../img/spec-tech.jpg'); */
}
.auto-services:nth-child(5) {
background: red;
/* background-image: url('../img/gd-tech.jpg'); */
}
.auto-about-services {
width: 30%;
}
.header-service {
display: none;
}
.active {
display: block;
}