JSFiddle - React, Tailwind, and code Playground
HTML
<div class="success1" id="success1">Successful operation 1
<div class="close_button">X</div></div>
<div class="success1" id="success2">Successful operation 2
<div class="close_button">X</div></div>
CSS
.success1 {
color: #4F8A10;
background-color: #DFF2BF;
background-image:url('success.png');
border: 1px solid;
width:400px;
margin: 10px 0px;
padding:15px 10px 15px 50px;
background-repeat: no-repeat;
background-position: 10px center;
position:relative;
}
.close_button{
top:0px;
right:0px;
position:absolute;
width:20px;
height: 20px;
background-color:#4F8A10;
color:#DFF2BF;
text-align:center;
}
.close_button:hover{
background-color:#a44;
}
JavaScript
$(function(){
$(".close_button").click(function(e){
$(e.target).parent().fadeOut();
});
});