JSFiddle - React, Tailwind, and code Playground

by psics

HTML

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
	<script type="text/javascript" src="js/slider.js"></script>
	<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
	<title>Тестовое задание</title>
	<meta name="keywords" content="" />
	<meta name="description" content="" />
	<link href="css/style.css" rel="stylesheet">
</head>

<body>
<div id="wrapper">

	<header id="header">
		<div id="logotype"><a href="/"><img src="images/logo.png" alt="Трулала"></a></div>
		<div class="wrap-search-form">
		  <form action="#" class="search-form cf">
			<div class="search"><input type="search"  placeholder="Search" /></div>
			<div class="submit"><input type="submit" value="GO"/></div>
		  </form>
		</div>
		<div class="clear"></div>
		<nav id="top_navigation">
			<ul>
			<li><a href="#">HOME</a></li>
			<li><a href="#">ABOUT US</a></li>	
			<li><a href="#">SERVICES</a></li>
			<li><a href="#">PARTNERS</a></li>	
			<li><a href="#">CUSTOMERS</a></li>	
			<li><a href="#">PROJECTS</a></li>	
			<li><a href="#">CAREERS</a></li>	
			<li><a href="#">CONTACTS</a></li>	
				
			</ul>
		</nav><!-- #top_navigation-->

	</header><!-- .header-->
		<div class="clear"></div>
	<main id="content">
	<div class="scroll-pane ui-widget ui-widget-header ui-corner-all">
	  <div class="scroll-content">
		<div class="scroll-content-item ui-widget-header">1</div>
		<div class="scroll-content-item ui-widget-header">2</div>
		<div class="scroll-content-item ui-widget-header">3</div>
		<div class="scroll-content-item ui-widget-header">4</div>
	  </div>
	  <div class="scroll-bar-wrap ui-widget-content ui-corner-bottom">
		<div class="navigation_slider">
			<ul>
				<li><a href="#" alt="1" class="current"><span>1</span> Lorem ipsum dolor</a></li>
				<li><a href="#" alt="2"><span>2</span> Ultricies Pellentesque</a></li>
				<li><a href="#" alt="3"><span>3</span> Aliquam...

CSS

/* Eric Meyer's CSS Reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* End of Eric Meyer's CSS Reset */
@font-face {
    font-family: Oswald-Regular; 
    src: 	url(../fonts/Oswald-Regular.ttf) format('truetype'),
			url(../fonts/Oswald-Regular.otf) format('otf'); 
   }
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
	display: block;
}
body {
	font: 12px/18px Tahoma, Arial, sans-serif;
	width: 100%;
	border-top: 5px solid #7E7E7E;
	background: #F8F8F8 url(images/bg_body.gif) repeat;
	color: #8f8f8f;
}
h1 {
	font-family: 'Oswald-Regular';	
	color: #7e7e7e;
	font-size: 14px;
}
h2 {
	font-family: Oswald-Regular;	
	color: #7e7e7e;
	font-size:12px;
}
a {
	text-decoration:  none;
	color: #525252;
	font-size:12px;	
}
a:hover {
	text-decoration:  none;
	color: #525252;
	font-size:12px;	
}

#wrapper {
	width: 960px;
	position: relative;
	margin: 0 0 -110px -480px;
	left:50%;
}
.clear{
	clear:both;
}

/*...