JSFiddle - React, Tailwind, and code Playground

HTML

<body class="body">

        <div class="pane">
        <input type="checkbox" id="button">
        <label class="card" for="button1"></label>

        <input type="checkbox" id="button2">
        <label class="card" for="button2"></label>

        <input type="checkbox" id="button3">
        <label class="card" for="button3"></label>

        <input type="checkbox" id="button4">
        <label class="card" for="button4"></label>
        </div>
            </body>

CSS

input
    {
    width:100px;
    height:100px;
    display:none;
    }
.card
    {
    width:100px;
    height:100px;
    background:red;
    display:block;
    transition: background 1s, -webkit-transform 1s;
    }
input:checked +.card
    {
    background:blue;
    -webkit-transform: rotateX(180deg);
    }