JSFiddle - React, Tailwind, and code Playground

by doobada

HTML

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>Great Photography | Photo Galleries & Competitions | Candied Faces&#8482; </title>
        <meta name="description" content="Check out the best published photography from around the World in our online gallery at www.CandiedFaces.com and enter into photo competitions to see if your photographic skills have what it takes to rival great photographers. Push the limits.">
        <meta name="viewport" content="initial-scale=1.0">

        <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/mainBoiler.css" media="screen, handheld">
        <link rel="stylesheet" href="css/enhanced.css" media="screen and (min-width: 40.5em)">
        <script src="js/vendor/modernizr-2.6.1.min.js"></script>
    </head>
    
<body id="home">
        <!--[if lt IE 7]>
            <p class="chromeframe">You are using an outdated browser. <a href="http://browsehappy.com/">Upgrade your browser today</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to better experience this site.</p>
        <![endif]-->

<div id="wrap">
        
    <header role="banner" class="banner">
       
        <div class="masthead">
            
            <div class="logo">
            <h1 class="small-logo"><a href="#" rel="home"><img src="images/CandiedFaces.png" alt="Candied Faces Photography"/></a></h1>
            </div>
            
            <div id="nav-anchors" class="nav-anchors">
                <button type="button" class="btn...

CSS

/*
 * HTML5 Boilerplate
 *
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */
/* ============================================================
    Reset
============================================================ */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
    color:#787975;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
    display:block;
}


/* ============================================================
    Sections
============================================================ */
body {
    color:#000;
    font:100%/1.5 Cambria, Georgia, serif; /* 16px */
   -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
    background:#000;
    margin:0 auto;
    padding: 0em 0%; /* Temporary */
    text-shadow: 0 1px 1px #fff;
}

nav ul {
    list-style:none;
}

.content-main h1 {
    border-bottom: 1px solid #c5c5c5;

}

h1 {
    color:#2c1c16;
    font:bold 1.75em/1.1429 'Proxima Nova Bold',sans-serif; /* 28px/32px */
    margin:0em 0 0; /* 0 0 0 */
}
h2 {
    color:#787975;
    font:bold 1.0625em/1.2 'Proxima Nova Bold',sans-serif; /* 20px/24px */
   ...

JavaScript

var slideshow = [];
var curr_img = 0;
var tot_elements = 0;
var slideshow_cycled = 0;

function load_images_to_set(){
    var curr_num = 0;
    var img_url = jQuery.bbq.getState('image');
    $('#ss_images_set li').each(function(){
        var curr_dom = $(this);
        var curr_obj = {
            "img_url":curr_dom.find("img").attr("link"),
            "img_caption":curr_dom.find("p.img_caption").text(),
            "img_author":curr_dom.find("p.img_author").text(),
            "img_href":curr_dom.find("p.img_href").text(),
            "img_hashtag":curr_dom.find("p.img_hashtag").text(),
            "preloaded":1
        };
        if(img_url == curr_obj["img_hashtag"]){
            curr_img = curr_num;
        }
        slideshow[curr_num]=curr_obj;
        $('#real_display').append('<li id="rimg_id_'+curr_num+'">'+
                                    '<img id="crimg_id_'+curr_num+'" src="" link="'+curr_obj["img_url"]+'" />'+
                                    '</li>');
        curr_num++;
    });
    tot_elements = curr_num;
    push_hash();
}

function push_hash(){
    jQuery.bbq.pushState('image='+slideshow[curr_img]["img_hashtag"],0);
}

function take_prev_img(){
    curr_img--;
    if(curr_img<0)
        curr_img = (tot_elements-1);
    push_hash();
}

function take_next_img(){
    curr_img++;
    if(tot_elements==curr_img){
        curr_img = 0;
        slideshow_cycled = 1;
    }
    push_hash();
}

function show_img(img_num){
    if(slideshow_cycled == 0){
        if(curr_img == 0 && $('#left_arrow').is(':visible') == true){
            $('#left_arrow').hide();
        }else if(curr_img > 0 && $('#left_arrow').is(':visible') == false){
            $('#left_arrow').show();
        }
    }

    var curr_obj = slideshow[img_num];
    var height = $('#real_display').height();
    
    $('#real_display').height(800);
    
    $('#real_display li:visible').hide(0); 
    
    var customURL = window.location.href;

    $('#info_box').remove();

   ...