JSFiddle - React, Tailwind, and code Playground

by TimPietrusky

HTML

<div class="CodePen-Slid0r">
 <h1>A CodePen Slid0r Widget using the unoffical CodePen API.</h1>
</div>

CSS

* {
 box-sizing: border-box;
 -webkit-transition: all 1.1s ease-in-out;
}

body {
 background:url(http://codepen.io/images/classy_fabric.png);   
}

a {
 display:block;
    position:relative;
    float:clear;
}

h1 {
  font:4em "HelveticaNeue-CondensedBold", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}

.CodePen-Slid0r {
    padding:0;
    margin:0;
    position:relative;
}

.CodePen-Slid0r .wrapper {
    position:relative;
    width:100%;
    height:0;
    
  visibility:hidden;
  opacity:0;
  overflow:hidden;
    
    padding:0;
    float:left;
    background: rgba(0, 0, 0, 0.25);
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.2);
}

.CodePen-Slid0r .wrapper.show a {
  height:100%;
    width:100%;
}

.CodePen-Slid0r .wrapper.show {
  visibility:visible;
  opacity:1;
  height:650px;
}

.CodePen-Slid0r iframe {
  position:absolute;
  top:0;
  left:0;
  width:0;
  height:0;
  visibility:hidden;
  opacity:0;
  overflow:hidden;
}
.CodePen-Slid0r .wrapper.show iframe {
  visibility:visible;
  opacity:1;
  height:650px;
  width:100%;
  padding:2%;
}

.meta {
  position:absolute;
    z-index:1337;
    bottom:0;
  background:rgba(0,0,0,.9);
  border:10px solid rgba(153, 153, 153, .2);
  border-radius:10px;
  float:left;
  height:110px;
  width:100%;
  bottom:2%;
  left:1%;
  color:#fff;
  font:3em "HelveticaNeue-CondensedBold", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  padding:5px;
}  

.meta img {
    margin-right:10px;
}

JavaScript

$.ajax({
    dataType: 'jsonp',
    jsonp: 'jsonp',
    url: 'http://codepen-awesomepi.timpietrusky.com/picks',
    success: function(data) {
      if (data.content != null) {
        start(data.content.pens);
      }
    }
});

/*
 * Create and show the iframes holding the pens
 */
function start(pens) {
  // Clear 
  $('.CodePen-Slid0r').html('');
    
  // Create iframes
  $.each(pens, function(i, v) {
    var wrapper = $('<div class="wrapper"></div>');
      
    var link = $('<a href=""></a>');
    link.attr('href', this.url.pen);
    
    var iframe = $('<iframe></iframe>');
    iframe.attr('frameborder', 0);
    iframe.attr('scrolling', 'no');
    iframe.attr('allowtransparency', 0);
    iframe.attr('class', 'iframe' + i);
    iframe.attr('src', this.url.full);
      
    // Show first in the line
    if (i == 0) {
      wrapper.attr('class', 'wrapper show');
    }
      
    // meta
    var meta_author = $('<div class="meta"></div>');
    meta_author.html('<img src="'+this.user.gravatar+'">' + this.user.realname);
      
    iframe.appendTo(link);
    meta_author.appendTo(link)
    wrapper.append(link);
      
    wrapper.appendTo('.CodePen-Slid0r');
  });

    setTimeout(function() {
        rotate();
    }, 2000);
  
}
    
function rotate() {
    var iframes = $('.CodePen-Slid0r .wrapper');
    
    setInterval(function() {
        $.each(iframes, function(i, v) {
            iframes[i] = $(iframes[i]);
            
            if (iframes[i].hasClass('show')) {
               iframes[i].removeClass('show');
                
               if (iframes[i+1] != undefined) {
                 $(iframes[i+1]).addClass('show'); 
               } else {
                 iframes[0].addClass('show');
               }
                
               return false;
            }
        });
    }, 3500);
}