JSFiddle - React, Tailwind, and code Playground

by Palpatim

HTML

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
</ul>
<button>Click</button>
<div id="output"></div>

CSS

button {
    width: 25%;
    margin: 2rem auto;
    display: block;
    font-size: 1rem;
}
#output {
    opacity: 0;
    box-sizing: content-box;
    width: 50%;
    margin: auto;
    text-align: center;
    padding: 1rem;
    border: 1px solid #999;
    transition-duration: .5s;
    transition-property: box-shadow, border-width, border-color, opacity;
}
#output.toggle {
    opacity: 1;
    box-shadow: inset 0 0 2px 1px #9f9;
    border: 1px solid transparent;
}

JavaScript

$('button').click(function () {
    var text = $('ul li:nth-child(3)').text();
    $('#output').html(text);
    $('#output').toggleClass('toggle');
});