JSFiddle - React, Tailwind, and code Playground

by Tahir Ahmed

HTML

<div id="script" style="height: 250px;">
                    <div class="slide">
                        <div id="div1" class="slide-item">
                            <p>Home</p>
                        </div>
                    </div>
                    <div class="slide">
                        <div id="div2" class="slide-item">
                            <p>About Us</p>
                        </div>
                    </div>
                    <div class="slide">
                        <div id="div3" class="slide-item">
                            <p>Events</p>
                        </div>
                    </div>
                    <div class="slide">
                        <div id="div4" class="slide-item">
                            <p>Register</p>
                        </div>

                    </div>

                </div>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

CSS

.slide-item {
height:30px;
line-height:15px;
width:200px;
background-color:rgba(0,0,0,.3);
border-top-left-radius:20px;
border-bottom-right-radius:20px;
text-align:center;
font:15px verdana;
color:black;
padding:5px;
position:absolute;
margin-top:130px;
left:200px;

}
.slide {
    margin:0px auto;
    width:1200px;
    height:50px;
    

}

JavaScript

$(document).ready(function () {

   

  $("#div1").animate({ left: '200px' }, { duration: 500 });
 $("#div2").animate({ left: '180px' }, { duration: 600 });
    $("#div3").animate({ left: '160px' }, { duration: 700 });
  $("#div4").animate({ left: '140px' }, { duration: 800 });

    
});