JSFiddle - React, Tailwind, and code Playground

by Сергей Тарасевич

HTML

<div class="richtext homepage_overlay_menu" state="close" style="top: -2000px;">
	<div class="cn-nav">
		<div class="menu_off"></div>
		<div class="menu_on"></div>
	</div>
	<div class="overlay_menu">
		<div class="overlay_menu_top list">
			<div class="container_link item" style="top: 49px;"><span class="loader-menu"></span><a href="#"><span>НОВОСТИ</span></a></div>
			<div class="container_link item" style="top: 98px;"><span class="loader-menu"></span><a class="" href="#"><span>ПРОГРАММЫ</span></a></div>
			<div class="container_link item" style="top: 147px;"><span class="loader-menu"></span><a class="" href="#"><span>ИГРЫ</span></a></div>
			<div class="container_link item" style="top: 196px;"><span class="loader-menu"></span><a class="" href="#"><span>МУЗЫКА</span></a></div>
			<div class="container_link item" style="top: 245px;"><span class="loader-menu"></span><a class="" href="#"><span>ВИДЕО</span></a></div>
			<div class="container_link item" style="top: 294px;"><span class="loader-menu"></span><a class="" href="#"><span>ФОТО</span></a></div>
			<div class="container_link item" style="top: 343px;"><span class="loader-menu"></span><a class="" href="#"><span>СВЯЗЬ</span></a></div>
			<div class="container_link item" style="top: 392px;"><span class="loader-menu"></span><a class="" href="#"><span>ОБО МНЕ</span></a></div>
			<div class="container_link item" style="top: 441px;"><span class="loader-menu"></span><a class="" href="#"><span>ВАКАНСИИ</span></a></div>
			<div class="carre"></div>
		</div>
	</div>
	<canvas id="line" width="530" height="350"></canvas>
	<div class="overlay_preorder">
		<div class="list">
			<div class="container_link item"><span class="loader-menu"></span><a class="" href="/"><span>Главная</span></a>

			</div>
			<div class="carre"></div>
		</div>
	</div>
</div>

CSS

body {
    background-color:#1D1D1D;
}
a {
    font-family: Borda-Light, bordademibold, Arial;
    color: #f7f7f7;
    text-transform: uppercase;
}
a {
    outline: none;
}
/* MENU */
 .homepage_preorder {
    opacity:0.15;
    filter:alpha(opacity=15);
    -webkit-transition:opacity 1s ease-in-out;
    -moz-transition:opacity 1s ease-in-out;
    -ms-transition:opacity 1s ease-in-out;
    -o-transition:opacity 1s ease-in-out;
    transition:opacity 1s ease-in-out;
}
.packshot-preorder {
    position:absolute;
    top:-35px;
    left:-45px;
}
.homepage_preorder:hover, .homepage_preorder.hover, .homepage_overlay_menu:hover, .homepage_overlay_menu.hover {
    opacity:1;
    filter:alpha(opacity=100);
}
.AspNet-Menu-Horizontal {
    opacity:0.15;
    filter:alpha(opacity=15);
    -webkit-transition:all 1s ease-in-out;
    -moz-transition:all 1s ease-in-out;
    -ms-transition:all 1s ease-in-out;
    -o-transition:all 1s ease-in-out;
    transition:all 1s ease-in-out;
}
.AspNet-Menu-Horizontal:hover, .AspNet-Menu-Horizontal.hover {
    opacity:1;
    filter:alpha(opacity=100);
}
.header_container.mobileMenu {
    position:fixed;
    top:0;
    z-index:10000;
    pointer-events:none;
}
.header_container.mobileMenu .right {
    margin-top:-35px;
}
.header_container.mobileMenu .AspNet-Menu-Horizontal {
    z-index:100;
    pointer-events:auto;
}
.header_container.mobileMenu .logo, .header_container.mobileMenu .homepage_preorder {
    visibility:hidden;
}
.cn-nav {
    width:240px;
    height:240px;
    position:absolute;
    left:calc(50% - 120px);
}
.cn-nav.actifMenu + .homepage_overlay_menu {
    display:block;
}
.homepage_overlay_menu a {
    text-decoration:none;
    text-transform:uppercase;
    color:white;
    display:inline-block;
    position:relative;
    z-index:100000;
}
.homepage_overlay_menu .overlay_preorder a {
    padding:7px 9px;
    height:70px;
    line-height:70px;
}
.homepage_overlay_menu .overlay_menu a {
    padding:5px 9px;
    height:30px;
   ...

JavaScript

/*!
 * VERSION: 1.11.8
 * DATE: 2014-05-13
 * UPDATES AND DOCS AT: http://www.greensock.com
 * 
 * Includes all of the following: TweenLite, TweenMax, TimelineLite, TimelineMax, EasePack, CSSPlugin, RoundPropsPlugin, BezierPlugin, AttrPlugin, DirectionalRotationPlugin
 *
 * @license Copyright (c) 2008-2014, GreenSock. All rights reserved.
 * This work is subject to the terms at http://www.greensock.com/terms_of_use.html or for
 * Club GreenSock members, the software agreement that was issued with your membership.
 * 
 * @author: Jack Doyle, [email protected]
 **/
(window._gsQueue||(window._gsQueue=[])).push(function(){"use strict";window._gsDefine("TweenMax",["core.Animation","core.SimpleTimeline","TweenLite"],function(t,e,i){var s=[].slice,r=function(t,e,s){i.call(this,t,e,s),this._cycle=0,this._yoyo=this.vars.yoyo===!0,this._repeat=this.vars.repeat||0,this._repeatDelay=this.vars.repeatDelay||0,this._dirty=!0,this.render=r.prototype.render},n=1e-10,a=i._internals.isSelector,o=i._internals.isArray,h=r.prototype=i.to({},.1,{}),l=[];r.version="1.11.8",h.constructor=r,h.kill()._gc=!1,r.killTweensOf=r.killDelayedCallsTo=i.killTweensOf,r.getTweensOf=i.getTweensOf,r.ticker=i.ticker,h.invalidate=function(){return this._yoyo=this.vars.yoyo===!0,this._repeat=this.vars.repeat||0,this._repeatDelay=this.vars.repeatDelay||0,this._uncache(!0),i.prototype.invalidate.call(this)},h.updateTo=function(t,e){var s,r=this.ratio;e&&this._startTime<this._timeline._time&&(this._startTime=this._timeline._time,this._uncache(!1),this._gc?this._enabled(!0,!1):this._timeline.insert(this,this._startTime-this._delay));for(s in t)this.vars[s]=t[s];if(this._initted)if(e)this._initted=!1;else if(this._gc&&this._enabled(!0,!1),this._notifyPluginsOfEnabled&&this._firstPT&&i._onPluginEvent("_onDisable",this),this._time/this._duration>.998){var n=this._time;this.render(0,!0,!1),this._initted=!1,this.render(n,!0,!1)}else if(this._time>0){this._initted=!1,this._init();for(var...