JSFiddle - React, Tailwind, and code Playground

Simple Modular Responsive Header and footer

by Jennifer Perrin

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="text-xs-center" style="color: #fff; background-color: #f06292; min-height: 100px; padding: 65px;">
    <h1 style="font-size: 3rem;">WOW</h1>
    <p class="lead" style="font-size: 1.8rem;">
        <strong>Simple Modular Responsive Header and footer</strong> lets you build headers & footers in seconds!
    </p>
</div>

<div style="color: #1a1a1a; background-color: #eee; min-height: 300px; padding: 24px;">
    <!-- Sample #1
  ============================================= -->
    <header class="s24-bar text-color-white bg-color-black p-a">

        <!-- Put your brand here -->
        <div class="s24-bar__brand">
            <div style="max-width: 200px;">
                <a href="#">Brand</a>
            </div>
        </div>

        <!-- Put anything that you like it to be collapsed in mobile view here -->
        <div class="s24-bar__collapse" id="collapse-1">
            <nav role="navigation">
                <ul class="s24-list s24-list--visual-collapsible">
                    <li class="s24-list__item"><a class="s24-link s24-link--effect-alpha" href="#">Home</a></li>
                    <li class="s24-list__item"><a class="s24-link s24-link--effect-alpha" href="#">About</a></li>
                    <li class="s24-list__item"><a class="s24-link s24-link--effect-alpha" href="#">Portfolio</a></li>
                    <li class="s24-list__item"><a class="s24-link s24-link--effect-alpha" href="#">Contact</a></li>
                </ul>
            </nav>
        </div>

        <!-- Put any utility content here, such as social icons -->
        <div class="s24-bar__utilities">
            <ul class="s24-list">
               ...

CSS

/*
For a more professional header, footer, navigation, mega menu, and sidebar, 
I recommend you to checkout this awesome jQuery plugin and CSS framework:
https://myflashlabs.github.io/24component-bars/
It lets you create almost any kind of bar fast and easy. Cheers!
*/

.pr {
    margin: 0;
    font-family: Arial, sans-serif;
}

.pr body {
    margin: 0;
}

*,
*:after,
*:before {
    box-sizing: border-box;
}

.m-a-0 {
    margin: 0 !important;
}

.m-t-0 {
    margin-top: 0 !important;
}

.m-r-0 {
    margin-right: 0 !important;
}

.m-b-0 {
    margin-bottom: 0 !important;
}

.m-l-0 {
    margin-left: 0 !important;
}

.m-x-0 {
    margin-right: 0 !important;
    margin-left: 0 !important;
}

.m-y-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.m-a {
    margin: 12px !important;
}

.m-t {
    margin-top: 12px !important;
}

.m-r {
    margin-right: 12px !important;
}

.m-b {
    margin-bottom: 12px !important;
}

.m-l {
    margin-left: 12px !important;
}

.m-x {
    margin-right: 12px !important;
    margin-left: 12px !important;
}

.m-y {
    margin-top: 12px !important;
    margin-bottom: 12px !important;
}

.m-x-auto {
    margin-right: auto !important;
    margin-left: auto !important;
}

.p-a-0 {
    padding: 0 !important;
}

.p-t-0 {
    padding-top: 0 !important;
}

.p-r-0 {
    padding-right: 0 !important;
}

.p-b-0 {
    padding-bottom: 0 !important;
}

.p-l-0 {
    padding-left: 0 !important;
}

.p-x-0 {
    padding-right: 0 !important;
    padding-left: 0 !important;
}

.p-y-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.p-a {
    padding: 12px !important;
}

.p-t {
    padding-top: 12px !important;
}

.p-r {
    padding-right: 12px !important;
}

.p-b {
    padding-bottom: 12px !important;
}

.p-l {
    padding-left: 12px !important;
}

.p-x {
    padding-right: 12px !important;
    padding-left: 12px !important;
}

.p-y {
    padding-top: 12px !important;
    padding-bottom: 12px...

JavaScript

'use strict';

$('.s24-js-toggle').on('click.s24toggle', function(e) {
    e.preventDefault();
    var $target = $($(e.currentTarget).attr('data-target'));
    $target.animate({
        height: 'toggle'
    }, 300);
});