JSFiddle - React, Tailwind, and code Playground
HTML
<div class="map-block">
<div class="map-content">
<div class="write-us">
<span>NЁRDS DESIGN STUDIO</span>
<p>191196, Санкт-Петербург, <br>
ул. Б. Конюшенная, д. 19/8<br>
</p>
<p>тел. +7 (812) 275-75-75</p>
<div class="contact-btn">
<a href="contacts.html">Напишите нам</a>
</div>
</div>
<div class="pointer">
<img src="img/pointer.png" class="bubble" width="231px" height="190px">
</div>
</div>
</div>
CSS
.map-block{
min-height: 416px;
min-width: 880px;
background: #eee no-repeat url("../img/map.png") 50% 50%;
background-size: cover;
opacity: 1;
}
.map-content {
position: relative;
width: 880px;
margin: 0 auto;
z-index: 0;
}
.write-us {
position: absolute;
width: 230px;
height: 240px;
top: 88px;
left: 0%;
background: #ffffff;
padding-left: 20px;
}
.write-us span {
display: block;
font-size: 16px;
margin-top: 31px;
}
.write-us p {
font-size: 16px;
line-height: 20px;
color: #666666;
}
.contact-btn
{ margin-top: 32px;
border-radius: 5px;
width: 210px;
height: 38px;
background: #fb565a;
}
.contact-btn a {
display: block;
font-size: 14px;
line-height: 18px;
color: #ffffff;
padding-top: 14px;
padding-left: 54px;
}
.pointer {
position: absolute;
/*margin-left:715px;
margin-top: 115px;*/
left:750px;
top: 90px;
}