JSFiddle - React, Tailwind, and code Playground

by Axelvaisper

HTML

<input id='my-input' type="checkbox">
<div>
    <label for="my-input"></label>
    <span>Check me</span>
</div>

CSS

input {
    display: none;
}
div {
    height: 100px;
    width: 200px;
    padding: 20px;
    background-color: pink;
    transition: .2s;
}
label {
    position: relative;
    display: inline-block;
    height: 14px;
    width: 14px;
    background-color: white;
    border: 1px solid lightgray;
    border-radius: 2px;
    cursor: pointer;
    transition: .2s;
}
label:before {
    content: "✔";
    position: absolute;
    display: block;
    height: 11px;
    width: 10px;
    top: -5px;
    opacity: 0;
    transition: .2s;
}
label:hover {
    border-color: gray;
}
input:checked + div {
    background-color: lime;
}
input:checked + div > label:before {
    opacity: 1;
}