JSFiddle - React, Tailwind, and code Playground

by venkateshwar

HTML

<input id="checkbox" type="checkbox" class="checkbox" />
<label id="open" for="checkbox" class="btn btn-default btn-sm"> <span class="show-text"></span>

</label>
<div id="show">some text...
    <label for="checkbox" class="second-label btn btn-default btn-sm">Close</label>
</div>

CSS

:checked ~ .btn-default, #show, .checkbox {
        display: none;
    }
    :checked ~ #show {
        display: block;
    }
    .show-text:after {
        content:"Open";
    }
    :checked + .show-text:after {
        content:"";
    }
    .second-label, .show-text {
        text-decoration: underline;
        cursor: pointer;
    }