JSFiddle - React, Tailwind, and code Playground

by cahnory

HTML

<div id="window">
    <div class="slider" id="slider-1">
            <div class="slide" id="slide1">
        <div class="slide-head">Page 1</div>
        <div class="slide-content">
          slide 1        </div>
        <a class="slide-link" href="#slide1">1</a>
      </div>
            <div class="slide" id="slide2">
        <div class="slide-head">Page 2</div>
        <div class="slide-content">
          slide 2        </div>
        <a class="slide-link" href="#slide2">2</a>
      </div>
            <div class="slide" id="slide3">
        <div class="slide-head">Page 3</div>
        <div class="slide-content">
          slide 3        </div>
        <a class="slide-link" href="#slide3">3</a>
      </div>
            <div class="slide" id="slide4">
        <div class="slide-head">Page 4</div>
        <div class="slide-content">
          slide 4        </div>
        <a class="slide-link" href="#slide4">4</a>
      </div>
            <div class="slide" id="slide5">
        <div class="slide-head">Page 5</div>
        <div class="slide-content">
          slide 5        </div>
        <a class="slide-link" href="#slide5">5</a>
      </div>
            <a class="slider-open" href="#slider-1">open</a>
      <a class="slider-close" href="#">close</a>
    </div><!-- .slider -->
    <div id="body">
      Some content
    </div>
  </div><!-- #window -->

CSS

html, body {
  background: #000;
  color: #CCC;
  font: 13px/1.4em Arial, sans-serif;
  overflow: hidden;
}
/*
#window {
  margin: 64px auto;
  overflow: visible;
  position: relative;
  height: 640px;
  width: 480px;
}*/
.slide-content {
  background: #FFF;
  color: #666;
  padding: 8px;
}
.slide-head,
.slide-link,
.slider-open,
.slider-close {
  display: none;
}

@media only screen and (max-width: 768px) {
  .slide {
    background: #0B3845;
    left: -100%;
    height: 100%;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 2;
  }
  .slide-head {
    background: #EEE;
    border-bottom: 1px solid #DDD;
    color: #333;
    display: block;
    font-weight: bold;
    padding: 0 96px;
    height: 48px;
    line-height: 48px;
    text-align: center;
  }
  .slide-link,
  .slider-open,
  .slider-close {
    background: #EEE;
    color: #666;
    display: block;
    height: 48px;
    left: 0;
    line-height: 48px;
    width: 48px;
    position: absolute;
    text-align: center;
    text-decoration: none;
    top: 0;
  }
  .slider-close {
    z-index: 4;
  }
  .slider-open {
    width: 100%;
    z-index: 5;
  }
  .slider:target .slider-open,
  .slide:target ~ .slider-open {
    display: none;
  }
  .slide-link {
    left: 100%;
    margin-left: 48px;
  }
  .slider:target .slide,
  .slide:target + .slide {
    left: 100%;
  }
  .slider:target .slide:first-child,
  .slide:target {
    left: 0;
    z-index: 1;
  }
  .slider:target .slide:first-child .slide-link,
  .slide:target .slide-link,
  .slide:target ~ .slide .slide-link {
    left: -48px;
  }
  .slider:target .slide:first-child + .slide .slide-link,
  .slide:target + .slide .slide-link {
    left: auto;
    right: 100%;
  }
  
  #body {
    margin-top: 48px;
  }
}

JavaScript

// jsFiddle limitation workaround
jQuery(function($) {
    $('head').append('<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />');
});