JSFiddle - React, Tailwind, and code Playground

by rexonms

HTML

<footer class="page-footer"></footer>

CSS

.page-footer {
   height: 491px;
    background: #fff;
}
#charity_navigator_banner {
width: 100%;
    max-height: 90px;
    background: #f0f4f5;
    margin: 0 auto;
    cursor: pointer;
    }

JavaScript

/**
 * Created by rshrestha on 3/2/17.
 */
/* @author [email protected] (Rexon Shrestha)
 * Make various updates on FedWeb templates and add new functionality
 * a) Adds Charity navigator footer on all pages
 * b) Modifies the image/banner location on the Event/Calendar page
 * c) Add hover functionality on button
 * d) Modifies the heading of the Event and News page
 * e) Replaces the native search with google search
 *
 * 5-7-16
 * Updated http to https. Removed commented codes
 */


/**
 * VARIABLES
 * @desc describe all the variables here
 *
 */

var urlCurrent = window.location.href;
var myUrl = location.protocol + '//' + location.hostname;  //Find the document URL (so it works on both test and live site)
var urlDonate = "https://cjp.convio.net/site/Donation2?df_id=1260&1260.donation=form1";
var urlCharity = myUrl+"/about-us/where-your-money-goes";
var urlUnitedWay = "http://unitedwaymassbay.org";
var urlEvent = myUrl+ '/cjp-event-calendar';
var resultPage = myUrl + '/search-result';


/**
 * Replaces the default search engine with Google Search
 */

// Script from Google cse
(function() {
    var cx = '015585886146968399121:fwh4q6m7acy';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
        '//www.google.com/cse/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
})();


$(document).ready(function(){

    var googleDiv = '<gcse:searchbox-only resultsUrl="'+resultPage+'"></gcse:searchbox-only>';  // From google CSE
    var cjpSearch = $('.top-search');
    cjpSearch.remove();

    injectGoogleDiv(googleDiv);
});


/**
 *
 * @param Injects the div based on the device type
 */
function injectGoogleDiv(googleDiv){

    $('.user-nav-mobile').append(googleDiv);
    $('.search-link').append(googleDiv);

    changeGoogleSearchAttributes()
}


function...