JSFiddle - React, Tailwind, and code Playground

by Dolfik

HTML

<body>
		<div align="center">
		<div id="wrapper">
			<div id="div_vertical_block">
				<div id="main_one_block">
					<div id="block_image"><img src="../../images/categories.png"></div>
					<div id="hmenu">
						<ul>
							<li><a href="../../index.html" id="active">Главная</a></li>
							<li><a href="../bike.html">Велосипеды</a>
								<ul>									
									<li><a href="../products/bike/hexagon.html">Hexagon</a></li>
									<li><a href="../products/bike/kona.html">Kona</a></li>
								</ul>
							</li>
							<li><a href="../tr.html">Тренажеры</a>
								<ul>									
									<li><a href="../products/exercisers/Body Sculpture.html">Body Sculpture</a></li>
									<li><a href="../products/exercisers/DFC.html">DFC</a></li>
								</ul>
							</li>
							<li><a href="../clothing.html">Спортивная одежда</a>
								<ul>
									<li><a href="../products/">K-Swiss</a></li>
									<li><a href="../products/">Sprandi</a></li>
									<li><a href="../products/">Asics</a></li>
									<li><a href="../products/">M-1</a></li>
								</ul>
							</li>
							<li><a href="../picnic.html">Товары для отдыха</a>
								<ul>
									<li><a href="../products/">Nova Tour</a></li>
									<li><a href="../products/">Искра</a></li>
									<li><a href="../products/">Gernell</a></li>
								</ul>
							</li>
							<li><a href="../#">Единоборства</a>
								<ul>
									<li><a href="../pages/products/">CENTURION</a></li>
									<li><a href="../pages/products/">Master</a></li>
									<li><a href="../pages/products/">Expl</a></li>
								</ul>
							</li>
							<li><a href="../#">Настольный тенис</a>
								<ul>
									<li><a href="../pages/products/">Pong</a></li>
									<li><a href="../pages/products/">Brake</a></li>
									<li><a href="../pages/products/">General</a></li>
								</ul>
							</li>
							<li><a href="../#">Футбол</a>
								<ul>
									<li><a href="../pages/products/">Boll</a></li>
									<li><a...

CSS

body {
	background: #000001 url('images/background.jpg') center top no-repeat;
	margin:0px;
	padding:0px;
	background-attachment:fixed;
}
@font-face {
    font-family: Fixedsys;
    src: url(font/Fixedsys.ttf);
}
#tmenu ul { /*Первый элемент*/
	border:0;
	border-bottom:1px solid #000000;
	background:#1b6186;
	font-weight:normal;
	font-size:10pt;
	font-family:Arial;
	height:30px;
	line-height:30px;
	margin:0;
	padding:0;
	padding-left:4px;
	overflow:hidden;
}

#tmenu li { /*Всё меню*/
	display:inline;
}

#tmenu a { /*Все пункты меню*/
	padding:6px;
	padding-bottom:7px;
	color:#c8c8c8;
	text-decoration:none;
}
#tmenu a:hover { /*Элемент на который наведен*/
	padding:6px;
	color:#FFFFFF;
	padding-top:7px;
	padding-bottom:8px;
	text-decoration:none;
	background:#247cab
}

#tmenu a#active { /*Активный элемент*/
	border-top:2px solid #39d6dd;
	padding:6px;
	padding-top:5px;
	padding-bottom:7px;
	color:#FFFFFF;
	font-weight:bold;
	text-decoration:none;
}

#tmenu a#active:hover { /*Активный выделеный*/
	border-top:2px solid #39d6dd;
	padding:6px;
	padding-top:5px;
	padding-bottom:7px;
	color:#FFFFFF;
	border-top:3px solid #39d6dd;
	text-decoration:none;
	background:#247cab;
}

#header{
	float:center;
	margin-top:-1px;
}

#div_vertical_block {
	float: left;
	width:260px;
	height:822px;;
}

#wrapper {
	margin:0 auto;
	margin-top: -5px;
	width:1000px;
	height:822px;
}
#main_one_block {
	opacity: 0.95;
	float: left;
	margin-top: 2px;
	width:260px;
	height:540px;
	background: #242525;
	border-radius:5px;
	border: 2px solid #c8c8c8;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	-khtml-border-radius:5px;
	position:relative;
}

#main_one_zi_block {
	z-index:-1;
	opacity: 0.95;
	float: left;
	margin-top: 2px;
	width:260px;
	height:270px;
	background: #242525;
	border-radius:5px;
	border: 2px solid #c8c8c8;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	-khtml-border-radius:5px;
	position:relative;
}

#hmenu ul {
	list-style:...