JSFiddle - React, Tailwind, and code Playground

by MarkKramer

HTML

<a class="bid-addwatchlist add-logout" href="/users/login">
    <span style="font-size: 32px; line-height: 18px;">+</span>
    <span style="font-size: 14px; float: left;">Add to watchlist</span>
</a>

CSS

.bid-addwatchlist{
    background-color : #32679B;
    border-radius : 5px 5px 5px 5px;
    color : #FFFFFF;
    cursor : pointer;
    float : left;
    height : 56px;
    line-height : 14px;
    padding-top : 4px;
    text-decoration : none;
    width : 76px;
    margin-left : 11px;
}

JavaScript

$(function() {
    var newHTML = '<span style="font-size: 1.7em; text-align:center; line-height:50px;">Login</span>';
    var oldHTML = '<span style="font-size: 32px; line-height: 18px;">+</span><span style="font-size: 14px; float: left;">Add to watchlist</span>';
    
    // on mouse over
    $("a.bid-addwatchlist").hover(
    function () {
        (this).innerHTML = newHTML;
    },
    // on mouse out
    function () {
        (this).innerHTML = oldHTML;
    });
});