JSFiddle - React, Tailwind, and code Playground

by thetron

HTML

<div class="logo">
    <span class="pp">
        &plus;&plus;
    </span>
    <span class="tt">
        &plus;he&plus;ron        
    </span>
</div>

SCSS

.logo{
    display: inline-block;
    font-family: "Helvetica Neue";
    font-size: 36px;
    line-height: 28px;
    padding: 0px 6px 8px 6px;
    background: #111;
    color: #fff;
    overflow: hidden;
    width: 40px;
    .tt{ 
        margin-left: -180px;
    }
    
    &:hover{
        width:180px;
        transition-duration: 1s;
            .pp{ display: none; }
            .tt{ 
                margin-left: 0;
                transition-duration: 1s;
            }
    }
}