JSFiddle - React, Tailwind, and code Playground

by Axelvaisper

HTML

<html>
<head>
    <style>
       
    </style>
</head>
<body>
    <div class='wrapper'>
        <h1>Only CSS, only hardcore</h1>
        <ul><!--
        --><li>
                <input id="bear" type='checkbox'>
                <label for='bear' class='bear pavepy'>
                    <h2>Bear</h2>
                    <div class='head'>
                        <div class='ear left'> </div>
                        <div class='ear right'> </div>
                        <div class='eye left'><span class='left top'> </span></div>
                        <div class='eye right'><span class='left top'> </span></div>
                        <div class='cheek left'> </div>
                        <div class='cheek right'> </div>
                        <div class='nose'> </div>
                    </div>
                    <div class='body'>
                        <div class='hand left'> </div>
                        <div class='hand right'> </div>
                        <div class='foot left'> </div>
                        <div class='foot right'> </div>
                        <div class='text'>hover over me!</div>
                        <div class='text2'>click me!</div>
                    </div>
                </label>
            </li><!--
        --><li>
                <input id="fox" type='checkbox'>
                <label for="fox" class='fox pavepy'>
                    <h2>Fox</h2>
                    <div class='head'>
                        <div class='ear left'> </div>
                        <div class='ear right'> </div>
                        <div class='eye left'><span class='right top'> </span></div>
                        <div class='eye right'><span class='left top'> </span></div>
                        <div class='cheek left'> </div>
                        <div class='cheek right'> </div>
                        <div class='nose'> </div>
                    </div>
                    <div class='body'>
                        <div...

CSS

.wrapper {
            width: 900px;
            height: 500px;
            margin: auto;
        }
        .wrapper h1,
        .wrapper h2 {
            font-family: verdana;
            text-align: center;
            color: #fff;
            text-shadow: 1px 1px 2px rgba(0,0,0,.4);
        }
        .footer {
            font-family: verdana;
            text-align: center;
            font-size: 0.9em;
            color: #555;
            margin-top: 150px;
        }
        .wrapper h1 {margin: 100px auto 40px;}
        .wrapper h2 {}
        .wrapper > ul {
            padding: 0;
            height: 100%;
            }
        .wrapper > ul li {
            display: inline-block;
            margin: 0 2%;
            width: 21%;
            height: 100%;
            position: relative;
            vertical-align: bottom;
        }
        .wrapper > ul li input {
            display: block;
            opacity: 0;
            position: absolute;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            /* z-index: 1000; */
        }
        

        .pavepy {
            padding-top: 50px;
            position: relative;
            display: block;
            -webkit-transition: all ease-out 0.8s;
               -moz-transition: all ease-out 0.8s;
                -ms-transition: all ease-out 0.8s;
                 -o-transition: all ease-out 0.8s;
                    transition: all ease-out 0.8s;
            cursor: pointer;
        }
        input:checked + .pavepy {
            margin-top: -40px;
        }
        
        .pavepy.bear * {background-color: #239E5C;}
        .pavepy.fox * {background-color: #E69839;}
        .pavepy.puppy * {background-color: #33AA9D;}
        .pavepy.cat * {background-color: #E5847C;}
        
        .pavepy.bear h2 {color: #239E5C; background-color: transparent;}
        .pavepy.fox h2 {color: #E69839; background-color: transparent;}
        .pavepy.puppy h2 {color:...