JSFiddle - React, Tailwind, and code Playground

Notification Bar http://codepen.io/bradfrost/pen/bzAtr

by Jennifer Perrin

HTML

<!--Pattern HTML-->
  <div id="pattern" class="pattern">
      <div class="main">
        <!--Begin Pattern HTML-->
            <h2>Notification Bar Demo</h2>
            <p><a href="#" class="action">Click for Notification</a></p>

        </div>
    </div>
    <!--End Pattern HTML-->

CSS

.main {
          padding: 1em;
        }
        .action {
            display: inline-block;
            padding: 0.5em;
            border: 1px solid #000;
        }
        .notification {
            position: fixed;
            top: -20em;
            left: 0;
            width: 100%;
            padding: 1em;
            overflow: hidden;
            background: #f9edbe;
            border-bottom: 1px solid #f0c36d;
        }
        .notification.anim {
            -webkit-transition: top 0.6s ease-out;  
            -moz-transition: top 0.6s ease-out;
            -ms-transition: top 0.6s ease-out;
            -o-transition: top 0.6s ease-out;
            transition: top 0.6s ease-out;
        }
        .notification.active {
            top: 0;
        }
        .notification .actions {
            margin-top: 0.5em;
        }
        .notification .btn {
            border: 1px solid #f0c36d;
            background: #f0c36d;
            color: #fff;
            display: inline-block;
            padding: 0.3em;
        }
        
        .notification .dismiss-btn {
            display: inline-block;
            margin-left: 1em;
        }
        
        @media all and (min-width: 50em) {
            .notification .msg {
                float: left;
                width: 70%;
            }
            .notification .actions {
                float: right;
                text-align: right;
                width: 30%;
                margin-top: -0.3em;
            }
        }

JavaScript

$(document).ready(function() {
    $('body').addClass('js');
    var $action = $('.action'),
        $menulink = $('.menu-link'),
        $menuTrigger = $('.has-subnav > a'),
        $n, nHeight;

    function addMessage() {
        $('<div class="notification" id="notification"><div class="msg">You must be signed in to complete this action.</div> <div class="actions"><a href="#" id="sign-in" class="btn">Sign In or Register</a> <a href="#" class="dismiss-btn">Dismiss</a></div></div>').prependTo('.pattern');

        $n = $('#notification'), nHeight = $n.outerHeight();

        showNotification();
        setTimeout(hideNotification, 8000);
    }

    $action.click(function(e) { //Trigger
        e.preventDefault();
        addMessage();
    });

    $('.pattern').delegate(".dismiss-btn", "click", function(e) {
        hideNotification();
        return false;
    });

    function showNotification() {
        $n.css('top', -nHeight).addClass('anim').css('top', 0);
    }

    function hideNotification() {
        $n.css('top', -nHeight);
        setTimeout(function() {
            $n.removeClass('anim');
        }, 1000);
    }

    $(window).resize(function() {
        nHeight = $n.outerHeight();
    });
});