JSFiddle - React, Tailwind, and code Playground

by Amit Sinha

HTML

<div id="risk-logs">View Risk Logs <div class="arrow-right"></div> </div>

CSS

#risk-logs{
    		background: #333;
    		border-radius: 5px;
    		bottom: 26px;
    		color: #fff;
            top:5%;
    		left: 20%;
    		padding: 5px 15px;
    		position: absolute;
    		z-index: 98;
    		width: 220px;
            height:20px;
		}

.arrow-right {
	width: 0; 
	height: 0; 
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	position: absolute;
	border-left: 10px solid #333;
    right:-8px;
    top:5px;
}

JavaScript

function animatethis(targetElement, speed) {
    $(targetElement).animate({ marginLeft: "-=50px"},
    {
        duration: speed,
        complete: function ()
        {
            targetElement.animate({ marginLeft: "+=50px" },
            {
                duration: speed,
                complete: function ()
                {
                    animatethis(targetElement, speed);
                }
            }).delay( 2500 );
        }
    });
};

animatethis($('#risk-logs'), 300);