JSFiddle - React, Tailwind, and code Playground

HTML

<div id="header">
    <div class="header_navigation">
        <ul class="mainmenuslide">
            <li><a href="#" alt="">Home</a>

            </li>
            <li><a href="#" alt="">Portafolio</a>

            </li>
            <li><a href="#" alt "">Services</a>

            </li>
            <li><a href="#" alt "">Blog</a>

            </li>
            <li><a href="#" alt "">Contact</a>

            </li>
        </ul>
    </div>
    <!-- end header_navigation-->
</div>
<!-- end header -->

CSS

#header {
    margin:auto;
}
.header_navigation {
    float:left;
    height:24px;
    margin:24px 0 0 0;
}
.mainmenuslide {
    height: 30px;
    background: #4873B2;
    position: relative;
    margin: 0px 0px 0px 0px;
}
.mainmenuslide li {
    padding: 10px 0px 10px 0px;
    list-style: none;
    float: left;
}
.mainmenuslide li.back {
    background: #A4D3EE;
    width: 9px;
    height: 30px;
    padding: 0px 0 22px 0;
    z-index: 1;
    margin: -12px 0 0 8px;
    position: absolute;
}
.mainmenuslide li.back .left {
    background: #A4D3EE;
    padding: 0px 0 22px 0;
    height: 30px;
    margin-right: 24px;
}
.mainmenuslide li a {
    font: bold 14px arial;
    z-index: 2;
    float: left;
    height: 30px;
    position: relative;
    margin: auto 10px;
    outline: none;
}

JavaScript

$(function () {
    $("ul").mainmenuslide({
        fx: "backout",
        speed: 700,
        click: function (event, menuItem) {
            return true;
        }
    });
});

/*
 * jQuery Easing v1.1 - http://gsgd.co.uk/sandbox/jquery.easing.php
 *
 * Uses the built in easing capabilities added in jQuery 1.1
 * to offer multiple easing options
 *
 * Copyright (c) 2007 George Smith
 * Licensed under the MIT License:
 *   http://www.opensource.org/licenses/mit-license.php
 */
jQuery.easing = {
    easein: function (x, t, b, c, d) {
        return c * (t /= d) * t + b
    },
    easeinout: function (x, t, b, c, d) {
        if (t < d / 2) return 2 * c * t * t / (d * d) + b;
        var a = t - d / 2;
        return -2 * c * a * a / (d * d) + 2 * c * a / d + c / 2 + b
    },
    easeout: function (x, t, b, c, d) {
        return -c * t * t / (d * d) + 2 * c * t / d + b
    },
    expoin: function (x, t, b, c, d) {
        var a = 1;
        if (c < 0) {
            a *= -1;
            c *= -1
        }
        return a * (Math.exp(Math.log(c) / d * t)) + b
    },
    expoout: function (x, t, b, c, d) {
        var a = 1;
        if (c < 0) {
            a *= -1;
            c *= -1
        }
        return a * (-Math.exp(-Math.log(c) / d * (t - d)) + c + 1) + b
    },
    expoinout: function (x, t, b, c, d) {
        var a = 1;
        if (c < 0) {
            a *= -1;
            c *= -1
        }
        if (t < d / 2) return a * (Math.exp(Math.log(c / 2) / (d / 2) * t)) + b;
        return a * (-Math.exp(-2 * Math.log(c / 2) / d * (t - d)) + c + 1) + b
    },
    bouncein: function (x, t, b, c, d) {
        return c - jQuery.easing['bounceout'](x, d - t, 0, c, d) + b
    },
    bounceout: function (x, t, b, c, d) {
        if ((t /= d) < (1 / 2.75)) {
            return c * (7.5625 * t * t) + b
        } else if (t < (2 / 2.75)) {
            return c * (7.5625 * (t -= (1.5 / 2.75)) * t + .75) + b
        } else if (t < (2.5 / 2.75)) {
            return c *...