JSFiddle - React, Tailwind, and code Playground

by gustavox

HTML

<div id="slide" align="center">
<ul>
<li id="frame"><div></div><div class="text"><a href="#"><h1>Título 1</h1></a><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ornare neque ante. Duis eget nisl eget lacus gravida laoreet vel id ipsum. Pellentesque consectetur pellentesque nisi at tincidunt. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In lorem neque, lacinia ut leo eget, imperdiet iaculis risus. Cras posuere fringilla arcu, ac auctor tortor varius ut.</p></div></li>

<li id="frame2"><div></div><div class="text2"><a href="#"><h1>Título 2</h1></a><p>Sed quis nibh ultrices dolor lobortis facilisis sed mattis enim. Proin a arcu elementum, rhoncus enim in, lacinia est. Aliquam erat volutpat. Fusce ut mollis ipsum. Nunc eleifend libero vitae neque vulputate scelerisque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut volutpat quis nibh nec elementum.</p></div></li>

<li id="frame3"><div></div><div class="text3"><a href="#"><h1>Título 3 </h1></a><p>Etiam imperdiet felis in cursus tempus. Sed finibus accumsan tellus et porta. Vivamus a pretium neque. Nam eu arcu ac massa hendrerit pharetra vitae ut libero. Nulla posuere vulputate aliquam. Nunc non elit lacus. Mauris vulputate tellus ac ullamcorper cursus. Aliquam ullamcorper velit tempus, tristique ligula id, pellentesque justo. Sed quis vehicula ex, et tristique dui. In eleifend vel dui eget gravida. Aenean vitae egestas risus. Nam vel quam auctor, ultricies tortor eget, sodales purus.</p></div></li>
</ul>

<ul>
<a href="#"><button id="button1">título 1</button></a>
<a href="#"><button id="button2">título 2</button></a>
<a href="#"><button id="button3">título 3</button></a>
</ul>
</div>

JavaScript

$(document).ready(function(){
        $("#frame2").hide();
        $("#frame3").hide();
        });

        $( "#button1" ).click(function slide1() {
        $( "#frame" ).fadeIn(5000);
        $("#frame2").hide();
        $("#frame3").hide();
            });

        $( "#button2" ).click(function slide2() {
        $( "#frame2" ).fadeIn (5000);
        $("#frame").hide();
        $("#frame3").hide();
            });

        $( "#button3" ).click(function slide3() {
        $( "#frame3" ).fadeIn(5000);
        $("#frame2").hide();
        $("#frame").hide();
            });