JSFiddle - React, Tailwind, and code Playground

by cahnory

HTML

<script src="http://leaverou.github.io/prefixfree/prefixfree.js"></script>
<div class="container">
    <div class="radios">
        <input type="radio" name="test" id="test-1" value="1" />
        <label for="test-1">Test 1</label>
        <input type="radio" name="test" id="test-2" value="2" />
        <label for="test-2">Test 2</label>
        <input type="radio" name="test" id="test-3" value="3" checked />
        <label for="test-3">Test 3</label>
        <input type="radio" name="test" id="test-4" value="4" />
        <label for="test-4">Test 4</label>
        <input type="radio" name="test" id="test-5" value="5" />
        <label for="test-5">Test 5</label>
    </div>
</div>

SCSS

.radios {
    perspective: 800px;
    // All covers
    label {
        background: #EEE;
        bottom: 0;
        cursor: pointer;
        display: block;
        -webkit-filter: brightness(0.4);
        height: 100%;
        left: 0;
        position: absolute;
        text-align: center;
        width: 25%;
        transition: all .4s;
        transform-origin: 50% 50%;
        transform: translateZ(-250px) rotateY(45deg);
        z-index: 2;
    }
    // selected cover
    :checked + label {
        -webkit-filter: drop-shadow(0 0 16px rgba(255,255,255,.7));
        cursor: default;
        filter: none;
        transform: translateX(150%);
        z-index: 4;
    }
    // Next cover
    :checked + label ~ label {
        transform: translateZ(-250px) translateX(300%) rotateY(-45deg);
        z-index: 3;
    }
    // Next afer next ^^
    :checked + label ~ label ~ label {
        z-index: 1;
    }
}

/********/

body {
    background: #222;
}
.container {
    height: 120px;
    line-height: 120px;
    margin: 50px auto;
    position: relative;
    width:  480px;
}
input {
    visibility: hidden;
}

/* For this and onclick="" see: http://cahnory.fr/css/tests/checked-target2.html */
body { -webkit-animation: bugfix infinite 1s; }
@-webkit-keyframes bugfix { from { display: block } to { display: block } }