JSFiddle - React, Tailwind, and code Playground

by Riccal

HTML

<div class="codropsmenu1" id="menu">
    <ul>
        
        <li><a href=""><span>Home</span></a></li>
        <li><a href=""><span>About</span></a></li>
        <li><a href=""><span>Portfolio</span></a></li>
        <li><a href=""><span>Contact</span></a></li>
        <li><a href=""><span>Support</span></a></li>
        <li><a href="" class="last"><span>Login</span></a></li>
    </ul>
</div>

CSS

.codropsmenu1{
    padding:3px;
    height:30px;
    background-color:#282828;
}
.codropsmenu1 ul{
    list-style:none;
    margin:0px;
    padding:0px;
}
.codropsmenu1 ul li{
    display:inline;
    position:relative;
}
.codropsmenu1 ul li a{
    float:left;
    height:28px;
    line-height:30px;
    text-align:center;
    text-decoration:none;
    display:block;
    background-color:#282828;
    font-size:12px;
    color:#DDDFDF;
    text-shadow: 0 1px 0 #000000;
    border-right:1px solid #000;
    border-left:1px solid #404040;
    border-top:1px solid #282828;
    border-bottom:1px solid #282828;
    outline:none;
    cursor:pointer;
    overflow:hidden;
}
.codropsmenu1 ul li a.last{
    border-right:1px solid #282828;
}
.codropsmenu1 ul li a.first{
    border-left:1px solid #282828;
}
.codropsmenu1 ul li a:hover,
.codropsmenu1 ul li a.selected{
    background-color:#404040;
    border-top:1px solid #111;
    border-bottom:1px solid #111;
    color:#fff;
}
html,body {
    width:100%;
}

JavaScript

$(function() {
    $.fn.extend({
        "MenuResize": function(args) {
            return this.each(function() {
                var elem = $(this);
                var resizeThis = function() {
                    var parentWidth = elem.parent().width();
                    var menuItems = elem.children("ul").children("li").size();
                    var itemWidth = (parentWidth/menuItems)-2;
                    elem.css({"width": parentWidth+"px"});
                    elem.find("ul > li >a").css({"width": itemWidth+"px"});
                };          
resizeThis();                                     
                $(window).resize(function() { resizeThis(); });
            });
        }
    });
$("#menu").MenuResize();     
});