JSFiddle - React, Tailwind, and code Playground

by jakie8

HTML

<a href="#" class="animated-branding">
    <div class="squares">
        <span class="s1"></span>
        <span class="s2"></span>
        <span class="s3"></span>
    </div>
    <div class="maker">Maker</div>
    <div class="labs">Labs</div>
</a>

CSS

.animated-branding{
    text-decoration: none;
    color: #000;
    font-size: 0;
    display: block;
    width: 77px;
    
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
   font-weight: 300;
    }
.animated-branding .maker,
.animated-branding .labs{
    font-size: 14px;
    text-align: justify;
    }

.animated-branding .squares{
    height: 76px;
}
.animated-branding .squares span {
    display: inline-block;
    background: #000;
    width: 23px;
    height: 100%;
    margin-right: 4px;
    }
    .animated-branding .squares span.s3{
        margin-right: 0;
        }
    .animated-branding .maker{
        font-weight: bold;
        text-transform: uppercase;
        font-size: 21px;
        line-height: 21px;
        margin-top: 5px;
        }
    .animated-branding .labs{
        text-transform: uppercase;
        font-size: 21px;
        letter-spacing: 9px;
        font-weight: 100;
        }