JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css">
<script src="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/font/FontAwesome.otf"></script>
<script src="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/font/fontawesome-webfont.eot"></script>
<script src="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/font/fontawesome-webfont.svg"></script>
<script src="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/font/fontawesome-webfont.ttf"></script>
<script src="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/font/fontawesome-webfont.woff"></script>
<script src="http://lokeshdhakar.com/projects/lightbox2/js/lightbox-2.6.min.js"></script>
<i class="icon-camera-retro icon-4x"></i>
<div class="image-set">
				<a class="example-image-link" href="http://lokeshdhakar.com/projects/lightbox2/img/demopage/image-3.jpg" data-lightbox="example-set" title="Click on the right side of the image to move forward."><img src="http://lokeshdhakar.com/projects/lightbox2/img/demopage/thumb-3.jpg" alt="Plants: image 1 0f 4 thumb" width="150" height="150"/></a>
				<a class="example-image-link" href="http://lokeshdhakar.com/projects/lightbox2/img/demopage/image-4.jpg" data-lightbox="example-set" title="Or press the right arrow on your keyboard."><img  src="http://lokeshdhakar.com/projects/lightbox2/img/demopage/thumb-4.jpg" alt="Plants: image 2 0f 4 thumb" width="150" height="150"/></a>
				<a class="example-image-link" href="http://lokeshdhakar.com/projects/lightbox2/img/demopage/image-5.jpg" data-lightbox="example-set" title="The script preloads the next image in the set as you're viewing."><img src="http://lokeshdhakar.com/projects/lightbox2/img/demopage/thumb-5.jpg" alt="Plants: image 3 0f 4 thumb" width="150" height="150"/></a>
				<a class="example-image-link" href="http://lokeshdhakar.com/projects/lightbox2/img/demopage/image-6.jpg" data-lightbox="example-set" title="Click anywhere outside the image or the X to the right...

CSS

/* line 7, ../sass/lightbox.sass */
body:after {
  content: url(../img/close.png) url(../img/loading.gif) url(../img/prev.png) url(../img/next.png);
  display: none;
}

/* line 11, ../sass/lightbox.sass */
.lightboxOverlay {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  background-color: black;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
  opacity: 0.8;
  display: none;
}

/* line 20, ../sass/lightbox.sass */
.lightbox {
  position: absolute;
  left: 0;
  width: 100%;
  z-index: 10000;
  text-align: center;
  line-height: 0;
  font-weight: normal;
}
/* line 28, ../sass/lightbox.sass */
.lightbox .lb-image {
  display: block;
  height: auto;
  max-width: inherit;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
}
/* line 33, ../sass/lightbox.sass */
.lightbox a img {
  border: none;
}

/* line 36, ../sass/lightbox.sass */
.lb-outerContainer {
  position: relative;
  background-color: white;
  *zoom: 1;
  width: 250px;
  height: 250px;
  margin: 0 auto;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
}
/* line 38, ../../../../.rvm/gems/ruby-1.9.3-p392/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/utilities/general/_clearfix.scss */
.lb-outerContainer:after {
  content: "";
  display: table;
  clear: both;
}

/* line 45, ../sass/lightbox.sass */
.lb-container {
  padding: 4px;
}

/* line 48, ../sass/lightbox.sass */
.lb-loader {
  position: absolute;
  top: 43%;
  left: 0%;
  height: 25%;
  width: 100%;
  text-align: center;
  line-height: 0;
}

/* line 57, ../sass/lightbox.sass */
.lb-cancel {
  display: block;
  width: 32px;
  height: 32px;
  margin: 0 auto;
  background: url(../img/loading.gif) no-repeat;
}

/* line 64, ../sass/lightbox.sass */
.lb-nav {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 10;
}

/* line 72,...