JSFiddle - React, Tailwind, and code Playground

by cahnory

HTML

<div class="flash">
    <input class="flash-state outsight" type="checkbox" id="flash-1" onclick="" />
    <div class="flash-body">
        This is a flash message
        <label class="flash-close" for="flash-1">×</label>
    </div>
</div>
<div class="flash">
    <input class="flash-state outsight" type="checkbox" id="flash-2" onclick="" />
    <div class="flash-body">
        This is another flash message
        <label class="flash-close" for="flash-2">×</label>
    </div>
</div>

CSS

.flash-state:checked ~ .flash-body {
    display: none;
}

/* Quick skin */
html, body {
    margin: 0;
    padding: 0;
}
.flash {
    background: #F0F0F0;
    border-top: 1px solid #DDD;
    color: #333;
    position: relative;
}
.flash-body {
    margin: 0 auto;
    padding: 1em;
    width: 600px;
}
.flash-close {
    cursor: pointer;
    position: absolute;
    right: 1em;
    top: 1em;
}

/* Not specific to the demo */
.outsight {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    position: fixed;
    width: 1px;
}

/* For this and onclick="" see: http://cahnory.fr/css/tests/checked-target2.html */
body { -webkit-animation: bugfix infinite 1s; }
@-webkit-keyframes bugfix { from { display: block } to { display: block } }