JSFiddle - React, Tailwind, and code Playground

HTML

<body data-gr-c-s-loaded="true">
	
	<div id="wrapper">
		<header id="header">
			<div class="db cp btn11">
				<div class="icon-left"></div>
				<div class="icon-right"></div>
			</div>
			<div class="search abs">
				<input class="w100 db box" type="text">
				<button class="abs r0 t0"></button>
			</div>
			<nav class="header_menu alCenter">
				<ul>
					<li><a href="">главная</a></li>
					<li><a href="">Галерея</a></li>
					<li><a href="">о студии</a></li>
					<li><a href="">обьявления</a></li>
					<li><a href="">форум</a></li>
					<li><a href="">Контакты</a></li>
				</ul>
			</nav>
		</header>
		<main id="main" class="cover" style="background-image: url(images/main_fon.jpg);">
			<div class="main_block">
				<div class="calendar_block box abs l0">
					<div class="rL">
						<div class="ph2">Расписание</div>
						<div class="ph3">Парафраз существенно не входит своими </div>
						<div id="datepicker" class="hasDatepicker"><div class="ui-datepicker-inline ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" style="display: block;"><div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-all"><a class="ui-datepicker-prev ui-corner-all" data-handler="prev" data-event="click" title=""><span class="ui-icon ui-icon-circle-triangle-w"></span></a><a class="ui-datepicker-next ui-corner-all" data-handler="next" data-event="click" title=""><span class="ui-icon ui-icon-circle-triangle-e"></span></a><div class="ui-datepicker-title"><span class="ui-datepicker-month">Апреля</span>&nbsp;<span class="ui-datepicker-year">2018</span></div></div><table class="ui-datepicker-calendar"><thead><tr><th><span title="Понедельник">Пн</span></th><th><span title="Вторник">Вт</span></th><th><span title="Среда">Ср</span></th><th><span title="Четверг">Чт</span></th><th><span title="Пятница">Пт</span></th><th class="ui-datepicker-week-end"><span title="Суббота">Сб</span></th><th class="ui-datepicker-week-end"><span...

CSS

@font-face {
		font-family: "MyriadProRegular";
		src: url("../fonts/MyriadProRegular.eot");
		src: url("../fonts/MyriadProRegular.eot?#iefix")format("embedded-opentype"),
		url("../fonts/MyriadProRegular.woff") format("woff"),
		url("../fonts/MyriadProRegular.ttf") format("truetype");
		font-style: normal;
		font-weight: normal;
}

@font-face {
		font-family: "MyriadProSemiBold";
		src: url("../fonts/MyriadProSemiBold.eot");
		src: url("../fonts/MyriadProSemiBold.eot?#iefix")format("embedded-opentype"),
		url("../fonts/MyriadProSemiBold.woff") format("woff"),
		url("../fonts/MyriadProSemiBold.ttf") format("truetype");
		font-style: normal;
		font-weight: normal;
}

@font-face {
	font-family: 'MyriadProBold';
	src: url('../fonts/MyriadPro-Bold.eot');
	src: local('☺'), url('../fonts/MyriadPro-Bold.woff') format('woff'), url('../fonts/MyriadPro-Bold.ttf') format('truetype'), url('../fonts/MyriadPro-Bold.svg') format('svg');
	font-weight: 700;
	font-style: normal;
}

@font-face {
  font-family: 'tornadoc-bold';
  src: url('../fonts/tornadoc-bold.eot');
  src: url('../fonts/tornadoc-bold.woff2') format('woff2'),
       url('../fonts/tornadoc-bold.woff') format('woff'),
       url('../fonts/tornadoc-bold.ttf') format('truetype'),
       url('../fonts/tornadoc-bold.svg#tornadoc-bold') format('svg'),
       url('../fonts/tornadoc-bold.eot?#iefix') format('embedded-opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'helveticaneue';
  src: url('../fonts/helveticaneue.eot');
  src: url('../fonts/helveticaneue.woff2') format('woff2'),
       url('../fonts/helveticaneue.woff') format('woff'),
       url('../fonts/helveticaneue.ttf') format('truetype'),
       url('../fonts/helveticaneue.svg#helveticaneue') format('svg'),
       url('../fonts/helveticaneue.eot?#iefix') format('embedded-opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'helveticaneue';
  src: url('../fonts/helveticaneue-medium.eot');
 ...