JSFiddle - React, Tailwind, and code Playground

by lollero

HTML

<ul id="menu">
    <li><a href="#">Lorem</a></li>
    <li><a href="#">Ipsum</a></li>
    <li><a href="#">Dolor</a></li>
    <li><a href="#">Sit</a></li>
    <li><a href="#">Amet</a></li>
</ul>

CSS

body {
    background: #c1c1c1;
    margin: 20px;
}

#menu {
    float: left;
    padding: 10px;
    box-shadow: 0px 0px 4px #777;
    border-radius: 3px;
    background: #f4f4f4;
    background: -moz-linear-gradient(top,  #f4f4f4 0%, #dddddd 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f4f4f4), color-stop(100%,#dddddd));
    background: -webkit-linear-gradient(top,  #f4f4f4 0%,#dddddd 100%);
    background: -o-linear-gradient(top,  #f4f4f4 0%,#dddddd 100%);
    background: -ms-linear-gradient(top,  #f4f4f4 0%,#dddddd 100%);
    background: linear-gradient(to bottom,  #f4f4f4 0%,#dddddd 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f4f4', endColorstr='#dddddd',GradientType=0 );
}

#menu li { float: left; }

#menu a {
    position: relative;
    float: left;
    color: #555;
    padding: 6px;
    font-family: Arial;
    text-decoration: none;
}

#menu .text {
    position: relative;
    z-index: 2;
}

#menu .highlight {
    position: absolute;
    z-index: 1;
    right: 5px;
    bottom: 5px;
    color: #fff;
}

JavaScript

$(document).ready(function() {
    $('#menu a').each(function() {
        
        var link = $(this),
            // Store the initial html for each 'a'.
            linkHTML = link.html();
        
        // Replaces html inside each 'a' with 2 versions of the same text, both in their own span elements.
        // CSS is used to position the elements in the right order/position.
        link.html( '<span class="text">'+ linkHTML +'</span> <span class="highlight">'+ linkHTML +'</span>' );
        
    });
});