JSFiddle - React, Tailwind, and code Playground

by mblase75

HTML

<input type="checkbox" id="toggle">
    <div class="overlay"> 
        <br><br><br><br><br><br>
        <label for="toggle">Click to deactivate</label>
    </div> 
    <label for="toggle">Click to activate</label>

CSS

@keyframes fadein {
        0% {
            opacity: 0;
            display: none;
        }
        1% {
            opacity: 0;
            display: block;
        }
        100% {
            opacity: 1;
            display: block;
        }
    }
    #toggle {
        display: none;
    }
    label {
        cursor: pointer;
    }
    .overlay {
        position: absolute;
        background: green;
        width: 100%;
        display: none;
        animation: fadein ease-in 0.6s 1 reverse forwards;
    }
    #toggle:checked ~ .overlay {
        animation: fadein ease-in 0.6s 1 normal forwards;
        display: block;
    }