JSFiddle - React, Tailwind, and code Playground

by creativevilla

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery.js"></script>
<script src="http://tympanus.net/Tutorials/DraggableImageBoxesGrid/js/jquery.easing.1.3.js"></script>
<script src="http://tympanus.net/Tutorials/DraggableImageBoxesGrid/js/jquery.kinetic.js"></script>
<script src="http://tympanus.net/Tutorials/DraggableImageBoxesGrid/js/jquery.tmpl.min.js"></script>
<link rel="stylesheet" href="//normalize-css.googlecode.com/svn/trunk/normalize.css">
<script src="http://fonts.googleapis.com/css?family=Oswald"></script>
<!DOCTYPE html>
<script id="previewTmpl" type="text/x-jquery-tmpl">
    < div id = "ib-img-preview"
    class = "ib-preview" > < img src = "${src}"
    alt = ""
    class = "ib-preview-img" / > < span class = "ib-preview-descr"
    style = "display:none;" > $ {
        description
    } < /span>
        <div class="ib-nav" style="display:none;">
          <span class="ib-nav-prev">Previous</span > < span class = "ib-nav-next" > Next < /span>
        </div > < span class = "ib-close"
    style = "display:none;" > Close Preview < /span>
        <div class="ib-loading-large" style="display:none;">Loading...</div > < /div>
</script>
<script id="contentTmpl" type="text/x-jquery-tmpl">
    < div id = "ib-content-preview"
    class = "ib-content-preview" > < div class = "ib-teaser"
    style = "display:none;" > {
        {
            html teaser
        }
    } < /div>
        <div class="ib-content-full" style="display:none;">{{html content}}</div > < span class = "ib-close"
    style = "display:none;" > Close Preview < /span>
      </div >
</script>
<body>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://code.jquery.com/jquery.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <div...

CSS

body {
    background: #fff;
    color: #fff;
    font-family:'Oswald', sans-serif;
    font-size: 13px;
    text-transform: uppercase;
    overflow: hidden;
}
a {
    color: #ddd;
    text-decoration: none;
}
.clr {
    clear: both;
}
/* Header Style */
 .header {
    font-family:'Arial Narrow', Arial, sans-serif;
    position: fixed;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 25px;
    line-height: 24px;
    font-size: 11px;
    background: #000;
    opacity: 0.9;
    z-index: 20;
}
.header a {
    padding: 5px 10px;
    letter-spacing: 1px;
    color: #fff;
    text-align: right;
}
.header a:hover {
    color: #ddd;
}
.header a span {
    font-weight: bold;
}
.header span.right_ab {
    position: absolute;
    right: 4px;
}
/* Top Bar */
 .ib-top {
    background: #fff;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    z-index: 10;
    height: 40px;
}
.ib-top h1 {
    color: #333;
    font-size: 20px;
    line-height: 40px;
    padding: 0 10px;
}
.ib-top h1 span {
    color: #555;
    font-size: 12px;
}
.ib-main-wrapper {
    width: 100%;
    overflow: hidden;
    margin-top: 40px;
    outline: none;
    /*height dynamic*/
}
.ib-main {
    position: relative;
    width: 2546px;
}
.ib-main a {
    float: left;
    width: 210px;
    height: 210px;
    position: relative;
    overflow: hidden;
    margin: 0px 0px 2px 2px;
    cursor: move;
    background: #fff url(../images/thumb_bg.jpg) no-repeat center center;
    background-size: 110% 110%;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.ib-main a.ib-loading, .ib-main a.ib-loading:hover {
    background: #fff url(../images/ajax-loader.gif) no-repeat center center;
    background-size: 31px 31px;
}
.ib-main a.ib-loading img, .ib-main a.ib-loading:hover img {
    opacity: 0.5;
}
.ib-main > a.ib-loading > span,...

JavaScript

http: //babybirdcomic.com/wp-content/uploads/2013/11/the-most-talkative-bird-in-the-world.jpg