JSFiddle - React, Tailwind, and code Playground

by jtbowden

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.18/themes/base/jquery-ui.css">
<a class="np-button" href="#">Name Price</a>
<a class="login-button" style="display: none" href="#">Login</a>

CSS

.np-button, .login-button {
    width: 140px;        
}

JavaScript

$(function() {
    $(".np-button").button();
    $(".login-button").button();

    $("body").on('mouseenter', '.np-button, .login-button', function() {
        $('.np-button').hide();
        $('.login-button').show();
    }).on('mouseleave', '.np-button, .login-button', function() {
        $('.np-button').show();
        $('.login-button').hide();
    });
});