JSFiddle - React, Tailwind, and code Playground

by Scott Godin

HTML

<div id="page" class="hfeed site">
    <header id="masthead" class="site-header" role="banner">
        <hgroup> <a href="#"><img src="http://bbbsde.client-proof.com/wp-content/uploads/2013/07/copy-BBBSDE_logo_2013_Horizontal.png" class="header-image" width="425" height="108" alt="" /></a>

             <h1 class="site-title">Big Brothers, Big Sisters of Delaware</h1>

             <h2 class="site-description">Making a Big Difference, One Child at a Time</h2>

        </hgroup>
        <div class="nsw">
            <nav id="site-navigation" class="main-navigation" role="navigation">
                	<h3 class="menu-toggle">Menu</h3>
	<a class="assistive-text" href="#content" title="Skip to content">Skip to content</a>

                <div class="menu-header-menu-container">
                    <ul id="menu-header-menu" class="nav-menu">
                        <li class="primary-homenavlink menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item current_page_item "><a href="/#"><span class="link-icon"><span class="dojodigital_toggle_title">Home</span></span></a>

                        </li>
                        <li><a href="#">Navlink 1</a>

                        </li>
                        <li><a href="#">Navlink 2</a>

                        </li>
                    </ul>
                </div>
            </nav>
            <div id="header-search-wrapper">
                <ul>
                    <li id="search-2" class="widget widget_search">
                        <form role="search" method="get" id="searchform" class="searchform" action="http://bbbsde/">
                            <div>
                                <label class="screen-reader-text" for="s">Search for:</label>
                                <input type="text" value="" name="s" id="s" />
                                <input type="submit" id="searchsubmit" value="Search" />
                            </div>
                        </form>
     ...

CSS

.site-header .site-title, .site-header .site-description, .main-navigation .menu-toggle, #search-button, #searchsubmit {
    display: none;
}
.assistive-text, .screen-reader-text {
    position: absolute !important;
    clip: rect(1px, 1px, 1px, 1px);
}
html {
    font-size: 87.5%;
}
body {
    font-size: 1rem;
    font-family:"DejaVu Sans", "open sans", "helvetica", "Arial", sans-serif;
    margin: 1.75rem;
}
.site-header {
    padding: 0;
    position: relative;
}
input {
    border: 1px solid #ccc;
    border-radius: 3px;
    font-family: inherit;
    padding: 0.428571429rem;
}
#header-search-wrapper {
    /*    float: right;*/
    /*    margin-top: -3rem;*/
    /*    margin-bottom: .66rem;*/
    position: absolute;
    right: 0;
    top: 95px;
    z-index: 999;
}
#header-search-wrapper .searchform #s {
    background: transparent url(http://bbbsde.client-proof.com/wp-content/themes/bbbsde/images/magnifying-glass.1.png) scroll no-repeat 99% 50%;
    border: 1px solid rgb(102, 102, 102);
    height: 16px;
    transition: background 300ms ease-in 0s;
}
#header-search-wrapper .searchform #s:focus {
    background: white scroll no-repeat 0% 50%;
}
@media screen and (max-width: 962px) {
    .main-navigation li {
        font-size: 0.95rem;
    }
    #header-search-wrapper {
        top: 15px;
    }
    #header-search-wrapper ul {
        background: white;
        clear: right;
        border: 4px solid rgba(0, 0, 0, 0.3);
        box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
        border-radius: 4px;
        border-top-right-radius: 0;
    }
    #header-search-wrapper #s {
        border: 0 !important;
    }
    #header-search-wrapper #search-button {
        float: right;
        display: block;
        background: rgb(92, 45, 144) url(http://bbbsde.client-proof.com/wp-content/themes/bbbsde/images/magnifying-glass.2.png) scroll no-repeat 50% 50%;
        width: 16px;
        height: 20px;
        box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
        padding:...

JavaScript

jQuery.noConflict();
jQuery(document).ready(function ($) {
    
    $("#header-search-wrapper").prepend('<p id="search-button"></p>');
    var sbutton = $("#search-button"),
        searchform = $("#header-search-wrapper ul");

    sbutton.click(function (e) {
        $(this).toggleClass('toggled-on');
        if ($(this).hasClass('toggled-on')) {
            searchform.slideDown();
            //$(".searchform #s").focus();
        } else {
            searchform.slideUp();
        }
    });
    
    $(window).resize(function () {
        sbutton.removeClass('toggled-on');
        if (sbutton.css("display") == 'none') {
            searchform.show(); 
        } else {
            searchform.hide();
        }
    });
    
    // Not sure if want
    // searchform.blur(function () { });
});