JSFiddle - React, Tailwind, and code Playground

HTML

<input type="checkbox" id="toggle" />
<label for="toggle">Click me</label>

CSS

input { display: none }
label {
    display: inline-block;
    width: 50px;
    height: 50px;
    padding: 5px;
    background: #444;
    color: #fff;
    text-align: center;
    cursor: pointer;
    
    transform: translateY(0%);
    transition: transform .4s ease;
}
input:checked+label {
    transform: translateY(400%);
}