JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div id="mobile-logo">
    <div class="line"></div>
    <div class="line"></div>
    <div class="body">
        <svg class="mainLogoSvgPosition" xmlns="https://www.w3.org/2000/svg" width="25.12" height="38.37" viewBox="0 0 22.637 34.571">
            <path id="Wordmark" d="M49.961,92.515c0,6.7.191,9.611,1.048,10.43.763.729,2,1.05,5.72,1.05,2.524,0,4.621-.046,5.764-1.366a6.2,6.2,0,0,0,1.24-2.735c.047-.364.144-.592.429-.592.238,0,.286.183.286.684a27.734,27.734,0,0,1-.715,4.554c-.333,1.047-.477,1.231-3,1.231-3.432,0-5.909-.092-7.913-.139-2-.09-3.476-.137-4.857-.137-.191,0-1,.047-1.954.047-.954.044-2,.09-2.719.09-.524,0-.763-.09-.763-.362,0-.137.1-.274.382-.274a7.629,7.629,0,0,0,1.429-.183c.954-.182,1.192-1.182,1.383-2.5.236-1.914.236-5.512.236-9.885V84.407c0-7.107,0-8.38-.092-9.839-.1-1.548-.479-2.277-2.05-2.6a9.483,9.483,0,0,0-1.621-.135c-.191,0-.382-.091-.382-.271,0-.273.24-.365.764-.365,2.143,0,5.147.137,5.386.137s3.715-.137,5.145-.137c.524,0,.763.092.763.365,0,.18-.19.271-.382.271a11.924,11.924,0,0,0-1.571.135c-1.382.229-1.764,1.005-1.86,2.6-.1,1.459-.1,2.731-.1,9.839Z" transform="translate(-41.811 -71.2)" fill="#fff"></path>
        </svg>
        <svg class="mainLogoSvgPosition" xmlns="https://www.w3.org/2000/svg" width="24.47" height="38.85" viewBox="0 0 22.053 34.997">
            <g id="Group_1344" data-name="Group 1344" transform="translate(-273.381 -276.871)">
                <path id="Wordmark" d="M131.851,113.871c0-6.044-3.479-9.8-7.905-9.8-3.105,0-6.642,1.727-6.642,8.446,0,5.615,3.105,10.069,8.287,10.069,1.888,0,6.259-.918,6.259-8.719m-18.272-.511c0-4.616,3.052-10.58,11.148-10.58,6.721,0,10.905,3.913,10.905,10.094s-4.319,11.065-11.174,11.065c-7.747,0-10.879-5.8-10.879-10.579" transform="translate(159.802 187.929)" fill="#fff"></path>
                <path id="Wordmark-2" data-name="Wordmark" d="M134.615,75.065l-1.169-1.937,1.169-1.937h2.338l1.171,1.937-1.171,1.937Z" transform="translate(148.622 205.68)" fill="#fff"></path>
            </g>
       ...

CSS

body {
    margin: 0;
    background: black;
}

#mobile-logo {
    position: absolute;
    z-index: 99999999999999999999999;
    width: 300px;
    height: 66.54px;
    left: 20%;
    top: 50px;
}

#mobile-logo div.line:nth-child(1) {
    width: 100%;
    height: 2px;
    background: white;
    top: 0;
    left: 0;
    position: absolute;
}

#mobile-logo div.line:nth-child(2) {
    width: 100%;
    height: 2px;
    background: white;
    bottom: 0;
    left: 0;
    position: absolute;
}

#mobile-logo div.body {
    width: 100%;
    height: calc(100% - 24px);
    top: 12px;
    position: absolute;
    -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 50%, 0 50%);
    clip-path: polygon(0 50%, 100% 50%, 100% 50%, 0 50%);
    -webkit-transition: .5s cubic-bezier(0.83, 0.04, 0.15, 1) 1.2s;
    -o-transition: .5s cubic-bezier(0.83, 0.04, 0.15, 1) 1.2s;
    transition: .5s cubic-bezier(0.83, 0.04, 0.15, 1) 1.2s;
}

body.validated #mobile-logo div.body {
    -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 0);
    clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 0);
    opacity: 1;
    /* animation: op .0s forwards 2.3s; */
    pointer-events: none;
}


#mobile-logo div.body svg {
    position: absolute;
    -webkit-transition: 1s cubic-bezier(0.01, -0.01, 0.18, 0.99) 1.4s;
    -o-transition: 1s cubic-bezier(0.01, -0.01, 0.18, 0.99) 1.4s;
    transition: 1s cubic-bezier(0.01, -0.01, 0.18, 0.99) 1.4s;
}

#mobile-logo div.body svg:nth-child(1) {
    left: 0;
    top: 0;
    transform: translate3d(0,-10px,0);
}

#mobile-logo div.body svg:nth-child(2) {
    left: 11.5%;
    top: 0;
}

#mobile-logo div.body svg:nth-child(3) {
    left: 23.5%;
    top: 0;
    transform: translate3d(0,10px,0);
}

#mobile-logo div.body svg:nth-child(4) {
    left: 33.3%;
    top: 0;
    transform: translate3d(10px,0,0);
}

#mobile-logo div.body svg:nth-child(5) {
    left: 56%;
    top: 0;
    transform: translate3d(-5px,0,0);
}

#mobile-logo div.body svg:nth-child(6) {
    left: 68%;
   ...