JSFiddle - React, Tailwind, and code Playground

by gregir

HTML

<div id="frame">
        <div id="content">
            <div id="home" class="screen">
                <img src="http://dummyimage.com/266x275/000/fff.png" width="266" height="275" alt=""/>
            </div>
            <div id="phone" class="screen">
                <a href="#"><img src="http://dummyimage.com/266x275/999/fff.png" width="266" height="275" alt=""/></a>
            </div>
            <div id="email" class="screen">
                <a href="#"><img src="http://dummyimage.com/266x275/666/fff.png" width="266" height="275" alt=""/></a>
            </div>
            <div id="map" class="screen">
                <a href="#"><img src="http://dummyimage.com/266x275/444/fff.png" width="266" height="275" alt=" "/></a>
            </div>
            <div id="heart" class="screen">
                <div id="slider">
                    <ul>
                        <li><div>1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div></li>
                        <li><div>2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div></li>
                        <li><div>3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div></li>
                        <li><div>4. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div></li>
                        <li><div>5. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div></li>
                    </ul>
                </div>
                  <div id="sliderNav">
                    <span id='position'><em class='on'>&bull;</em><em>&bull;</em><em>&bull;</em><em>&bull;</em><em>&bull;</em></span>
                </div>
            </div>
        </div>
 ...

CSS

/*CSS Reset*/
body, div, dl, dt, dd, li, pre,
form, fieldset, input, textarea, p, blockquote, th, td, button { margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; font-size: 100%; font-weight: normal; }
address, caption, cite, code, dfn, em, strong, var { font-style: normal; font-weight: normal; }
ol, ul { list-style: none; margin: 0; padding: 0; }
table { border-collapse: collapse; border-spacing: 0; } 
caption, th { text-align: left; font-weight: normal; font-style: normal; }
acronym, abbr, fieldset, img { border: 0;}
:focus { outline: 0; }

html,
body {
    width: 100%;
    height: 100%;
    background-color: #333;
    color: #fff;
    font: 22px Verdana, Arial, sans-serif;
}

a, a: hover, a: active {text-decoration: none;}

#frame {
    width: 266px;
    height: 344px; 
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -172px 0 0 -133px;
}

#frame #content {
    height: 287px;
    background-color: #626325;
    white-space: nowrap;
}

#frame #content .screen {
    width: 266px;
    height: 287px;
    position: absolute;
    top: 0px;
    left: 0px;
    white-space: normal;
}

#frame #nav {
    width: 266px;
    height: 57px;
}

#frame #nav div {
    height: 57px;
    float: left;
    overflow: hidden;
    width:66px;
}

#slider {
    height: 231px;
}

#slider li div {
    height: 231px;
}

#sliderNav {
    width: 266px;
    height: 56px;
    position: relative;
}

#position {
    text-align:center;
    font-size:33px;
    line-height:56px;
    color:#fff;
    display:block;
    position:absolute;
    top:0;
    left:50%;
    margin-left:-75px;
    width:150px;
}
#position em {
    display:inline-block;
    padding:0 5px;
    font-style:normal;
    font-family:sans-serif;
}
#position em.on {
    color:#ff00cc;
}

JavaScript

$(document).ready(function(){
    $('div#frame div#content div.screen').hide();
    $('div#frame div#content div#home').show();
      $('div#frame div#nav div').click(function(){
         $('div#frame div#content div.screen').hide();
         $('div#frame div#nav div').removeClass('selected');
         $(this).addClass('selected');
         var index = $('div#frame div#nav div').index($(this));
         index = index+2;
         $('div#frame div#content div.screen:nth-child('+(index)+')').show();
     });
     
     bullets = document.getElementById('position').getElementsByTagName('em');
     var slider = new Swipe(document.getElementById('slider'), {callback: function(e, pos) {
        var i = bullets.length;
        while (i--) {
            bullets[i].className = ' ';
        }
        bullets[pos].className = 'on';
      }
    });
    
});

/*
 * Swipe 1.0
 *
 * Brad Birdsall, Prime
 * Copyright 2011, Licensed GPL & MIT
 *
*/
window.Swipe=function(a,b){if(!a)return null;var c=this;this.options=b||{},this.index=this.options.startSlide||0,this.speed=this.options.speed||300,this.callback=this.options.callback||function(){},this.delay=this.options.auto||0,this.container=a,this.element=this.container.children[0],this.container.style.overflow="hidden",this.element.style.listStyle="none",this.setup(),this.begin(),this.element.addEventListener&&(this.element.addEventListener("touchstart",this,!1),this.element.addEventListener("touchmove",this,!1),this.element.addEventListener("touchend",this,!1),this.element.addEventListener("webkitTransitionEnd",this,!1),this.element.addEventListener("msTransitionEnd",this,!1),this.element.addEventListener("oTransitionEnd",this,!1),this.element.addEventListener("transitionend",this,!1),window.addEventListener("resize",this,!1))},Swipe.prototype={setup:function(){this.slides=this.element.children,this.length=this.slides.length;if(this.length<2)return null;this.width=this.container.getBoundingClientRect().width;if(!this.width)return...