JSFiddle - React, Tailwind, and code Playground

by kylenoble

HTML

<body>
    <div class="wrapper"></div>
    <div class="docInner">
        <div id="appendee"></div>
    </div>
    <div class="clear"></div>
</body>

CSS

body {
    background-color: #993333;
}
.wrapper {
    height: 150px;
    width: 80%;
    background-color: #993333;
}
.docInner {
    height: 460px;
    width: 560px;
    padding-left: .4%;
    margin-left: 29%;
    background-image: url('http://i.imgur.com/y11XEkZ.png');
    background-repeat: no-repeat;
    position: relative;
    background-color: #993333;
    border-color: white;
    border-left-style: solid;
    border-right-style: solid;
    border-width: 5px;
}
.item {
    height: 5em;
    width: 5em;
    margin: 1em 1em 1em 1em;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    display: inline-block;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    z-index: 0;
    position: relative;
}
.x {
    margin-left: 3%;
    margin-top: 3%;
    width: 5px;
    height: 5px;
    background-image: url("http://i.imgur.com/xfxgBRh.png");
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.i {
    position: relative;
    float: right;
    margin-top: -6.1px;
    margin-right: 1%;
    width: 7px;
    height: 7px;
    background-image: url('http://i.imgur.com/kFH6uLk.png');
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    z-index: 10;
}

/* Hover Effects From http://ianlunn.github.io/Hover/ and modified for this project*/

.glow {
    display: inline-block;
    -webkit-transition: all .6s ease;
    -moz-transition: all .6s ease;
    -o-transition: all .6s ease;
    -ms-transition: all .6s ease;
    transition: all .6s ease;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0);
}
.glow:hover {
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.9);
    -webkit-transform: translateY(-5px);
    -ms-transform: translateY(-5px);
    transform: translateY(-5px);
   ...

JavaScript

var galleryPicture =  {
	"imageUrl": "",
	"infoUrl": ""
};

function Picture(imageUrl, infoUrl) {
	this.imageUrl = imageUrl;
	this.infoUrl = infoUrl;
}

Picture.prototype = galleryPicture;

pic1 = new Picture("http://media.nara.gov/media/images/14/14/14-1336a.gif", "http://arcweb.archives.gov/arc/action/ExternalIdSearch?id=519866&jScript=true");
pic2 = new Picture("http://media.nara.gov/media/images/16/7/16-0651a.gif", "http://bit.ly/1e7zLRA");
pic3 = new Picture("http://upload.wikimedia.org/wikipedia/commons/thumb/8/84/Base_of_Tower_Fall_with_rainbow.JPG/510px-Base_of_Tower_Fall_with_rainbow.JPG", "http://en.wikipedia.org/wiki/Tower_Fall");
pic4 = new Picture("http://upload.wikimedia.org/wikipedia/commons/thumb/2/2b/Uhuru_Peak_Mt._Kilimanjaro_2.JPG/640px-Uhuru_Peak_Mt._Kilimanjaro_2.JPG", "http://en.wikipedia.org/wiki/Mount_Kilimanjaro");
pic5 = new Picture("http://upload.wikimedia.org/wikipedia/commons/thumb/b/bf/Mt._Everest_from_Gokyo_Ri_November_5%2C_2012_Cropped.jpg/640px-Mt._Everest_from_Gokyo_Ri_November_5%2C_2012_Cropped.jpg", "http://en.wikipedia.org/wiki/Mount_Everest");
pic6 = new Picture("http://upload.wikimedia.org/wikipedia/commons/8/85/Amazonie_jt01.png", "http://en.wikipedia.org/wiki/Amazon_river");
pic7 = new Picture("http://upload.wikimedia.org/wikipedia/commons/thumb/0/00/Schönbrunn_Palace%2C_Vienna.JPG/640px-Schönbrunn_Palace%2C_Vienna.JPG", "http://en.wikipedia.org/wiki/Sch%C3%B6nbrunn_Palace");
pic8 = new Picture("http://upload.wikimedia.org/wikipedia/commons/thumb/6/6d/Old_Town_Salzburg_across_the_Salzach_river.jpg/640px-Old_Town_Salzburg_across_the_Salzach_river.jpg", "http://en.wikipedia.org/wiki/Salzburg");
pic9 = new Picture("http://upload.wikimedia.org/wikipedia/commons/thumb/1/1e/153_-_Glacier_Perito_Moreno_-_Grotte_glaciaire_-_Janvier_2010.jpg/640px-153_-_Glacier_Perito_Moreno_-_Grotte_glaciaire_-_Janvier_2010.jpg", "http://en.wikipedia.org/wiki/Perito_Moreno_Glacier");
pic10 = new...