JSFiddle - React, Tailwind, and code Playground

by Libiros

HTML

<title>Main page</title>

	</head> 
	
	<body>
		<header>
			<div id="head">
				<div id="login">
					<a href="#">Вход</a><span>|</span><a href="#">Регистрация</a>
				</div>
				<div id="head_text"><h1>Интернет-магазин Одежды</h1></div>
				<div id="main_link_banner"><span>Реклама<span></div>
			</div>
		</header>
		<div id="main_link"><a href="#">Интернет-магазин Одежды</a></div>
		<nav>
			<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>
				<li><a href="#" id="select">Акции и скидки</a></li>
			</ul>
		</nav>
		<div class="container">
			<aside>
				<div id="menu_one">
					<h1>Каталог</h1>
					<ul>
						<li><a href="#" id="clicker" onclick="show_hide('adult_wear'); return false">Зимняя одежда</a>
							<ul id="adult_wear">
								<li><a href="#">Пальто</a></li>
								<li><a href="#">Трикотаж</a></li>
								<li><a href="#">Нижнее белье</a></li>
							</ul>
						</li>
						<li><a href="#" id="clicker" onclick="show_hide('kids_wear'); return false">Детская одежда</a>
							<ul id="kids_wear">
								<li><a href="#">Праздничная одежда</a></li>
								<li><a href="#">Трикотаж</a></li>
								<li><a href="#">Детские платья</a></li>
							</ul>
						</li>
						<li><a href="#">Униформа</a></li>
						<li><a href="#">Спортивная одежда</a></li>
						<li><a href="#">Свадебные платья</a></li>
						<li><a href="#">Сумки</a></li>
					</ul>
				</div>
			</aside>
			<div id="content">
				<div id="middle">
					<section>
						<h1>Акции и скидки</h1>
                        <img src="http://savepic.ru/4295921.png" alt=""/>
					</section>
					
					<section>
						<h1>Новинки</h1>
						<table id="new_in_market">
							<tr>
                                <td><img src="http://savepic.ru/4311281.png" alt=""/></td>
                                <td><img...

CSS

body {
background: #e8e1da;
}

ul {list-style:none;}

#head, #main_link, nav, .container{
margin: 0 auto;
width:1260px;
padding-left: 4px;
}

header {
width: 100%;
height:30px; 
background: #464646; 
border-bottom:1px solid rgba(255,215,0,0.5); 
color:#dddddd;
}
#head{
height:30px;
}
/* Ссылки на вход и регистрацию */
#login{
position:absolute; 
top:10px;
}
#login a{
font:normal 16px georgia; 
color: rgba(255,215,0,0.7); 
text-decoration:underline; 
padding-left:0px;
padding-top:3px;
}
#login a:hover {
text-decoration:none;
}
#login span{
font:normal 16px georgia; 
margin-left:7px; 
margin-right:7px;
}
/* Текст в header'e */
#head_text{
position:relative; 
margin-left:250px; 
}
#head_text h1{
font:bold 16px georgia; 
color: rgba(255,215,0,0.7);
}

#main_link {
height:125px; 
text-align:center;
}
#main_link, nav{
padding-top:20px;
}
#main_link a{
font:bold 38px georgia; 
color:#92000A; 
text-shadow: 1px 1px 15px #464646;
text-decoration:none;
}

#main_link_banner{
width:500px; 
height:100px; 
border:2px dotted #777; 
position:relative; 
float:right; 
margin-top:35px; 
margin-right:100px; 
text-align:center;
}
#main_link_banner span{
display:block; 
padding-top:25px; 
font: normal 38px georgia; 
color:#c6c0b8;
}

nav ul {
display:inline-block; 
-moz-box-shadow: 0px 3px 20px rgba(0,0,0,1); 
-webkit-box-shadow: 0px 3px 20px rgba(0,0,0,1); 
box-shadow: 0px 3px 20px rgba(0,0,0,1); 
border-radius:10px; 
-moz-border-radius:10px 10px 10px 10px;  
-khtml-border-radius:10px 10px 10px 10px;
-webkit-border-radius:10px 10px 10px 10px;
background: #f5f3f1;
}
nav ul li{
display:inline-block;
padding:10px; 
padding-right:20px;
}
nav ul li:first-child{
padding-left:20px;
}
nav a{
position: relative; 
height: 20px;
}
nav a{
font:bold 16px georgia; 
color:#ad7d37; 
text-decoration:underline;
}
nav a:hover{
text-decoration:none;
}

.container {
margin-top:40px;
}

aside {
width:200px; 
float:left;
}
aside li{
padding-bottom:15px;
}
aside a{
font: bold 16px georgia; 
color:#ad7d37;...

JavaScript

function show_hide(_element_id) {
				 var element = document.getElementById(_element_id);
				 if (element) {
					element.style.display = element.style.display == 'block' ? '' : 'block';
				 }
			}