JSFiddle - React, Tailwind, and code Playground

by jklm313

HTML

<script src="https://dl.dropbox.com/u/32750720/works/common%20resources/prefixfree.min.js"></script>
<div class="wrapper">
    <a href="#one" class="btn active">One</a>
    <a href="#two" class="btn">Two</a>
    <a href="#three" class="btn">Three</a>
    <a href="#four" class="btn">Four</a>
    <a href="#five" class="btn">Five</a>
      
      <hr/>
  
      <div class="slides">
      
          <div class="sld" id="#one">
              <img src="http://lorempixel.com/500/240/animals" alt="" />                    
          </div>
      
          <div class="sld" id="#two">
              <img src="http://lorempixel.com/500/240/city" alt="" />              
          </div>
      
          <div class="sld" id="#three">
              <img src="http://lorempixel.com/500/240/city/1" alt="" />  
          </div>
      
          <div class="sld" id="#four">
              <img src="http://lorempixel.com/500/240/nature" alt="" />  
          </div>
      
          <div class="sld" id="#five">
              <img src="http://lorempixel.com/500/240/people" alt="" />  
          </div>
  </div>
</div>

CSS

*, *:before, *:after {margin: 0; padding: 0; box-sizing: border-box; position: relative;}

body {
  font-family: sans-serif;
    }

.wrapper {
    width: 500px;
    height: 300px;
  margin: 0 auto;
  box-shadow: 0 0 25px #222;
  margin-top: 5%;
  overflow: hidden;
    }

    .btn {
        width: 20%;
      float: left;
      line-height: 60px;
      text-decoration: none;
      color: inherit;
      text-align: center;
        }
        .active {
            font-weight: bold;
             background: #ccc;
            }

hr {
    display: block;
  height: 0;
  clear: both;
  border: none;
    }

.slides {
    width: auto;
  height: 100%;
  overflow: hidden;
    }
  .sld {
    width: 100%;
    height: 100%;
    line-height: 240px;
    text-align: center;
    transition: margin .3s;
    font-weight: bold;
    }
    .sld:first-of-type {
    background: indianred;
    }
    .slides .sld:nth-of-type(2) {
    background: skyblue;
    }
    .slides .sld:nth-of-type(3) {
    background: yellow;
    }
    .slides .sld:nth-of-type(4) {
    background: dodgerblue;
    }
    .slides .sld:nth-of-type(5) {
    background: lightgreen;
    }

.btn.active ~ .slides .sld:first-of-type {
  margin-top: 0;
    }
.btn:nth-of-type(2).active ~ .slides .sld:first-of-type {
  margin-top: -300px;    
    }
.btn:nth-of-type(3).active ~ .slides .sld:first-of-type {
  margin-top: -600px;
    }
.btn:nth-of-type(4).active ~ .slides .sld:first-of-type {
  margin-top: -900px;
    }
.btn:nth-of-type(5).active ~ .slides .sld:first-of-type {
  margin-top: -1200px;
    }

JavaScript

$('.btn').click(function() {
    $('.active').removeClass('active');
    $(this).addClass("active");
});