JSFiddle - React, Tailwind, and code Playground

HTML

<div id='nav'>
    <ul>
        <li><a href="javascript://">Home</a></li>
        <li><a href="javascript://">There</a></li>
    </ul>
</div>
<div id='flash-container' class='flash-container'>
        created successfully
</div>
<div id='content'>
    Here is some content.
</div>

SCSS

@mixin transition($transition: all .5s ease){
  -webkit-transition: $transition;
  -moz-transition: $transition;
  -o-transition: $transition;
  -ms-transition: $transition;
  transition: $transition;
}

a {
    color: white;
    text-decoration: none;
}
#nav {
    height: 40px;
    width: 100%;
    background-color: #2c3e50;
    ul {
        list-style: none;
        color: white;
        li {
            float: left;
            padding: 10px 20px;
        }
    }
}

#content {
    min-height: 500px;
    background-color: #ddd;
}

.flash-container {
    overflow: hidden;
    cursor:pointer;
    width:100%;
    text-align:center;
    position:fixed;
    top:56px;
    left:0;
    height: 0;
    @include transition();
    &.showing {
        height: 50px;
    }
    .message {
        display: inline-block;
        padding: 10px 20px;
        border-radius: 0 0 4px 4px;
        &.success {
            background-color: #58b858;
        }
    }
}

JavaScript

(function($){ 
    Flash = {}
    Flash.success = function(msg, time){
        time = time || 1000;
        $('#flash-container')[0].innerHTML = "<div class='success message'>" + msg + "</div>";
        $('#flash-container').addClass('showing');
        setTimeout(function(){
          $('#flash-container').removeClass('showing');
        }, time);
      };
})(jQuery)

$(function(){
    Flash.success("Saved");

})