JSFiddle - React, Tailwind, and code Playground

by Marc Malignan

HTML

<div class="hotdog">
    <div class="bread back"></div>
    <div class="sausage"></div>
    <div class="mustard"></div>
    <div class="bread front"></div>
    <div class="sauce">
        <span>mean<br>mr.<br>mustard</span>
    </div>
</div>

<link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>

CSS

@-webkit-keyframes breadFront {
    0% { top: -2000%; }
    20% { top: 0; }
    100% { top: 0; }
}
@-webkit-keyframes breadBack {
    0% { top: -2000%; }
    20% { top: -40%; }
    100% { top: -40%; }
}
@-webkit-keyframes sausage {
    0% { top: -2020%; }
    20% { top: -2020%; }
    40% { top: -20%; }
    100% { top: -20%; }
}
@-webkit-keyframes mustard {
    0% { width: 0; }
    60% { width: 0; }
    80% { width: 80%; }
    100% { width: 80%; }
}
@-webkit-keyframes sauce {
    0% { top: -2300%; left: 10%; }
    40% { top: -2300%; left: 10%; }
    60% { top: -315%; left: 10%; }
    80% { top: -315%; left: 90%; }
    100% { top: -2300%; left: 90%; }
}

body {
    margin: 0;
    background: antiquewhite;
}

.hotdog {
    position: absolute;
    left:50%; top:50%;
    width:140px; height:40px;
    margin: -20px 0 0 -70px;
}
.hotdog, .hotdog * {
    box-sizing: border-box;
}

.bread {
    position: absolute;
    width:100%; height:100%;
    background: linear-gradient(#FFC08B, sandybrown);
    border-radius: 100px;
    border: 2px solid peru;
    -webkit-animation: breadFront 3s ease-in-out infinite;
    box-shadow: 0 10px 0 rgba(237, 223, 204, 1);
}
.bread.back {
    top: -40%;
    background: navajowhite;
    -webkit-animation: breadBack 3s ease-in-out infinite;
    box-shadow: none;
}

.sausage {
    position: absolute;
    top: -20%;
    width:120%; height:50%;
    margin-left: -10%;
    background: brown;
    border-radius: 100px;
    box-shadow: 0 30px 0 rgba(237, 223, 204, 1);
    -webkit-animation: sausage 3s ease-in-out infinite;
}

.mustard {
    position: absolute;
    top: -24%;
    width:80%; height:16%;
    margin-left: 10%;
    background: gold;
    border-radius: 100px;
    -webkit-animation: mustard 3s infinite;
}

.sauce {
    position: absolute;
    left:10%; top:-315%;
    width:60px; height:100px;
    line-height: 14px;
    margin-left: -30px;
    border-radius: 5px;
    background: gold;
    border: 2px solid goldenrod;
    -webkit-animation:...