JSFiddle - React, Tailwind, and code Playground

by ilyasnone

HTML

<link rel="stylesheet" href="http://beta.aranca.com/templates/aranca/css/home1.css">
<link rel="stylesheet" href="http://beta.aranca.com/templates/aranca/css/template.css">
<script src="https://raw.github.com/Prinzhorn/skrollr/master/dist/skrollr.mobile.min.js"></script>
<script src="https://raw.github.com/Prinzhorn/skrollr/master/dist/skrollr.ie.min.js"></script>
<script src="https://raw.github.com/Prinzhorn/skrollr/master/dist/skrollr.menu.min.js"></script>
<script src="https://raw.github.com/Prinzhorn/skrollr/master/dist/skrollr.min.js"></script>
<link rel="stylesheet" href="https://raw.github.com/Prinzhorn/skrollr/master/examples/fixed-positioning.css">
<div id="skrollr-body">
    <ul id="nav" style="opacity: 1; left: 3%;">
        <li id="mf11"><a onClick="return false" class="" href="#page-1" id="mfa3">slide-1</a><span>overlay text-1</span></li>
      <li id="mf12"><a onClick="return false" href="#page-2" id="mfa4" class="active">slide-2</a><span id="mf13">overlay text-2</span></li>
      <li id="mf14"><a onClick="return false" href="#page-3" id="mfa5">slide-3</a><span id="mf15">overlay text-3</span></li>
      <li id="mf16"><a onClick="return false" href="#page-4" id="mfa6">slide-4</a><span id="mf17">overlay text-4</span></li>
      <li id="mf18"><a onClick="return false" href="#page-5" id="mfa7">slide--5</a><span id="mf19" style="left: 35px; opacity: 0; display: none;">overlay text-5</span></li>
    </ul>
    <div id="page-1" class="slide one">
      <div class="slide-inner clearfix">
        <div class="slide-one-title">Mouse over the image below to see it flip!</div>
        <ul class="flip">
          <li class="flip-container left" ontouchstart="this.classList.toggle('hover');">
            <div class="flipper"><a href="#">
              <div class="front"><span class="ir-f">&nbsp;</span></div>
              <div class="back"><span class="ir-b">&nbsp;</span></div>
              </a></div>
          </li>
          <li class="flip-container left"...

CSS

/* side navigation */
#nav {
	margin-top: -100px;
	position: fixed;
	left: -50px;
	top: 50%;
	z-index: 9999;
	list-style: none;
}
.no-js #nav {
	left: 3%;
}

#nav li {
	display: block;
	width: 30px;
	height: 40px;
	position: relative;
	text-align: center;
	cursor: pointer;
	
}

#nav li a {
	display: block;
	width: 30px;
	padding-top: 20px;
	position: absolute;
	top: 0;
	left: 0;
	font: 12px/14px 'OswaldBold', Arial, Helvetica, sans-serif;
	color: #45a0bb;
	text-decoration:none;
	background: url(http://www.suicideispreventable.org/wp-content/themes/knowthesign/images/bg-nav-dot.png) center 1px no-repeat;
}
.old-ie #nav li a {
	background-image: url(http://www.suicideispreventable.org/wp-content/themes/knowthesign/images/bg-nav-dot.png);
}

#nav li a.active {
	background-position: center -51px;
	color: #fff;
}

#nav li:hover a {
	color: #fff;
}

#nav.inverse li a {
	color: #92ded6;
}

#nav.inverse li:hover a, #nav.inverse li a.active {
	color: #00525d;
}

#nav li span {
	display: none;
	padding: 5px 8px 5px 12px;
	position: absolute;
	top: -2px;
	left: 40px;
	font: 12px/16px 'OswaldBook', Arial, Helvetica, sans-serif;
	white-space: nowrap;
	color: #fff;
	background: url(http://www.suicideispreventable.org/wp-content/themes/knowthesign/images/bg-nav-tip.png) 0 center no-repeat;
}
.old-ie #nav li span {
	font: 12px/16px Arial, Helvetica, sans-serif;
	background-image: url(http://www.suicideispreventable.org/wp-content/themes/knowthesign/images/bg-nav-tip.gif);
}