JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<body>
<p><a href = "">Главная</a> > <a href = "">Все санатории </a>> Комплекс Риксос - Прикорпатье</p>
<div id="case">
<div class="name">Комплекс Риксос - Прикорпатье в Трускавце</div>
<div class="subsection">Украина, Львовская обл.,Г.Трускавец., ул.Городище, д.9</div>
<div id="map"><a href="" class="dot">Посмотреть на карте</a></div>
<div class="menu"><a href="" class="dot">Лечение</a></div>
<div class="menu"><a href="" class="dot">Описание</a></div>
<div class="menu_price"><a href="" class="dot_price">Цены</a></div>
<div class="menu"><a href="" class="dot">Отзывы</a></div>
<div class="clear"></div>
</div>
<body>
CSS
body {
background-color:#C1E5FC;
font-family:sans-serif;
}
#case{
padding:20px;
width:100%;
margin:0 auto;
height:100%;
background-color:#FFF;
overflow:auto;
background-size:contain;
border-radius:6px;
-webkit-border-radius:6px;
-moz-border-radius:5px;
-khtml-border-radius:10px;
}
.subsection{
color:#999;
float:left;
margin-right:25px;
}
.name{
font-size:22px;
font-weight:bold;
}
#map{
margin-left: 30%;
text-decoration: none;
margin-bottom:40px;
}
.clear{
clear: both;
}
a{
color:#000;
}
a.dot {
color:#008BEE;
text-decoration: none;
border-bottom: 1px dashed #008BEE;
}
a.dot_price {
color:#fff;
text-decoration: none;
}
.menu{
float:left;
margin-right:25px;
}
.menu_price{
padding:5px 10px;
float:left;
margin-right:25px;
border-radius:6px;
-webkit-border-radius:6px;
-moz-border-radius:5px;
-khtml-border-radius:10px;
background-color:#22A3F2;
}
.clear{
clear: both;
}