JSFiddle - React, Tailwind, and code Playground

by Marc Malignan

HTML

<img src="https://d13yacurqjgara.cloudfront.net/users/99875/screenshots/2167068/dog_drib.gif"/>

<div id="dog">
    <div class="tail-blur"></div>
    <div class="tail"></div>
    <div class="paws back"></div>
    <div class="paws front"></div>
    <div class="body"></div>
    <div class="leash"></div>
    <div class="head">
        <div class="ear left"></div>
        <div class="ear right"></div>
        <div class="head-shape"></div>
        <div class="eyes">
            <i></i><i></i>
        </div>
        <div class="collar">
            <i></i><i></i><i></i>
            <i></i><i></i><i></i>
        </div>
        <div class="face"></div>
    </div>
</div>

SCSS

$bg: #1d4569;
$blue: #60c8e7;
$darkblue: #087ba5;
$orange: #ff6b5a;
$yellow: #ffc642;

@-webkit-keyframes tail {
    to { transform: rotate(55deg); }
}
@-webkit-keyframes nod {
    0% { margin-top: 0; }
    3% { margin-top: -5px; }
    6% { margin-top: 0; }
    47% { margin-top: 0; }
    50% { margin-top: 5px; }
    53% { margin-top: 0; }
}
@-webkit-keyframes blink {
    25% { transform: scaleY(1); }
    30% { transform: scaleY(.3); }
    35% { transform: scaleY(1); }
    55% { transform: scaleY(1); }
    60% { transform: scaleY(.3); }
    65% { transform: scaleY(1); }
}

body {
    margin: 0;
    background: $bg;
    text-align: center;
    overflow: hidden;
}

img {
    opacity: .3;
    margin-left: -3px;
}

#dog {
    position: absolute;
    top: 170px; left: 50%;
    width: 116px;
    height: 276px;
    margin-left: -58px;
    opacity: .5;
}
#dog:hover {
    opacity: 1;
}

#dog .body {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 160px;
    background: $blue;
}
#dog .body:before {
    content: '';
    position: absolute;
    bottom: 0; left: 50%;
    height: 120px;
    width: 60px;
    margin-left: -30px;
    background: white;
    border-radius: 30px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

#dog .paws {
    position: absolute;
    bottom: 0; left: 50%;
    height: 12px;
    border-radius: 12px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
#dog .paws.front {
    width: 136px;
    margin-left: -68px;
    background: $blue;
}
#dog .paws.back {
    width: 180px;
    margin-left: -90px;
    background: $darkblue;
}
#dog .paws.back:before {
    content: '';
    position: absolute;
    bottom: 0; left: 50%;
    width: 136px;
    height: 60px;
    margin-left: -68px;
    background: $darkblue;
    border-radius: 30px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

#dog .tail,
#dog .tail-shadow {
    position: absolute;
    bottom: 14px; left: 80px;
    width:...

JavaScript

// https://dribbble.com/shots/2167068-Man-s-best-friend