JSFiddle - React, Tailwind, and code Playground

by Fransiskus Fallo

HTML

<style type="text/css">

ul.topUL {padding:0; margin:0; list-style:none; width:250px; margin:0 auto; position:relative; z-index:100; font-family:verdana, arial, sans-serif;}

ul.topUL > li {float:left; margin-right:1px; position:relative; z-index:10;}

ul.topUL > li a.p1 {display:block; width:43px; border:2px solid #333; border-width:1px 3px; height:248px; color:#fff; top:0; left:0; text-decoration:none; position:relative;

-o-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);

-moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);

-webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);

box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);

-webkit-transition: 0.25s;

-moz-transition: 0.25s;

-o-transition: 0.25s;

transition: 0.25s;

}

ul.topUL > li > a span {display:block; width:43px; white-space:nowrap; position:absolute; left:0px; top:200px;

-webkit-transform: rotate(-90deg);

-moz-transform: rotate(-90deg);

-o-transform: rotate(-90deg);

transform: rotate(-90deg);

}

ul.topUL > li.b1 > a {background:#562; border-color:#340;

background: -moz-linear-gradient(0, #562, #784 50%, #562 100%);

background: -webkit-gradient(linear, 0 0, 100% 0, from(#562), color-stop(50%, #784), color-stop(100%, #562));

}

ul.topUL > li.b2 > a {background:#366; border-color:#144;

background: -moz-linear-gradient(0, #366, #688 50%, #366 100%);

background: -webkit-gradient(linear, 0 0, 100% 0, from(#366), color-stop(50%, #688), color-stop(100%, #366));

}

ul.topUL > li.b3 > a {background:#246; border-color:#024;

background: -moz-linear-gradient(0, #246, #579 50%, #246 100%);

background: -webkit-gradient(linear, 0 0, 100% 0, from(#246), color-stop(50%, #579), color-stop(100%, #246));

}

ul.topUL > li.b4 > a {background:#741; border-color:#520;

background: -moz-linear-gradient(0, #741, #a74 50%, #741 100%);

background: -webkit-gradient(linear, 0 0, 100% 0, from(#741), color-stop(50%, #a74), color-stop(100%, #741));

}

ul.topUL > li.b5 > a {background:#623; border-color:#401;

background:...