JSFiddle - React, Tailwind, and code Playground

by vonDy2791

HTML

<div> <a href="javascript:void{0};">Click Me!</a>

</div>
<div style="display:none;"> <span id="first">Hi</span>
 <span class="mylabs">Mylabs, <br/></span>
 <span class="vr" Title="Vond Ritz M. Cagampan"><a href="javascript:void{0};">I</a></span>
 <span class="vr love">
     <img class="heart" src="http://cdn1.iconfinder.com/data/icons/phuzion/PNG/Misc/Fav%20%28Heart%29.png"/>
     <b>Love</b>     <img class="heart" src="http://cdn1.iconfinder.com/data/icons/phuzion/PNG/Misc/Fav%20%28Heart%29.png"/></span>
 <span class="vr" Title="Tricia Marie P. Ng"><a href="javascript:void{0};">You</a>
     
    </span>
<span><div style="margin-top:10px;">I'm sorry na.</div></span>
</div>

CSS

body {
    font-family : Calibri;
    font-size: 77px;
}
span {
    padding : 10px;
}
span.vr {
    font-weight:bolder;
    color:red;
}
span.vr a {
    color:red;
}
span.vr a:hover {
    color:gold;
}
span.mylabs {
    font-style:italic;
}
img.heart
{
     height:50px;
     width:50px;
}

JavaScript

$('span').hide();
var anSpd = 1000;
$('div:first a').on('click', function () {
    $(this)
        .stop()
        .parent()
        .fadeOut(anSpd)
        .next('div')
        .show(anSpd)
        .children('span:first')
        .fadeIn(anSpd, function TmShowNext() {
        $(this).next('span').fadeIn(anSpd, TmShowNext);
    });
});
$('span.vr a').on('click', function () {
    var temp = $(this).html();
    $(this).html($(this).parent('span.vr').attr('Title'));
    $(this).parent('span.vr').attr('Title', temp);
    if (temp === 'I') $('span.love b').html('Loves');
    if (temp === 'Vond Ritz M. Cagampan') $('span.love b').html('Love');
});