JSFiddle - React, Tailwind, and code Playground

by hughes

HTML

<p>This is a warning.</p>
<div class="warning"><button class="dismiss">×</button><strong>Warning:</strong> <span>Hey, dont do that!</span></div>

CSS

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.warning {
    background-color: #fcf8e3;
    border: 1px solid #fbeed5;
    border-radius: 4px;
    color: #c09853;
    padding: 12px 15px;
    font-size: 14px;
}

.dismiss {
    float: right;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 20px;
    font-weight: bold;
    margin: -5px 0 0;
    color: #c9c6b5;
    line-height: 20px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

JavaScript

$('.warning .dismiss').click(function (e) {
    $(e.target).closest('.warning').remove();
});