JSFiddle - React, Tailwind, and code Playground

by FZambia

HTML

<div class="success message">
         <h3>Congrats, you did it!</h3>
         <p>This is just a success notification message.</p>

</div>

<ul id="trigger-list">
         <li><a href="#" class="trigger success-trigger">Success</a></li>
</ul>

CSS

body
{
 margin: 0;
 padding: 0;
 font: 12px Arial, Helvetica, sans-serif;
 background: #f1f1f1;
}

.message
{
-webkit-background-size: 40px 40px;
-moz-background-size: 40px 40px;
background-size: 40px 40px;            
background-image: -webkit-gradient(linear, left top, right bottom,
                        color-stop(.25, rgba(255, 255, 255, .05)), color-stop(.25, transparent),
                        color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .05)),
                        color-stop(.75, rgba(255, 255, 255, .05)), color-stop(.75, transparent),
                        to(transparent));
background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
                    transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
                    transparent 75%, transparent);
background-image: -moz-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
                    transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
                    transparent 75%, transparent);
background-image: -ms-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
                    transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
                    transparent 75%, transparent);
background-image: -o-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
                    transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
                    transparent 75%, transparent);
background-image: linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
                    transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
                    transparent 75%, transparent);
                        
 -moz-box-shadow: inset 0 -1px 0 rgba(255,255,255,.4);
 -webkit-box-shadow: inset 0 -1px 0 rgba(255,255,255,.4);        
 box-shadow: inset 0 -1px 0...

JavaScript

var myMessages = ['info','warning','error','success']; // define the messages types         
function hideAllMessages()
{
     var messagesHeights = new Array(); // this array will store height for each
 
     for (i=0; i<myMessages.length; i++)
     {
              messagesHeights[i] = $('.' + myMessages[i]).outerHeight();
              $('.' + myMessages[i]).css('margin-top', -messagesHeights[i]); //move element outside viewport      
         }
}

function showMessage(type)
{
$('.'+ type +'-trigger').click(function(){
      hideAllMessages();                  
      $('.'+type).animate({marginTop:"0"}, 500);
});
}

$(document).ready(function(){
     
     // Initially, hide them all
     hideAllMessages();
     
     // Show message
     for(var i=0;i<myMessages.length;i++)
     {
        showMessage(myMessages[i]);
     }
     
     // When message is clicked, hide it
     $('.message').click(function(){              
              $(this).animate({marginTop: -$(this).outerHeight()}, 500);
      });         
     
});