JSFiddle - React, Tailwind, and code Playground

by gregguida

HTML

<html>
    <head></head>
    <body>
    </body>
</html>

CSS

#prev-button, #next-button{
    float:left;
    height:10px;
    padding:5px 0;
    text-align:center;
    width:138px;
    border:1px solid #ccc;
    box-shadow:0 0 5px #eee inset,0 0 10px #eee inset,0 0 15px #eee inset;
}
#prev-button:hover, #next-button:hover{
    background-color:#d2d2d2;
    border-color:#808080;
    cursor:pointer;
}

#prev-button span {
    display:block;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-right: 10px solid #4c4c4c;
    border-bottom: 5px solid transparent;
    margin:0 auto;
}
    
#next-button span {
    display:block;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-left: 10px solid #4c4c4c;
    border-bottom: 5px solid transparent;
    margin:0 auto;
}

#image-selector { 
    background-color:#eeeeee; 
    width:280px;
    padding:5px;
    border:1px solid #ccc;
}

#images{
    height:150px;
    width:280px;
}

JavaScript

var images = ["http://www.google.com/logos/2011/great_migration-2011-hp.jpg",
              "http://www.google.com/logos/2011/switzerland_national_day-11-hp.jpg",
              "http://www.google.com/logos/2011/vasari-2011-hp.jpg",
              "http://www.google.com/logos/2011/medellin11-hp.jpg",
              "http://www.google.com/logos/2011/independenceday-peru11-hp.jpg",
              "http://www.google.com/logos/2011/granados11-hp.jpg",
              "http://www.google.com/logos/2011/aljawahiri11-hp.jpg",
              "http://www.google.com/logos/2011/picchu11-hp.jpg",
              "http://www.google.com/logos/2011/amaliarodrigues11-hp.jpg",
              "http://www.google.com/logos/2011/calder11.png",
              "http://www.google.com/logos/2011/gregormendel11-hp.jpg",
              "http://www.google.com/logos/2011/colombia-independenceday11-hp.jpg",
              "http://www.google.com/logos/2011/xu_beihong11-hp.jpg",
              "http://www.google.com/logos/2011/marineday11-hp.png",
              "http://www.google.com/logos/2011/bastilleday11-hp.jpg",
              "http://www.google.com/logos/2011/scott11-hp.jpg",
              "http://www.google.com/logos/2011/stbasilscathedral11-hp.jpg",
              "http://www.google.com/logos/2011/independenceday-argentina11-hp.jpg",
              "http://www.google.com/logos/2011/jeandelafontaine11-hp.jpg",
              "http://www.google.com/logos/2011/krleza11-hp.jpg",
              "http://www.google.com/logos/2011/independencedayvenezuela11-hp.jpg",
              "http://www.google.com/logos/2011/fourth_of_july11-hp.jpg",
              "http://www.google.com/logos/2011/pedropaulet11-hp.jpg",
              "http://www.google.com/logos/2011/poland_d4g-hp.jpg",
              "http://www.google.com/logos/2011/mackellar11-hp.jpg",
              "http://www.google.com/logos/2011/maritimefestival11-hp.jpg",
              "http://www.google.com/images/art.gif"];

(function ( imageSources ){
    var images...