JSFiddle - React, Tailwind, and code Playground

by damir aushenov

HTML

<div id="join" class="callOut callOutRight">
     <h1>Sign up!</h1>

    <p>Join our Explorers Program and get access to our monthly newsletter, members-only rates, and blog about your travels!
<a href="explorers.htm" title="Join our community" class="accent">Join here</a>

    </p>
</div>

CSS

body {
    width:800px;
}
.callOut {
    background: #e1d8b9;
    padding: 15px;
    margin-bottom: 25px;
    width: 400px;
}
.callOut h1 {
    font-size: 1.4em;
    color: #193742;
    border-bottom: 2px solid #193742;
    margin-bottom: .5em;
    padding-bottom: .25em;
}

JavaScript

var currentPos = 0;
var intervalHandle;

function beginAnimate() {
    document.getElementById("join").style.position = "absolute";
    document.getElementById("join").style.left = "0px";
    document.getElementById("join").style.top = "100px";
    // cause the animateBox function to be called
    intervalHandle = setInterval(animateBox, 50);
}

function animateBox() {
    // set new position
    currentPos += 5;
    document.getElementById("join").style.left = currentPos + "px";
    // 
    if (currentPos > 900) {
        // clear interval
        clearInterval(intervalHandle);
        // reset custom inline styles
        document.getElementById("join").style.position = "";
        document.getElementById("join").style.left = "";
        document.getElementById("join").style.top = "";
    }
}

window.onload = function () {
    setTimeout(beginAnimate, 5000);
};