JSFiddle - React, Tailwind, and code Playground

by krish reddy

HTML

<ul id="explore">
    <li>Nurseries</li>
    <li>Reports</li>
    <li>Development</li>
    <li>Testimonials</li>
    <li>History</li>
</ul>

JavaScript

$(document).ready(function () {
    var color = ['#039', '#000', '#C6C', '#093', '#F93'];
    
    $('#explore li').each(function (i) {
        $(this).css('color', color[i]).data('color', color[i])
    }).hover(function () {
        $(this).css({
            backgroundColor: $(this).data('color'),
            color: "white"
        })
    }, function () {
        $(this).css({
            color: $(this).data('color'),
            backgroundColor: "white"
        })
    });
});

$(document).ready(function(){
	var color = ['#00f', "#028183", '#c8d938', ]
});