JSFiddle - React, Tailwind, and code Playground

HTML

<div style="display: none;" class="message_div message_success">Success: You have added <a href="product_info.php?products_id=34">GALAXIE-THE MOVIE ISSUE</a>
to your <a href="shopping_cart.php">shopping cart</a>
!
    <img src="http://www.mybook.my/images/close.png" alt="" class="close">
</div>
<p id="show">Show</p>

CSS

.message_success {
    background: url("http://www.mybook.my/images/message_success.png") no-repeat scroll 10px center #EAF7D9;
    border: 1px solid #D2E4B9;
    display: block;
    font-family: arial;
    font-size: 13px;
    padding: 10px 10px 10px 40px;
    position: fixed;
    width: 600px;
    z-index: 9999;
    -webkit-box-shadow: 0px 1px 5px rgba(50, 50, 50, 0.19);
    -moz-box-shadow: 0px 1px 5px rgba(50, 50, 50, 0.19);
    box-shadow: 0px 1px 5px rgba(50, 50, 50, 0.19);
}
.close {
    cursor: pointer;
    float: right;
    padding-right: 4px;
    padding-top: 4px;
}

JavaScript

$("#show").click(function () {
    //ajax will submit form
    //$.ajax({
    //type: form34.attr("method"),
    //url: form34.attr("action"),
    //data: form34.serialize(),
    //success: function (data) {   ...
    //when success run this
    $(".message_div").addClass("message_success").slideDown().delay(6000).slideUp();
});

$(".close").click(function () {  
   $(".message_div").stop().slideUp();
});