JSFiddle - React, Tailwind, and code Playground

by trewknowledge

HTML

<ul>
<li><a href="#" data-title="John Doe's Title" data-image="http://placehold.it/350x150">John Doe</a></li>
<li><a href="#" data-title="Jane Smith's Title" data-image="http://placehold.it/350x150">Jane Smith</a></li><li>
</li>
</ul>

<div id="profile"></div>

CSS

#profile {
    background:#000;
    color:#fff;
}

JavaScript

$('ul li a').hover(function () { 
    $('#profile').html('<p class="name">' + $(this).text() + '</p><p class="title">' + $(this).data("title") + '</p>' + '<img src="'+ $(this).data("image") + '" alt="'+ $(this).text() +'" />');
});