JSFiddle - React, Tailwind, and code Playground

by Kate Masiuk

HTML

<body>
    <div class="dog-wrapper">
        <div class="dog-body-united">
            <div class="dog-head-wrapper">
                <div class="dog-head">
                    <div class="dog-head-stripes-container">
                        <div class="dog-head-stripes dog-head-stripes-first"></div>
                        <div class="dog-head-stripes dog-head-stripes-second"></div>
                        <div class="dog-head-stripes dog-head-stripes-third"></div>
                    </div>
                    <div class="dog-ear-left"></div>
                    <div class="dog-ear-right"></div>
                    <div class="dog-eye-left"></div>
                    <div class="dog-eye-left-inner"></div>
                    <!-- <div class="dog-eye-right"></div> -->
                    <label for="dog-eye">
                        <input type="checkbox" class="dog-eye-right" for="dog-eye" id="dog-eye">
                        <span class="dog-eye-right-span"></span>
                    </label>
                    <div class="dog-nose"></div>
                </div>
                <div class="dog-toungue"></div>
            </div>
            <div class="dog-body-wrapper">
                <div class="dog-neck"></div>
                <div class="dog-body"></div>
                <div class="dog-body"></div>
            </div>
            <div class="dog-tail"></div>
        </div>
    </div>
</body>
</html>

CSS

COMMON START*/
html {
    min-height: 100%;
}
body {
    margin: 0;
    padding: 0;
    background-color: rgb(20,20,20);
}
/*COMMON START*/

/*PARTS START*/
.dog-wrapper {
    position: relative;
    top: 50%;
    width: 320px;
    height: 320px;
    margin: 170px auto 0;
    background-color: #d8b5de;
    overflow: hidden;
}
    .dog-head-wrapper {
        position: relative;
        top: 140px;
        left: 50%;
        margin-left:-40px;
    }
        .dog-head {
            position: relative;
            width: 150px;
            height: 100px;
            background-color: #394359;
            border-radius: 45%;
            z-index: 3;
        }
            .dog-head-stripes-container {
                position: absolute;
                top: 0;
                left: 50%;
                margin-left: -19px;
            }
                .dog-head-stripes {
                    position: relative;
                    display: inline-block;
                    width: 10px;
                    height: 20px;
                    border-radius: 14px 23px 27px 18px;
                    background-color: #303242;
                    box-shadow: inset 0 0 20px rgba(0,0,0,.2),
                                -1px 1px 1px rgba(0,0,0,1);
                    cursor: pointer;
                    -webkit-transform: rotate(-20deg);
                    -webkit-transition: top all 2s ease-in-out;
                    transform: rotate(-20deg);
                    transition: top all 2s ease-in-out;
                }
                .dog-head-stripes-first {
                    top: -2px;
                    -webkit-transform: rotate(-13deg);
                    transform: rotate(-13deg);
                }
                .dog-head-stripes-second {
                    top: -3px;
                    -webkit-transform: rotate(-9deg);
                    transform: rotate(-9deg);
                }
                .dog-head-stripes-third {
                    top: -2px;
         ...