JSFiddle - React, Tailwind, and code Playground

by abuhamzah

HTML

<input type="button" class="showme" value="Show me the Dialog!">

CSS

.imgClose
{
  float:right;   
    
}
.h2
{
   padding-left:35px; 
}
    .error-notification {
        background-color:#DFF2BF;
        color:4F8A10; width:400px;
        display:none;
        cursor:pointer;
        padding:15px;
        padding-top: 0;
        position:absolute;
        z-index:1;
        font-size: 100%;
    }
    .success 
    {
        color: #4F8A10;
       
        background-color: #DFF2BF;    
        background-image: url(../img/success.png);
    }
    
    .success .message
    {
      padding-left:40px;   
    }

JavaScript

$(function () {
        $('.showme').click(function () {
            $('.error-notification').remove();
            var $err = $('<div>').addClass('error-notification')
    .html('<div><img class="imgClose" src="http://www.mobissimo.com/images/module-close.png" /><h2><div class="success"><img src="_assets/img/success.png" /></div><div class="message">Save/Update successfully</div>')
    .css('left', $(this).position().left);
            $(this).after($err);
            $err.fadeIn('fast');
        });
        $('.imgClose').live('click', function () {
            $(this).parent().fadeOut('fast', function () { $(this).parent().remove(); });
        });
    });