JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<svg version="1.1"
            baseProfile="full"
            width="740" height="200"
            xmlns="http://www.w3.org/2000/svg">
                <rect width="100%" height="100%"  fill="none" opacity=".50"/>
                <!--container-->
                <g class="container">
                    <rect x="237" y="50.3" fill="#333" width="8.8" height="2" style="transform-origin: 50% 50% 0px; transform: matrix(1, 0, 0, 1, 0, 0);" />
                    <path fill="#333" d="M5.6,98.7V57.9h-2v42.8h239V57.9h-2v40.8 M240.6,2v42.9h2V0H104.1v0h-2v0h2v0h-2v0H3.6v44.9h2V2"></path>
                </g>
                <g class="container" style="transform-origin: 50% 50% 0px; transform: translate3d(246px,0,0);">
                    <rect x="0" y="50.3" fill="#333" width="8.8" height="2" style="transform-origin: 50% 50% 0px; transform: matrix(1, 0, 0, 1, 0, 0);" />
                    <rect x="237" y="50.3" fill="#333" width="40.8" height="2" style="transform-origin: 50% 50% 0px; transform: matrix(1, 0, 0, 1, 0, 0);" />
                    <path fill="#333" d="M5.6,98.7V57.9h-2v42.8h239V57.9h-2v40.8 M240.6,2v42.9h2V0H104.1v0h-2v0h2v0h-2v0H3.6v44.9h2V2"></path>
                </g>
                <!--Logo-->
                <g id="logo">
                    <circle cx="120" cy="50" r="40" fill="red" fill-opacity="0.5" stroke="#333" stroke-width="2" stroke-linecap="round" stroke-opacity="0.8" />
                    <text x="120" y="55" font-size="16" text-anchor="middle" fill="white" style="fill: #333;">Tambo</text>
                </g>
                <!--wheels-->
                <g class="wheel">
                    <circle cx="40px" cy="130px" r="16" fill="none" stroke="#333" stroke-width="8"/>
                    <rect x="30" y="129" fill="#333" width="8.8" height="2" style="transform-origin: 50% 50% 0px; transform: matrix(1, 0, 0, 1, 0, 0);" />
                </g>
                <g class="wheel">
                    <circle cx="90px" cy="130px" r="16"...

CSS

*{box-sizing: border-box; padding: 0; margin: 0}
:root{
    padding-top: 40px; 
    width: 100vw; 
    height: 100vh; 
    overflow: hidden;
    text-align: center;
    background-color: #f8f9fa
}
@-webkit-keyframes "translate" {
    from{
        transform: translate3d(calc(0vw - 480px),0,0)
    }
    to{
        transform: translate3d(calc(100vw - 400px),0,0)
    }
}
@-webkit-keyframes "rotate" {
    to{transform: rotate(360deg)}
}
svg{
    -webkit-animation: translate 10s ease infinite
}
svg g.wheel{
    transform-origin: 50% 50% 0px;
    -webkit-animation: rotate .08s ease infinite forwards
}
‚