JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Maestro</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<link rel="stylesheet" href="css/reset.css" type="text/css" />
<link rel="stylesheet" href="css/styles.css" type="text/css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/core.js"></script>
<script type="text/javascript" src="js/jquery.selectBox.js"></script>
<link type="text/css" rel="stylesheet" href="css/jquery.selectBox.css"></script>
<link rel="stylesheet" href="js/fancybox/jquery.fancybox.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/fancybox/jquery.fancybox.pack.js"></script>
</head>
<body>
<div class="container">
<div class="header">
<div class="logo"><!-- end .logo --></div>
<div class="header_left">MAESTRO<!-- end .header_left --></div>
<div class="header_right"><!-- end .header_right --></div>
<!-- end .header --></div>
<div id="nav_shadow"><!-- end .nav_shadow --></div>
<div class="content">
<div class="slider" >
<div class="slide active" style="width:960px">
<div class="banner">
<div id="main_slider" >
<div class="main_slide">
<div class="banner_img"><img src="images/example_img.jpg" /></div>
<div class="banner_text">
<h1>Шедевры - бывают!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nulla dolor, ullamcorper sed ultricies eu, consequat id leo. Nunc suscipit pulvinar odio, sit amet lacinia urna viverra sed. Morbi vel risus sed purus rutrum porta eget a est. Phasellus dolor libero, tempor quis ultrices ultrices, luctus vel elit. In hendrerit sapien sit amet justo...
CSS
p {
line-height:140%;
font-size:14px;
}
h1 {
font-family:"MS Serif", "New York", serif;
font-size:36px;
color:#16222a;
margin-bottom:15px;
font-weight:normal;
}
h2 {
font-family:"MS Serif", "New York", serif;
font-size:24px;
color:#16222a;
margin-bottom:15px;
font-weight:normal;
}
h3 {
font-family:"MS Serif", "New York", serif;
font-size:18px;
color:#16222a;
margin-bottom:10px;
font-weight:normal;
}
.ourtable {border-collapse: collapse; background:#fff; font-size:16px; border-collapse:separate; border-spacing:2px;}
.ourtable td {padding: 8px; color:#404040;}
.ourtable th {padding: 8px; background:#FFF;}
.ourtable tr.odd {background: #fff; background:#fff;}
left {
margin-right:10px;
margin-bottom:10px;
}
.right {
margin-left:10px;
margin-bottom:10px;
}
.shadows {
-moz-box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
-webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
}
div.clear {
clear:both;
}
div.top_form {
width:532px;
height:65px;
padding-top:35px;
float:left;
}
#top_form {
width:418px;
height:23px;
padding:4px 10px 4px 4px;
background:url(../images/top_form.png);
font-size:16px;
border:0;
float:left;
}
div.selector {
margin-left:798px;
padding-top:34px;
padding-bottom:13px;
}
#find_button {
margin-left:12px;
float:right;
width:88px;
height:30px;
font-size:16px;
background:url(../images/find.png);
border:0;
padding:0;
cursor:pointer;
}
#find_button:hover {
background:url(../images/find_on.png);
}
#find_button:active {
background:url(../images/find_click.png);
}
.button_class {
width:120px;
height:30px;
font-size:16px;
background:url(../images/sleep.png);
border:0;
padding:0;
cursor:pointer;
}
.button_class:hover {
background:url(../images/on.png);
}
.button_class:active {
...