JSFiddle - React, Tailwind, and code Playground

by Grzegorz Matyszewski

HTML

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="112px" height="54px" viewBox="0 0 112 54" xml:space="preserve">
    <clipPath id="clip-logo" class="clip">
        <rect x="27.8" y="51" width="54.1" height="2.4"/>
        <polygon points="27.8,13.5 54.8,0 81.8,13.5"/>
        <path d="M0,39v-1.9l2.8-11H0.3v-2.1h4.5v1.9l-2.8,11h2.8V39H0z"/>
        <path d="M16.9,39l2.3-15H21l2.3,15h-2.1l-0.4-3.2h-1.4L19,39H16.9z M19.5,33.9h1.1l-0.5-5.6L19.5,33.9z"/>
        <path d="M35.3,34v-5c0-3,0.7-5.3,3.1-5.3c2.2,0,3,2.1,3,5V30h-2.1v-1.4c0-1.1-0.1-2.6-0.9-2.6c-0.8,0-0.9,1.3-0.9,2.2v6.5 c0,0.9,0.1,2.2,0.9,2.2c0.8,0,0.9-1.4,0.9-2.6v-1.5h2.1l0,1.3c0,2.7-0.7,5.2-2.9,5.2C36,39.3,35.3,36.9,35.3,34z"/>
        <path d="M53.7,39v-15h2.1v6.2h1.5v-6.2h2.1v15h-2.1v-6.7h-1.5V39H53.7z"/>
        <path d="M72.1,39v-15h4.4V26h-2.3v4.1h1.6v2.1h-1.6v4.6h2.3V39H72.1z M76.5,42l-0.1,1.3c-1,0-2.3,0-2.3-1.9c0-0.9,0.4-2,0.9-2.6 h0.9c-0.2,0.7-0.4,1.4-0.4,2.1C75.4,42,76,42,76.5,42z"/>
        <path d="M89.7,39V26.2h-1.5v-2.3h5.2v2.3h-1.5V39H89.7z"/>
        <path d="M104.9,39l2.3-15h1.9l2.3,15h-2.1l-0.4-3.2h-1.4l-0.4,3.2H104.9z M107.6,33.9h1.1l-0.5-5.6L107.6,33.9z"/>
    </clipPath>
    <g clip-path="url(#clip-logo)">
        <rect x="0" y="0" width="112px" height="54" fill="white" class="white"/>
        <rect x="0" y="0" width="112px" height="54" fill="black" class="black"/>
    </g>
</svg>

CSS

body { background: #efefef; }
#logo .black, #logo .clip { transition: all .3s ease; }
#logo:hover .black { transform: translateX(100%); }