JSFiddle - React, Tailwind, and code Playground

by Rania Krourou

HTML

<head>
  </head>

  <body>
    <h1>Photography</h1>

  </body>

</html>

<head>

  <body>

   <div id="slideshow">
      <div id="slideshow-wrapper">
        <img src="https://preview.ibb.co/nnmqtU/IMG_4342.jpg" alt="" />
        <img src="https://preview.ibb.co/cURUnp/IMG_4345.jpg" alt="" />
        <img src="https://preview.ibb.co/cVS8f9/IMG_4343.jpg" alt="" />
        <img src="https://preview.ibb.co/c6rC7p/IMG_4346.jpg" alt="" />
        <img src="https://preview.ibb.co/ccEbYU/IMG_4347.jpg" alt="" />
      </div>
      <div id="slideshow-nav"></div>
    </div>

<embed src="https://s17.aconvert.com/convert/p3r68-cdx67/ed5g4-9gaci.gif" allowfullscreen="true" width="305" height="224">

<embed src="https://s17.aconvert.com/convert/p3r68-cdx67/p0w3s-lj1it.gif" allowfullscreen="true" width="305" height="224">

CSS

.leftbar {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 170px;
    background: #c0c0c0;
    padding: 15px;
    
    overflow-y: scroll;
}

.content {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 200px;
    right: 30px;
    
    -webkit-transition: 1s;
}

.panel {
    position: absolute;
    top: 0;
    width: 100%;
    margin-top: 0px;
    bottom: 0px;
    padding: 15px;
    -webkit-transition-duration: 0.5s;
    -webkit-transform-origin: 50px -300px;
    
    left: 100px;
    opacity: 0;
}

.default {
    left: 0;
    opacity: 1;
}

.panel:target ~ .default {
    left: 100px;
    opacity: 0;
}

.panel:target{
    left: 0;
    opacity: 1;
}

.link {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.menuitem {
    position: relative;
    background: #a0a0a0;
    padding: 5px;
}
.menuitem:not(:last-child) { 
    margin-bottom: 5px;
}

p {
    font-size: 1.4em;
    margin: 0;
    margin-bottom: 10px;
    text-align: center;
}

JavaScript

$(document).ready(function(){
    var username = 'jcolicchio';
    var url = 'http://jsfiddle.net/api/user/'+username+
        '/demo/list.json?callback=?&start=0&limit=50';
    color = ["#ffcccc","#ffddcc","#ffffcc","#ccffcc","#ccccff","#ffccff"];
    $.getJSON(url, function(data){
        var box = $('#post');
        var list = data.list;
        var title, description, author, created, framework, url, version, latest_version;
        var item;
        for(i=0;i<list.length;i++) {
            item = list[i];
            author = item.author;
            created = item.created;
            description = item.description;
            framework = item.framework;
            latest_version = item.latest_version;
            title = item.title;
            url = item.url;
            version = item.version;
            $('.leftbar').append("<div class='menuitem'>"+
                             "<a href='#panel"+(i+1)+"'>"+
                             "<span class='link'></span></a>"+
                             title+"</div>");
            $('.content').append("<div class='panel' style='background-color: "+
                             color[i % color.length]+"' id='panel"+(i+1)+"'><p>"+title+"</p>"+description+"<a href='"+url+latest_version+"/'><span class='link'></span></a></div>");
        }
        
        $('.panel')
        .first()
        .insertAfter($('.panel').last())
        .addClass("default");
    });
});