JSFiddle - React, Tailwind, and code Playground
HTML
<section class="contacts">
<div class="container">
<h1 class="contacts-header">
Контакты
</h1>
<div class="contacts-content">
<div class="contacts-information">
<div class="contacts-description">
<p>
Адрес
</p>
</div>
<div class="contacts-description">
<p>
Телефоны
</p>
</div>
<div class="contacts-description">
<p>
E-mail
</p>
</div>
<div class="contacts-description">
<p>
График
</p>
</div>
</div>
<div class="contacts-photo">
<button>
Построить маршрут
</button>
</div>
</div>
</div>
</section>
CSS
* {
box-sizing: border-box;
}
body {
background: #999;
}
.contacts-header {
font-style: normal;
font-weight: normal;
font-size: 40px;
line-height: 40px;
color: #333333;
text-indent: 40px;
padding-top: 40px;
}
.contacts-content {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 20px;
max-width: 1168px;
padding: 40px;
background-color: #ffffff;
border-radius: 15px;
}
.contacts-description {
border-bottom: 1px solid #eee;
}
.contacts-photo {
display: flex;
align-items: flex-end;
justify-content: center;
min-height: 528px;
padding: 40px;
border-radius: 15px;
cursor: pointer;
background-image: url(/src/img/contacts.png);
background-repeat: no-repeat;
background-color: #eee;
}
.contacts-information {}