JSFiddle - React, Tailwind, and code Playground

HTML

100% CSS google doodle from: <a href="http://cssdeck.com/item/299/google-doodle-in-css-follow-up">http://cssdeck.com</a>
<br><br>
        
        <div class="doodle">

            <input type="checkbox" id="play" name="play"/>
            <label for="play">
                <img src="http://www.google.com/logos/2012/muybridge12-hp-p.jpg" alt="Play" />
            </label>

            <div class="animate">

                <div class="g"></div>
                <div class="g"></div>
                <div></div>
                <div></div>
                <div></div>
                <div class="l"></div>
                <div></div>

                <div class="g"></div>
                <div class="g"></div>
                <div class="o"></div>
                <div class="o play"></div>
                <div class="g"></div>
                <div class="l"></div>
                <div class="e"></div>

                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div class="g"></div>
                <div></div>
                <div></div>

            </div>

        </div>

CSS

body {
            font-family: 'Lucida Grande', 'Helvetica Neue', sans-serif;
            font-size: 13px;
        }

        .doodle {
            width: 469px; height: 162px;
            margin: 40px auto;

            position: relative;
        }

        .animate div {
            width: 67px; height: 54px;
            float: left;
            position: relative;
        }

        .doodle .animate {
            position: relative;
            width: 100%; height: 100%;
            background: url(http://www.google.com/logos/2012/muybridge12-hp-f.jpg);
        }

        .doodle input:checked ~ .animate {
            /* We will set a delay so that the rewind effect can occur */
            -webkit-animation: horse-ride .5s steps(12, end) infinite 5s;
            -moz-animation: horse-ride .5s steps(12, end) infinite 5s;
            animation: horse-ride .5s steps(12, end) infinite 5s;

            /* Imitating the Rewind effect before real animation starts */
            background-position: -2412px 0;
            -webkit-transition: all 5s cubic-bezier(0.550, 0.055, 0.675, 0.190);
            -moz-transition: all 5s cubic-bezier(0.550, 0.055, 0.675, 0.190);
            transition: all 5s cubic-bezier(0.550, 0.055, 0.675, 0.190);
        }
        .animate div:after {
            content: '';

            position: absolute;
            top: 0px; bottom: 0px; left: 0px; right: 0px;
            z-index: 2;

            border-right: 2px solid #fff;
            border-bottom: 2px solid #fff;

            background: rgba(255, 255, 255, 0.6);

            -webkit-box-shadow: inset 2px 2px 2px rgba(0,0,0,0.2);
            -moz-box-shadow: inset 2px 2px 2px rgba(0,0,0,0.2);
            box-shadow: inset 2px 2px 2px rgba(0,0,0,0.2);
        }
        .doodle div.g:after {
            background: rgba(53, 97, 182, 0.5);
        }
        .doodle div.o:after,
        .doodle div.e:after {
            background: rgba(230, 43, 36, 0.5);
        }
        /*...