JSFiddle - React, Tailwind, and code Playground

by muhammadaser

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>

<title>Untitled Document</title>

</head>

<body>
<div class="kiri"></div>
<div class="kanan"></div>
<div class="kiri1"></div>
<div class="kanan1"></div>
<div class="tombol"></div>
<div class="tengkelek"></div>

</body>
</html>

CSS

.kiri,.kanan,.kiri1,.kanan1{
    background:#ff0;
    background-size: 100% 100%;
    height:11%;
    position:fixed;
    width:3%;
    top:70%;
    right:41%;
    opacity:0;
}
.kanan{
    background:#f00;
    top:86%;
    left:45%;

}
.kiri1{
    top:35%;
    right:41%;
}
.kanan1{
    background: #00f;
    top:51%;
    left:45%;
}
.tombol{
    background:#f0f;
    background-size: 100% 100%;
    position:fixed;
    width:15%;
    height:20%;
    top:25%;
    left:33%;
    opacity:0;
    cursor:pointer;
}
.tengkelek {
    background:#f00;
    background-size:100% 100%;
    width:65px;
    height:65px;
    position:fixed;
    top:10%;
    left:55%;
}

JavaScript

$(document).ready(function() {
    $('.tengkelek').hide();
    $('.kanan').animate({
        opacity: 1
    }, 800);
    $('.kiri').delay(1000).animate({
        opacity: 1
    }, 800);
    $('.kanan1').delay(1500).animate({
        opacity: 1
    }, 800);
    $('.kiri1').delay(2000).animate({
        opacity: 1
    }, 800);
    $('.tombol').delay(2500).animate({
        opacity: 1
    }, 800).click(

    function() {
        $('.tengkelek').show().delay(2000).show(function() {
            window.location.href = "index.php";
        });
    });

});