JSFiddle - React, Tailwind, and code Playground

by vlit

HTML

<!DOCTYPE HTML>
<html lang="ru">
 <head>
  <title>Макет</title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <link rel="stylesheet" href="css/style.css">
  <style>
   @font-face {
    font-family: Rubik-Regular; /* Имя шрифта */
    src: url(font/Rubik-Regular.ttf); /* Путь к файлу со шрифтом */
   }
  </style>
 </head>
 <body>
	<section>
		<div id="content">
			<nav>
				<ul class="head_menu">
				
					<li><a href="#">Главная</a></li>
					<li><a href="#">Клиники</a></li>
					<li><a href="#">Медицинские агенства</a></li>
					<li><a href="#">SPA Thalasso</a></li>
					<li><a href="#">Ассоциация</a></li>
				
				</ul>
			</nav>
			<div class="content_text">
				<div class="content_img"></div>
					<div class="content_title">
						<div class="rating">
							<span>&#9734</span><span>&#9734</span><span>&#9734</span><span>&#9734</span><span>&#9734</span>
						</div>	
						<div class="content_title_img">
							<div class="content_img_title2"></div>
							<div class="content_img_title1"></div>	
						</div>					
					<p>Название клиники</p>				
					</div>
				<div class="content">
					<p><span>Местонахождение: </span>Германия, Страсбург</p>
					<p><span>Ценовая категория: </span>Средняя</p>
					<p><span>Направления: </span>Меднаправление1, меднаправление2, меднаправление3</p>
					<a href="#" class="read_more"><span>Читать подробнее ></span></a>
				</div>
			</div>
				<div class="content_text">
				<div class="content_img"></div>
					<div class="content_title">
						<div class="rating">
							<span>&#9734</span><span>&#9734</span><span>&#9734</span><span>&#9734</span><span>&#9734</span>
						</div>	
						<div class="content_title_img">
							<div class="content_img_title2"></div>
							<div class="content_img_title1"></div>	
						</div>					
					<p>Название клиники</p>				
					</div>
				<div class="content">
					<p><span>Местонахождение: </span>Германия, Страсбург</p>
					<p><span>Ценовая категория:...

CSS

body {
    width: 100%;
	max-width: 100%;
	height: auto;
    margin: 0 auto;
	background: url("../images/fon.jpg");
    background-repeat: no-repeat;
	background-size: cover;
  height: 100%;
}
input[type='radio'] {
	background: Red;
}

#content {
		display:inline-block;
	float:right;
	width: calc(100% - 285px - .35em);
	
}
#sidebar {
	display:inline-block;
	float:left;
	width: 285px;
	height: 100%;
	background: #89a8d4;
}
#footer {
	display:inline-block;
	float:right;
	width: 78%;
	height: 150px;
	background: #0d1013;
	opacity: 0.8;
}
ul.head_menu li{
	 display: inline;
	 color: white;
	 font-family: Rubik-Regular; 
	 margin-left: 40px;

}
ul.head_menu a {
	text-decoration: none;
	color: White
}
.head_menu {
	margin-top: 30px;
}
.logo {
    float:right;
	max-width: 100%;
	width:225px;
	height:50px;
	background: url("../images/logo.jpg");
	background-repeat: no-repeat;
	padding-left: 30px;
	margin-top: 25px;
}
.registration_button {
	 
	width: 225px;
	height: 50px;
	margin-left: 30px;
	margin-top: 50px;
	background: White;
	color: #1555af;
	font-weight: 600;
	border-radius: 25px;
}
.registration_button:hover {
	background: #1555af;
	color: White;
}
.registration_button span {
	width: 205px;
    display: block;
	font-size: 15px;
}
.pick_up_button {
	 
	width: 225px;
	height: 50px;
	margin-left: 30px;
	margin-top: 50px;
	background: #d1263a;
	color: White;
	font-weight: 600;
	border-radius: 25px;
}
.pick_up_button:hover {
	background: #d1263a;
	color: Black;
}
.pick_up_button span {
	width: 205px;
    display: block;
	font-size: 15px;
}
.sidebar_country {
	width: 225px;
	margin-left: 30px;
}
.country_span {
	display: block;
	margin-left: 30px;
	margin-top: 25px;
	margin-bottom: 10px;
	font-weight: 600;
}
.direction_span {
	display: block;
	margin-left: 30px;
	margin-top: 25px;
	margin-bottom: 10px;
	font-weight: 600;
}
.Agency_span {
	display: block;
	margin-left: 30px;
	margin-top: 25px;
	margin-bottom: 10px;
	font-weight: 600;
}
.Agency p{
	display:...