JSFiddle - React, Tailwind, and code Playground

by jontsk

HTML

<body>
    <!--  меню  -->
    	<div class="fst_line_menu posfix">
        </div>
        <div class="bg_scnd_line_menu posfix">
        <div class="scnd_line_menu posrel">
        	<nav>
        	<a href="index.html"><img class="logo_menu" src="img/logo.gif" width="300" 
   height="58" alt="">
   			</a>
            <ul class="dropdown">
				<li><a href="./">Главная</a></li>
				<li><a href="./">Форум</a></li>
				<li><a href="./" class="dir">Новости</a>
                	<ul>
						<li><a href="./">Тест 1</a></li>
						<li><a href="./">Тест 2</a></li>
						<li><a href="./">Тест 3</a></li>
					</ul>
                </li>
			</ul>
            </nav>
        </div>
        </div>
    <!--  /меню  -->
    <!--  осн сайт -->
    <div class="wrapall">
    	<div class="wrapslider posabsl">
        	<div class="container">        
        <div id="presentation_container" class="pc_container">
            <div class="pc_item">
                <div class="desc">
                    <h1>Server Park</h1>
                    Consectetur adipiscing elit. Nunc quis tellus eros.
                    Nam blandit diam id turpis bibendum nec rutrum dui pulvinar. Quisque fermentum,
                    dolor ut adipiscing suscipit, leo lorem malesuada mauris, vitae dapibus mi
                    ligula ut nunc.
                </div>
                <img src="img/slide1.jpg" alt="slide1" />
            </div>
            <div class="pc_item">
                <div class="desc">
                    <h1>iPhone Apps</h1>
                    Consectetur adipiscing elit. Nunc quis tellus eros.
                    Nam blandit diam id turpis bibendum nec rutrum dui pulvinar. Quisque fermentum,
                    dolor ut adipiscing suscipit, leo lorem malesuada mauris, vitae dapibus mi
                    ligula ut nunc.
                </div>
                <img src="img/slide2.jpg" alt="slide2" />
            </div>
            <div class="pc_item">
                <div class="desc"...

CSS

.wrapall{margin:0 auto; width:1200px;}
.posabsl{position:absolute;}
.posrel{position:relative;}
.posfix{position:fixed;}
.header-logo{ z-index:998;}


/*первая линия меню*/
.fst_line_menu{ width:100% ; min-width: 1200px; height: 28px;
background:none repeat scroll 0% 0% #262626; box-sizing: border-box;
z-index:999;
margin-top:-8px; margin-left:-8px;
overflow: hidden; border-top:1px solid #d78e1b; border-bottom:1px solid #000;}



/*вторая линия меню*/
.bg_scnd_line_menu{width:100%;min-width:1200px;height:58px;background:none repeat scroll 0% 0% #1E1E1E;border-top:1px solid #000; border-bottom:1px solid #000;margin-top:20px; margin-left:-8px;}
.scnd_line_menu{width:1200px; height:59px;background:none repeat scroll 0% 0% #1E1E1E;
z-index:1;margin:-1px auto;  border-bottom:1px solid #000;display:block;}
.logo_menu{border-left:1px dashed #c48e2c;border-right:1px dashed #c48e2c;float: left;}




/*меню*/
ul.dropdown {font: normal 14px "Trebuchet MS", Arial, Helvetica, sans-serif;text-transform: uppercase;}
ul.dropdown li {padding: 7px 0;background-color: #1E1E1E;color: #fff;line-height: normal;border-right:1px dashed #c48e2c;}
ul.dropdown a:link, ul.dropdown a:visited {color:#fff; text-decoration:none;}
ul.dropdown a:hover {color:#c48e2c; text-decoration: none;background-color:#2e2e2e}
ul.dropdown a:active {color:#c48e2c;}

/* -- level mark -- */
ul.dropdown ul {width: 170px;height:background:#333;color: #fff;font-size: 11px;text-transform: none;}
ul.dropdown ul li {background-color: #1E1E1E;color: #000;filter: none;}
ul.dropdown ul li.hover, ul.dropdown ul li:hover {background-color:#76b900;}
ul.dropdown ul a:link,	ul.dropdown ul a:visited {color:#fff;}
ul.dropdown ul a:hover {color:#c48e2c; text-decoration: none;}
ul.dropdown ul a:active {color:#c48e2c;}


/* -- Supporting class `dir` -- */
ul.dropdown li a {display: block;padding: 20px 20px;}


/* -- Base style override -- */
ul.dropdown li {padding: 0;}


/* -- Base style reinitiate: post-override activities --...

JavaScript

var presentationCycle = {
    
    /*
     * Presentation Cycle - a jQuery Cycle extension
     * Author:  Gaya Kessler
     * URL:     http://www.gayadesign.com
     *
     */
    
    //slide options
    slideTimeout: 8000,
    containerId: "presentation_container",
    
    //cycle options
    cycleFx: 'scrollHorz',
    cycleSpeed: 600,  
    
    //progressbar options
    barHeight: 14,
    barDisplacement: 20,
    barImgLeft: " img/pc_item_left.gif",
    barImgRight: " img/pc_item_right.gif",
    barImgCenter: " img/pc_item_center.gif",
    barImgBarEmpty: " img/pc_bar_empty.gif",
    barImgBarFull: " img/pc_bar_full.gif",
    
    //variables this script need
    itemCount: 0,
    currentItem: 0,
    itemBarWidth: 0,
    barContainer: "",
    barContainerActive: "",
    barContainerOverflow: "",
    disableAnimation: false,
    
    init: function() {
        
        presentationCycle.itemCount = $('#' + presentationCycle.containerId).children().length;

        presentationCycle.barContainer = $("<div></div>");
        $(presentationCycle.barContainer).addClass("pc_bar_container");
        
        var subtrackSpace = (presentationCycle.itemCount * presentationCycle.barHeight);
        var totalWidth = $('#' + presentationCycle.containerId).innerWidth() - presentationCycle.barDisplacement;
        var fillWidth = Math.floor((totalWidth - subtrackSpace) / (presentationCycle.itemCount - 1));
        presentationCycle.itemBarWidth = fillWidth;
        
        for (var i = 0; i < presentationCycle.itemCount; i++) {
            var item = $("<div>&nbsp;</div>").appendTo(presentationCycle.barContainer);
            var extra_bar = true;
            if (i == 0) {
                $(item).addClass("left");
                $(item).css({
                    backgroundImage: "url(" + presentationCycle.barImgLeft + ")",
                    height: presentationCycle.barHeight + "px",
                    width: presentationCycle.barHeight + "px"
                });
   ...