JSFiddle - React, Tailwind, and code Playground

by John Doe

HTML

<div class="QpoLy"><div class="mGATq XG5Jd BsnNQ AL3kQ lZpaF zItCb YsOlD DUi8v Cr9Ge"><svg class="KBPxt hn2lg" viewBox="0 0 40 40"><g transform="matrix(.35 0 0 .35 3.2 3.2)"><path d="M7-6H2.5a2.5 2.5 0 1 0-5 0H-7c-.3 0-.5.2-.5.5s.3.5.5.5H7a.5.5 0 0 0 0-1zm-8.5 0a1.5 1.5 0 0 1 3 0h-3z" transform="matrix(4 0 0 4 48 48)"></path></g></svg><svg class="Z0dEQ IKEiQ" viewBox="0 0 40 40"><g transform="matrix(.35 0 0 .35 3.2 3.2)"><path d="M0 3.5c.3 0 .5-.2.5-.4v-6.2c0-.2-.3-.4-.5-.4-.3 0-.5.2-.5.4v6.2c0 .2.3.4.5.4z" transform="matrix(4 0 0 4 54 52)"></path><path d="M0 3.5c.3 0 .5-.2.5-.4v-6.2c0-.2-.3-.4-.5-.4-.3 0-.5.2-.5.4v6.2c0 .2.3.4.5.4z" transform="matrix(4 0 0 4 42 52)"></path><path d="M5.4-6.5 4.2 4.6c-.1.5-.5.9-1 .9h-6.4a1 1 0 0 1-1-.9L-5.4-6.5h-1l1.3 11.2a2 2 0 0 0 2 1.8h6.3a2 2 0 0 0 2-1.8L6.4-6.5h-1z" transform="matrix(4 0 0 4 48 54)"></path></g></svg></div></div>

CSS

.BsnNQ.lZpaF {
    margin-left: 4px;
}
.BsnNQ {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
    margin-left: 16px;
    visibility: hidden;
    width: 28px;
}
.DUi8v {
    fill: var(--f);
}

element.style {
}
.BsnNQ.lZpaF {
    margin-left: 4px;
}
.BsnNQ.lZpaF {
    margin-left: 4px;
}
.BsnNQ {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
    margin-left: 16px;
    visibility: hidden;
    width: 28px;
}
.DUi8v {
    fill: var(--f);
}
.YsOlD {
    --b: transparent;
    --f: var(--neutralPrimaryAlt);
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background: var(--b);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.DUi8v:hover {
    --f: #e81123;
    --b: #fef2f3;
}
.YsOlD.Cr9Ge:hover>.KBPxt {
    -webkit-animation: KBPxt .62s linear 1;
    animation: KBPxt .62s linear 1;
}
@keyframes KBPxt {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }

    22% {
        -webkit-transform: rotate(10deg) translateY(-2.6px);
        transform: rotate(10deg) translateY(-2.6px)
    }

    33% {
        -webkit-transform: rotate(-5deg) translateY(-4px);
        transform: rotate(-5deg) translateY(-4px)
    }

    55% {
        -webkit-transform: rotate(-2deg) translateY(-1.3px);
        transform: rotate(-2deg) translateY(-1.3px)
    }

    88% {
        -webkit-transform: rotate(0) translateY(0);
        transform: rotate(0) translateY(0)
    }

    to {
        -webkit-transform: rotate(0) translateY(0);
        transform: rotate(0) translateY(0)
    }
}
.hn2lg {
    -webkit-transform-origin: 72% 40%;
    transform-origin: 72% 40%;
}
.KBPxt, .Z0dEQ {
    width: 100%;
}
.DUi8v {
    fill: var(--f);
}
@keyframes Z0dEQ {
    0% {
        -webkit-transform:...