JSFiddle - React, Tailwind, and code Playground

by TimPietrusky

HTML

<div class="CodePen-Slid0r">
<iframe frameborder="0" scrolling="no" allowtransparency="0" class="iframe4 show" src="http://codepen.io/socialblogsite/fullgrid/pure_css_semantic_yet_seo_friendly_rating_stars/1"></iframe>

<iframe frameborder="0" scrolling="no" allowtransparency="0" class="iframe0" src="http://codepen.io/TimPietrusky/fullgrid/visual-vomit/22"></iframe>
</div>

CSS

* {
 box-sizing: border-box;  
}

.CodePen-Slid0r {
    padding:10px;
}

.CodePen-Slid0r iframe {
  border:2px solid #000;
  width:100%;
  height:250px;
    
  transition: opacity 0.3s ease;
  visibilty:hidden;
  opacity:0;
  overflow:hidden;
}
.CodePen-Slid0r iframe.show {
  visibilty:show;
  opacity:1;
}

JavaScript

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

var iframes = $('.CodePen-Slid0r iframe');
console.log(iframes);
/*setInterval(function() {
    console.log("test");
    $.each(iframes, function(i, v) {
        if (iframes[i].hasClass('show')) {
           iframes[i].removeClass('show');
            
           if (iframes[i+1] != undefined) {
             iframes[i+1].addClass('show'); 
           } else {
             iframes[0].addClass('show');
           }
        }
    });
}, 500);*/

/*
 * Create and show the iframes holding the pens
 */
function start(pens) {
  // Create iframes
  $.each(pens, function(i, v) {
      
    /*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.fullgrid);*/
    
    // Need to do this otherwise the frames are added twice
    // A CodePen bug or a bug in my head?
    /*if ($('.iframe' + i).length == 0) {
      iframe.appendTo('#pens');
      
      if (i != 0 && i % 4 == 0) {
        iframe_wrap.after('<div class="cf"></div>');
      }
    }*/
  });