JSFiddle - React, Tailwind, and code Playground

by jakie8

HTML

<a href="#" class="logo animated-brand">
    <span>cluster</span>
    <span>F</span>
    <span>lunk</span>
</a>

CSS

a.animated-brand, .header .logo {
    text-decoration: none;
    font-family: arial;
    font-size: 0;
    display: inline-block;
    background: none;
    color: #333;
}
.animated-brand span {
    -webkit-animation-delay: 1s;
}
.animated-brand:hover span:nth-child(2) {
    -webkit-transform: scale(1.1) rotate(-16deg);
}
.animated-brand span {
    font-size: 24px;
    line-height: 24px;
    font-weight: bold;
    opacity: 1;
}
.animated-brand span:nth-child(1), .animated-brand span:nth-child(3) {
    -webkit-animation: flunkFade 1s;
}
.animated-brand span:nth-child(2) {
    -webkit-transition: all 0.2s ease;
    -webkit-animation: flunkFall 500ms;
    color: #E74C3C;
    display: inline-block;
    -webkit-transform: scale(1) rotate(-15deg);
    font-size: 32px;
    line-height: 15px;
    margin-right: -5px;
}
@-webkit-keyframes flunkFade {
    0% {
        opacity: 0.0;
    }
    100% {
        opacity: 1.0;
    }
}
@-webkit-keyframes flunkFall {
    0% {
        opacity: 0.0;
        -webkit-transform: scale(2) rotate(0deg);
    }
    100% {
        opacity: 1.0;
        -webkit-transform: scale(1) rotate(-15deg);
        color: #E74C3C;
    }
}