JSFiddle - React, Tailwind, and code Playground

by Kamran Ayub

HTML

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<section id="site-header-container">
    <header id="site-header">
        <h1>Logo</h1>
        
        <ul id="header-collapse">
            <li><a href="#search-header" data-target="#search-header">S</a></li>
            <li><a href="#main-nav" data-target="#main-nav,#membership-box">&nabla;</a></li>
        </ul>
        
        <section id="header-flex">
            <ul id="secondary-nav">
                <li><a href="/coupons">Coupons</a></li>
                <li><a href="/partners">Partner Brands</a></li>
                <li><a href="/story">Our Story</a></li>
            </ul>
        
            <div id="search-header">
                <input type="search">
                <button type="button">GO</button>
            </div>
        </section>
        
        <div id="membership-box">
            <h3>Welcome, User!</h3>
            
            <img src="http://1.gravatar.com/avatar/767fc9c115a1b989744c755db47feb60?s=80&r=pg&d=mm" title="Avatar">
            
            <section id="healthified-table">
                <h4>Healthified Table</h4>
                
                <ul>
                    <li><a href="#recipe-box">Recipe Box</a></li>
                    <li><a href="#to-do-list">To Do List</a></li>
                    <li><a href="#profile">Your Profile</a></li>
                    <li><a href="#logout">Log Out</a></li>
                </ul>                
            </section>
        </div>                               
        
        <ul id="main-nav">
            <li>
                <a class="top-level" href="/health">Health</a>
                <ul class="second-nav">
                    <li class="see-all"><a href="/health">See All Health</a></li>
                    <li>
                        <h4>Health</h4>
                        <ul class="third-nav">
                            <li><a href="/health/dishes">Dishes</a></li>
                          ...

SCSS

body {    
    font-family: Arial;
    font-size: 16px;
    line-height: 1.48em;
}

a { color: #fff; text-decoration: none; }
a:hover { color: #c3d021; }

#site-header-container {
    background: #0177c1;
    color: #fff;
    
    #site-header {
        width: 1180px;
        margin: 0 auto;
    
        h1 { font-size: 32px; width: 12.1%; float: left; margin-right: 3%; margin-top: 10px; }

        #header-collapse { display: none; }

        #header-flex {
            float: left;
            width: 60%;
        }

        #secondary-nav li { float: left; margin-right: 10px; font-weight: bold; font-size: 0.8em; }

        #search-header {
            clear: left;
            input { width: 85%; }
        }

        #main-nav {
            clear: both;
            margin-left: 15.1%;
    
            & > li { float: left; margin-right: 20px; font-weight: bold; position: relative; }

            .second-nav { 
                position: absolute; 
                left: -99999em; 
                background: rgba(255, 255, 255, 0.9); 
                width: 350px;
                padding: 15px;
                box-sizing: border-box;
    
                .see-all { display: none; }
                    
                a:link { color: #73b2d5; font-size: 0.9em; }
                h4 { color: #005286; font-weight: bold; }
            }

            & > li:hover .second-nav { left: 0; }

            .second-nav > li { float: left; width: 50%; }
        }

        #membership-box { 
            float: right;
            width: 20%;
    
            h3 { color: #c3d021; font-weight: bold; }
            img { float: left; width: 24.15254237288136%; margin-right: 4.66101694915254%; }
            section { float: left; width: 70.76271186440678%; }
            ul { font-size: 0.7em; }
            ul li { float: left; width: 50%; white-space: nowrap; }
        }
    }
}

// Large
@media (max-width: 1180px) {
    
    /* Flex once max "desktop" width is reached */
   ...

JavaScript

var getWindowSize = function () {
    $("#vpsize").text($(window).width() + "x" + $(window).height() + "px");
};

getWindowSize();

$(window).resize(getWindowSize);

$("#header-collapse a").on('click', function () {
    var target = $(this).data("target");
    
    $(this).toggleClass("active");
    $(target).toggle();
    
    return false;
});