JSFiddle - React, Tailwind, and code Playground

by Timatnet

HTML

<!--<img src="https://dl.dropboxusercontent.com/u/38317632/rainbow.JPG" width=1600/>-->
<footer>
    <div class="rainbow">
        <div class="red first"><a href="#">О компании</a></div>
        <div class="red second"></div>
    </div>
    <div class="rainbow">
        <div class="orange first"><a href="#">Каталог продукции</a></div>
        <div class="orange second"></div>
    </div>
    <div class="rainbow">
        <div class="yellow first"><a href="#">Партнеры</a></div>
        <div class="yellow second"></div>
    </div>
    <div class="rainbow">
        <div class="green first"><a href="#">Галерея</a></div>
        <div class="green second"></div>
    </div>
    <div class="rainbow">
        <div class="blue first"><a href="#">Контакты</a></div>
        <div class="blue second"></div>
    </div>
</footer>
<!--
<div class="downMenu fleft"><ul class="menu"><li class="expanded first"><a href="/" title="">О компании</a><ul class="menu"><li class="leaf first"><a href="/patents" title="">Патенты и награды</a></li>
<li class="leaf"><a href="/certificates" title="">Сертификаты</a></li>
<li class="leaf"><a href="/peoples" title="">Наша команда</a></li>
<li class="leaf last"><a href="/articles" title="">Статьи</a></li>
</ul></li>
<li class="leaf"><a href="/" title="">Каталог продукции</a></li>
<li class="leaf"><a href="/partners" title="">Партнеры</a></li>
<li class="expanded active-trail"><a href="/" title="">Галерея</a><ul class="menu"><li class="leaf first"><a href="/photo" title="">Фото</a></li>
<li class="leaf last active-trail"><a href="/video" title="" class="active">Видео</a></li>
</ul></li>
<li class="leaf last"><a href="/contacts" title="">Контакты</a></li>
</ul></div>-->

CSS

body {
    font-family: myriad, verdana;
    font-size: 16px;
}

footer {
    position: fixed;
    bottom: 0;
    width: 100%;
}

.rainbow {
    height: 10px;
    opacity: 0.75;
    width: 100%;
}
.first, .second {
    width: 50%;
    height: 100%;
    float: left;
    padding-bottom: 12px;
}
.first {
    /*opacity: 0.75;    */
}
.first a {
    margin-left: 55%;
    color: #000;
}

.second {
    opacity: 0.4;
}

.red { background: red; }
.orange { background: orange; }
.yellow { background: yellow; }
.green { background: green; }
.blue { background: blue; }
/*
.red.second {
    
    transform: skew(0deg,-3deg);
    -ms-transform: skew(0deg,-3deg);
    -webkit-transform: skew(0deg,-3deg);
    height: 22px;
    margin-top: -12px;
}
.orange.second {
    
    transform: skew(0deg,-1deg);
    -ms-transform: skew(0deg,-1deg);
    -webkit-transform: skew(0deg,-1deg);
    height: 22px;
    margin-top: -12px;
}
.yellow.second {
    height: 22px;
    margin-top: -12px;
}*/

JavaScript

/*// Creates canvas 320 × 200 at 10, 50
var paper = Raphael(10, 50, 320, 200);

// Creates circle at x = 50, y = 40, with radius 10
var circle = paper.circle(50, 40, 10);
 // Sets the fill attribute of the circle to red (#f00) 
circle.attr("fill",  "#f00" );

// Sets the stroke attribute of the circle to white
circle.attr("stroke",  "#fff" );*/