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" xml:lang="ru" lang="ru">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="robots" content="index, follow" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<title></title>
<link rel="shortcut icon" type="image/x-icon" href="" />
<!--link rel="stylesheet" type="text/css" href="http://s16.ru/test/css/main.css" /-->
<link rel="stylesheet" type="text/css" href="http://s16.ru/test/css/jcarousel.css" />
<script type="text/javascript" src="http://s16.ru/test/js/jq.js"></script>
<script type="text/javascript" src="http://s16.ru/test/js/jcarousel.js"></script>
<script type="text/javascript" src="http://s16.ru/test/js/main.js"></script>
</head>
<body>
<div class="header">
<div class="header_logo">
<img src="http://t1.gstatic.com/images?q=tbn:ANd9GcSwX2E3_DkFlT9GFzi82k2Gusi2HsEDrkAMxurnvZxy9sS_tgQ--tmqltSM" alt="" />
</div>
<div class="header_slider">
<ul id="header-slider" class="jcarousel-skin-tango">
<li><img src="http://s16.ru/test/img/1.jpg" alt="" /></li>
<li><img src="http://s16.ru/test/img/2.jpg" alt="" /></li>
</ul>
</div>
<div class="header_menu">
<ul class="header_menu__list">
<li><a href="#">Menu item #1</a></li>
<li><a href="#">Menu item #2</a></li>
<li><a href="#">Menu item #3</a></li>
<li><a href="#">Menu item #4</a></li>
</ul>
</div>
</div>
<div class="content">
</div>
<div class="footer">
</div>
</body>
</html>
CSS
*:focus {outline:none; }
* html {filter: expression(document.execCommand("BackgroundImageCache", false, true)); }
body {
color: #5f5f5f;
background: #fff;
font-family: inherit;
font-size: 13px;
padding: 0;
margin: 0;
}
h1, h2, h3, h4 {
margin: 0;
padding: 0;
font-weight: normal;
font-style: normal;
}
table { border-collapse: collapse; }
table td {
padding: 0;
margin: 0;
}
p {
margin: 0;
line-height: 1.1em;
}
a {
color: #404244;
text-decoration: underline;
}
/* Header */
.header {
position: relative;
}
.header_logo {
position: relative;
z-index: 2;
height: 0;
left: 0;
top: 10px;
text-align: center;
}
.header_logo img {
position: relative;
}
.header_slider {
position: relative;
z-index: 1;
}
.header_menu {
top: -163px;
z-index: 2;
position: relative;
text-align: center;
}
.header_menu__list {}
.header_menu__list > li {
display: inline-block;
}