JSFiddle - React, Tailwind, and code Playground

by Oliver Kelso

HTML

<a href="http://google.com" class="link-1" id="GoogleLink">The First Link</a>
<br />
<a href="http://yahoo.com" class="link-2" id="YahooLink">The Second Link</a>
<br />
<br />
<br />
<span id="showClass" class="result">Name That Class!</span>
<br />
<span id="showText" class="result">Show Me The Link!</span>
<br />
<span id="showHref" class="result">Get Me That Href!</span>
<br />
<span id="showId" class="result">Bring on the ID!</span>

CSS

*{font-family:helvetica;}
a{color:#000;font-weight:bold;}
.result{font-size:50px;font-weight:bold;color:red;}

JavaScript

$('a').click(function(e){
    e.preventDefault();
    
    var linkClass = $(this).attr("class");
    var linkText = $(this).text();
    var linkHref = $(this).attr('href');
    var linkId = $(this).attr('id');
    
    $('#showClass').hide().html(linkClass).fadeIn("slow");
    $('#showText').hide().html(linkText).fadeIn("slow");
    $('#showHref').hide().html(linkHref).fadeIn("slow");
    $('#showId').hide().html(linkId).fadeIn("slow");

});