JSFiddle - React, Tailwind, and code Playground

by rwachtler

HTML

<div id="overlay">
    <button id="restart">Restart</button>
</div>
<div id="svg-container">
     <h5 class="wiggle">Hover the car</h5>

    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="200px">
        <rect x="1" y="20" width="110" height="160" fill="#CCCCCC" stroke="#000000" stroke-width="2"></rect>
        <rect x="15" y="30" width="20" height="20" id="window" fill="" stroke="#000000" stroke-width="1" />
        <use x="0" y="0" xlink:href="#window" fill="#F7CA18" />
        <use x="31.25" y="0" xlink:href="#window" fill="#E4F1FE" />
        <use x="62.5" y="0" xlink:href="#window" fill="#E4F1FE" />
        <use x="0" y="30" xlink:href="#window" fill="#F7CA18" />
        <use x="31.25" y="30" xlink:href="#window" fill="#E4F1FE" />
        <use x="62.5" y="30" xlink:href="#window" fill="#E4F1FE" />
        <use x="0" y="60" xlink:href="#window" fill="#E4F1FE"></use>
        <use x="31.25" y="60" xlink:href="#window" fill="#E4F1FE"></use>
        <use x="62.5" y="60" xlink:href="#window" fill="#E4F1FE"></use>
        <use x="0" y="90" xlink:href="#window" fill="#E4F1FE"></use>
        <use x="31.25" y="90" xlink:href="#window" fill="#F7CA18"></use>
        <use x="62.5" y="90" xlink:href="#window" fill="#F7CA18"></use>
        <rect id="door" x="46" y="150" width="20" height="30" fill="#E67E22" stroke="#000000" stroke-width="1"></rect>
        <g id="car" sketch:type="MSLayerGroup" transform="translate(25.000000, 177.000000) scale(-1, 1) translate(-25.000000, -10.000000) " fill="#4990E2">
            <path d="M23.8828251,0.0513619855 C22.8961562,0.0513619855 21.9402403,0.387736985 21.1509013,1.00182948 L15.4562487,5.38711423 L1.38797821,7.39237349 C0.429504237,7.54589407 -0.189822034,8.50179358 0.101478208,9.45171731 L1.53933293,14.2620133 L4.34693232,14.2620133 C4.06639776,16.9868293 5.93196792,18.7786622 8.31238184,18.7786622 C10.6927958,18.7786622 12.581361,16.7515648 12.2778317,14.2620133 L35.3024128,14.2620133...

CSS

html, body {
    height: 100%;
}
body {
    background: #EEEEEE;
    font-size: 16px;
    font-family:'Helvetica Neue', Arial, sans-serif;
}
div#overlay {
    background: rgba(0, 0, 0, 0.5);
    height: 100%;
    width: 100%;
    text-align: center;
    display: none;
}
div#overlay.visible {
    display: block;
}
button#restart {
    cursor: pointer;
    font-size: 2em;
    margin-top: 50vh;
    background: #5cb85c;
    padding: 5px 10px;
    color: #FFFFFF;
    border: none;
    outline: none;
    border-radius: 4px;
}
h5 {
    text-align: center;
}
div#svg-container {
    width: 110px;
    margin: 0 auto;
}
#path12 {
    animation-duration: 5s;
}
#path12.move {
    animation-name: moveCar;
}
.wiggle {
    animation-duration: .5s;
    animation-iteration-count: infinite;
    animation-name: scaleObject;
}
@keyframes scaleObject {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.2);
    }
}
@keyframes moveCar {
    from {
        transform: translateX(0%);
    }
    to {
        transform: translateX(-1000%);
    }
}

JavaScript

$("#path12").hover(function () {
    $(this).attr('class', 'move');
    setTimeout(function () {
        $("#svg-container").remove();
        $("#overlay").addClass("visible");
    }, 3000);
});
$("#restart").click(function () {
    location.reload(true);
});