JSFiddle - React, Tailwind, and code Playground

by Nick Hulea

HTML

<link rel="stylesheet" href="http://stage.nhm.org/nature/sites/all/themes/nature/css/global.css">
<!--three pictures with there own input field-->
<section id="sectionThree" style="display:block;">
    <div class="scavenger">
        <div class="columnControl">
            <!--Question-->
            <div id="question">
                 <h2>Nature Hunt</h2>

                <p>Match the polinator to the plant! The shape of a pollinator can be a clue to the shape of the plant it prefers. Match the pollinator to its preferred plant.</p>
                <div class="hundredPercentimg a 1">
                    <img src="../nature/sites/all/themes/nature/img/nature_hunt/monarch_1.jpg" alt="" />
                    <input type="checkbox" style="display:none;" id="a" name="a" value="a" />
                    <div class="scavenger_input">
                        <input placeholder="Name the Butterfy ?" type="text" style="" id="answer_box" name="answer_box_butterfly_1" value="" />
                    </div>
                </div>
                <!-- End .half -->
                <div class="hundredPercentimg a 2">
                    <img src="../nature/sites/all/themes/nature/img/nature_hunt/california_dogface_1.jpg" alt="" />
                    <input type="checkbox" style="display:none;" id="a" name="a" value="a" />
                    <div class="scavenger_input">
                        <input placeholder="Name the Butterfy ?" type="text" style="" id="answer_box" name="answer_box_butterfly_2" value="" />
                    </div>
                </div>
                <!-- End .half -->
                <div class="hundredPercentimg a 3">
                    <img src="../nature/sites/all/themes/nature/img/nature_hunt/cabbagewhite_1.jpg" alt="" />
                    <input type="checkbox" style="display:none;" id="a" name="a" value="a" />
                    <div class="scavenger_input">
                        <input placeholder="Name the Butterfy ?" type="text"...

CSS

/* scavenger css styles */
      .scavenger {
          margin-bottom:10%;
      }
      .scavenger .blockbutton {
          margin-top:8%;
      }
      .scavenger .half {
          padding: 3px;
          float: right;
          margin: 2px;
      }
      .scavenger .whole, .a {
          padding:5px;
          margin: 5px;
      }
      .scavenger .wholeimg {
          float: left;
          width: 42%;
          margin:2.5%;
      }
      .scavenger .quad {
          float: left;
          width:21%;
          margin:1%;
          padding:1%;
      }
      .scavenger .mobilequad {
          width: 21%;
          margin: 1%;
          padding: 1%;
          margin-bottom: 0;
      }
      .scavenger .hundredPercentimg {
          margin: 2.5%;
      }
      .scavenger .wholeimg img {
          width: 92%;
          padding:4%;
      }
      .scavenger .hundredPercentimg img {
          width: 100%;
          padding: 0;
      }
      .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, .a 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;
         ...

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 */
    $sec0 = $('#sectionOne');
    $sec1 = $('#sectionOne');
    $sec2 =...