JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div id="logo" class="age-gate-stage" style="display: ;">

    <a href="" style="display: block; width: 100%; height: 100%;">
        <div class="logo-body">

            <div class="body">
                <!-- top line -->

                <div class="top-line" style="transform: translateY(0px) scale(1);">
                    <svg xmlns="http://www.w3.org/2000/svg" width="270.501" height="2.0" viewBox="0 0 270.501 2.00">
                        <path id="Wordmark" d="M312.314,176.166H41.813v-2.034h270.5Z" transform="translate(-41.813 -174.133)" fill="#fff"></path>
                    </svg>
                </div>

                <!-- top line -->

                <!-- start of _words -->

                <div class="words" style="transform: translateY(0px) scale(1);">

                    <!--  L  -->
                    <div class="word-l">
                        <svg xmlns="https://www.w3.org/2000/svg" width="22.637" height="34.571" 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>
                    </div>
                    <!-- L -->

    ...

CSS

body {
    background: black;
}

div#logo {
    width: 270.5px;
    height: 60px;
    position: relative;
    line-height: 0px;
    margin: auto;
    transform: scale(4.57);
}

div#logo div.logo-body {
    width: 100%;
    height: 100%;
    transform: scale(0.5);
}

div#logo div.logo-body div.body {
    width: 100%;
    height: 100%;
}

div#logo div.top-line {
    width: 100%;
    height: 2px;
    position: absolute;
    top: 0;
    left: 0;
    /*animation: logoUp 1.2s cubic-bezier(0.9, 0.02, 0.3, 0.98) forwards 2s;*/
}

div#logo div.top-line {
    -webkit-animation: logoUp 1.2s cubic-bezier(0.9, 0.02, 0.3, 0.98) forwards 2.1s;
    animation: logoUp 1.2s cubic-bezier(0.9, 0.02, 0.3, 0.98) forwards 2.1s;
}

div#logo div.top-line svg {
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transform: translateY(29px);
    -ms-transform: translateY(29px);
    transform: translateY(29px);
}

div#logo div.top-line svg {
    -webkit-animation: mainLogoSvg .7s forwards 1.2s;
    animation: mainLogoSvg .7s forwards 1.2s;
}

div#logo div.bottom-line {
    width: 100%;
    height: 2px;
    position: absolute;
    bottom: 0;
    left: 0;
    /*animation: logoUp 1.2s cubic-bezier(0.9, 0.02, 0.3, 0.98) forwards 2.4s;*/
}

div#logo div.bottom-line {
    -webkit-animation: logoUp 1.2s cubic-bezier(0.9, 0.02, 0.3, 0.98) forwards 2.5s;
    animation: logoUp 1.2s cubic-bezier(0.9, 0.02, 0.3, 0.98) forwards 2.5s;
}

div#logo div.bottom-line svg {
    position: absolute;
    bottom: 0;
    left: 0;
    -webkit-transform: translateY(-29px);
    -ms-transform: translateY(-29px);
    transform: translateY(-29px);
}

div#logo div.bottom-line svg {
    -webkit-animation: mainLogoSvg .7s forwards 1.2s;
    animation: mainLogoSvg .7s forwards 1.2s;
}

@-webkit-keyframes mainLogoSvg {
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@keyframes mainLogoSvg {
    100% {
        -webkit-transform: translateY(0);
        transform:...