JSFiddle - React, Tailwind, and code Playground

HTML

<div class="navbar-header">
        <div class="navbar-brand">
            <a href="/main" class="logo_1 logo">Logo</a>
        </div>
    </div>

CSS

.logo {font-family:Arial, sans-serif;font-size:20px;text-decoration;none;transition:all 0.3s}
.logo_1 {color:red;}
.logo_2 {color:blue;}
.logo_3 {color:green;}
.logo_4 {color:pink;}
.logo_5 {color:gray;}

JavaScript

var logoNumber = 1;

$('.logo').mouseleave(function(){
    var $this = $(this).removeClass('logo_' + logoNumber);
    logoNumber++;
    if(logoNumber > 5) logoNumber = 1;
    $this.addClass('logo_' + logoNumber);
})