JSFiddle - React, Tailwind, and code Playground

by BurpmanJunior

HTML

<div id="e"> <span></span>

</div>

SCSS

#e{
    width: 30%;
    position: relative;
    background-color: #e5e5e5;
    border-radius: 50%;
    overflow: hidden;
    transition: transform 300ms, background-color 300ms;
    cursor: pointer;
    &:hover{
        background-color: #E6007E;
        span{
            transform: scale(1) rotate(0deg);
            &:before,
            &:after{
                //background-color: #E6007E;
            }
        }
    }
    span{
        position: absolute;
        display: block;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        transform: scale(1.2) rotate(-90deg);
        transition: transform 300ms, background-color 300ms;
        &:before,
        &:after{
            content: '';
            position: absolute;
            top: 33%;
            left: 50%;
            display: block;
            width: 50%;
            height: 15%;
            background-color: #fff;
            border-radius: 9999px;
            transform: rotate(-45deg) translateX(-36%);
            transition: transform 300ms, background-color 300ms;
        }
        &:after{
            left: auto;
            right: 50%;
            transform: rotate(45deg) translateX(36%);
        }
    }
    &:before{
        content: '';
        display: block;
        padding-top: 100%;
    }
}

JavaScript

/**
 * CSS only Eligo logo
 */