JSFiddle - React, Tailwind, and code Playground

by Nick Hulea

HTML

<link rel="stylesheet" href="http://stage.nhm.org/nature/sites/all/themes/nature_mobile/css/global.css">
<script src="http://stage.nhm.org/nature/sites/all/themes/nature/js/fastclick.js"></script>
<!--pictures-->
<section id="sectionFour" style="display:block;">
    <div class="scavenger">
        <div class="columnControl">
            <!--Question-->
            <div id="question" class="row">
                 <h2>Scavenger Hunt</h2>

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eleifend in mi id sollicitudin. Sed molestie sodales ligula vulputate suscipit ?</p>
                <div class="wholeimg a 1">
                    <img src="http://stage.nhm.org/nature/sites/all/themes/nature/img/nature_hunt/hummingbird_1.jpg" alt="3" />
                    <input type="checkbox" style="display:none;" id="a" name="a" value="a" />
                </div>
                <!-- End .half -->
                <div class="wholeimg a 2">
                    <img src="http://stage.nhm.org/nature/sites/all/themes/nature/img/nature_hunt/bat_1.jpg" alt="2" />
                    <input type="checkbox" style="display:none;" id="b" name="b" value="b" />
                </div>
                <!-- End .half -->
                <div class="wholeimg a 3">
                    <img src="http://stage.nhm.org/nature/sites/all/themes/nature/img/nature_hunt/carpenter-bee.jpg" alt="1" />
                    <input type="checkbox" style="display:none;" id="c" name="c" value="c" />
                </div>
                <!-- End .half -->
                <div class="wholeimg a 4">
                    <img src="http://stage.nhm.org/nature/sites/all/themes/nature/img/nature_hunt/cactus_1.jpg" alt="2" />
                    <input type="checkbox" style="display:none;" id="d" name="d" value="a" />
                </div>
                <div class="wholeimg a 5">
                    <img...

CSS

/* scavenger css styles */
      .scavenger {
          margin-bottom:10%;
      }
      .scavenger .blockbutton {
          margin-top:8%;
      }
      .scavenger .half {
          padding: 3px;
          float: right;
          margin: 2px;
      }
      .scavenger .whole {
          padding:5px;
          margin: 5px;
      }
      .scavenger .wholeimg {
          float: left;
          width: 45%;
          margin:2.5%;
      }
      .scavenger .quad {
          float: left;
          margin:10px 37px 10px 38px;
          padding:1%;
      }
      .scavenger .mobilequad {
          margin: 10px 0px 10px 20px;
      }
      .scavenger .hundredPercentimg {
          margin: 2.5%;
      }
      .scavenger .wholeimg img {
          width: 92%;
          padding:4%;
      }
      .scavenger .hundredPercentimg img {
          width: 100%;
      }
      .scavenger .half:hover, .whole:hover, .hundredPercentimg:hover, .quad:hover {
          background-color:#8bb611;
          color:#ffffff;
          cursor:pointer;
      }
      .scavenger .sclick {
          background-color:#8bb611;
          color:#ffffff;
      }
      .scavenger label {
          font-size: 20px;
      }
      .scavenger .half p, .whole p {
          font-size: 20px;
          margin-bottom: 0;
          text-align: center;
      }
      .scavenger .mediaItem, .scavenger .mediaItem iframe {
          display: block;
          left: 0;
          margin: 0;
          position: relative;
          top: 0;
      }
      #question > div.quadList {
          display: block;
      }
      #sectionTwo #answer_box {
          width:100%;
      }
      .showsec {
          display:block;
      }
      .visible {
          visibility: visible;
      }
      .done {
          visibility: visible;
      }
      .cover {
          height:100%;
          width:100%;
          position:fixed;
          top:0;
          left:0;
          z-index:-9999;
      }
      .row img {
          opacity:1;
         ...

JavaScript

(function (window, document, undefined) {

    /*
     * Grab all iframes on the page or return
     */
    var iframes = document.getElementsByTagName('iframe');

    /*
     * Loop through the iframes array
     */
    for (var i = 0; i < iframes.length; i++) {

        var iframe = iframes[i],

            /*
             * RegExp, extend this if you need more players
             */
            players = /www.youtube.com|player.vimeo.com/;

        /*
         * If the RegExp pattern exists within the current iframe
         */
        if (iframe.src.search(players) > 0) {

            /*
             * Calculate the video ratio based on the iframe's w/h dimensions
             */
            var videoRatio = (iframe.height / iframe.width) * 100;

            /*
             * Replace the iframe's dimensions and position
             * the iframe absolute, this is the trick to emulate
             * the video ratio
             */
            iframe.style.position = 'absolute';
            iframe.style.top = '0';
            iframe.style.left = '0';
            iframe.width = '100%';
            iframe.height = '100%';

            /*
             * Wrap the iframe in a new <div> which uses a
             * dynamically fetched padding-top property based
             * on the video's w/h dimensions
             */
            var wrap = document.createElement('div');
            wrap.className = 'fluid-vids';
            wrap.style.width = '100%';
            wrap.style.position = 'relative';
            wrap.style.paddingTop = videoRatio + '%';

            /*
             * Add the iframe inside our newly created <div>
             */
            var iframeParent = iframe.parentNode;
            iframeParent.insertBefore(wrap, iframe);
            wrap.appendChild(iframe);

        }

    }

})(window, document);

$(function () {
    FastClick.attach(document.body);

    /* vars */
    $sec1 = $('#sectionOne');
    $sec2 = $('#sectionTwo');
    $sec3 =...