JSFiddle - React, Tailwind, and code Playground

by adamschwartz

CSS

</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://github.hubspot.com/vex/js/vex.js"></script>
<script src="http://github.hubspot.com/vex/js/vex.dialog.js"></script>
<link href="http://github.hubspot.com/vex/css/vex.css" rel="stylesheet" />
<link href="http://github.hubspot.com/vex/css/vex-theme-plain.css" rel="stylesheet" />
<style>
body {
    font-family: "Helvetica Neue", sans-serif;
}

.vex {
    padding-top: 100px;
    text-align: center;
}

.vex-content {
    position: relative;
    display: inline-block;
}

.vex-close {
    display: none
}

.vex-content img {
    max-width: 100%;
}

JavaScript

vex.defaultOptions.showCloseButton = false;

var current = 0;

var images = ['https://www.google.com/logos/doodles/2013/celia-cruzs-88th-birthday-5720827718795264-hp.jpg', 'https://www.google.com/images/srpr/logo4w.png'];

var $vexContent = vex.open().append('<img />');

var update = function() {
    $vexContent.find('img').attr('src', images[current]);
    current = (current + 1) % images.length;
}

setInterval(function(){
    update();
}, 2000);

update();