JSFiddle - React, Tailwind, and code Playground

HTML

<button class="btn fadetoggle">fadeToggle</button>

<button class="btn toggle">toggle</button>

<button class="btn show">show</button>

<button class="btn hide red">hide</button>




<section class="text"><div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti quaerat, sit nihil tempore autem aliquid vel sequi molestias adipisci repellat consequatur ad odit aspernatur. Voluptatibus accusantium libero sed natus cum.</div>
<div>Voluptates vitae corporis, ex blanditiis iure iusto, eaque aliquam, libero quas, exercitationem ipsam nulla temporibus. Voluptatum dolorum molestias maxime, voluptatem fuga ab nam quasi odio architecto et, repellendus ex porro.</div>
<div>Nesciunt dolores eum obcaecati alias perspiciatis error, dolorem dignissimos voluptatibus, eius, perferendis suscipit quos itaque! Eligendi repudiandae omnis, exercitationem possimus, natus iure voluptate reprehenderit necessitatibus autem eos eveniet culpa rerum.</div>
<div>Consectetur natus vero modi eveniet, maxime repudiandae! Illo esse quidem voluptatem, fuga. Temporibus quos similique eum aliquam nihil illum minus praesentium ipsum, facere vel magnam totam dolore consequuntur cupiditate expedita.</div>
<div>Nesciunt quidem, iusto quis deserunt debitis ut, itaque provident voluptates illum ea nisi molestiae similique quas consequatur consequuntur quia ratione laudantium illo porro, vitae voluptatibus libero consectetur eligendi vel. Commodi!</div>
<div>Dolorum blanditiis, omnis non libero suscipit deserunt facilis consequatur repellat odit. Pariatur laborum earum, quod ut in doloribus molestias, nam officia ab impedit consectetur? Suscipit, tempore mollitia rem laudantium vero.</div>
<div>Deserunt itaque, assumenda asperiores nemo unde neque, eaque dolore eius reiciendis, odit quo nam? Sint laborum laudantium aliquam, optio ab maiores et dolorem, modi sequi suscipit fugit est? Voluptatibus, nihil.</div>
<div>Ipsam odit quisquam animi fuga, magni obcaecati voluptatum reprehenderit...

CSS

html, body {
  width: 100%;
  height: 100%;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.text {
  background: rgb(34 248 0 / 24%);
  padding: 5px;
  margin: 5px;
  border-radius: 9px;
  font-family: sans-serif;
  font-size: 17px;
  display: none;
}

.btn {
  padding: 8px 30px;
  background: blue;
  color: white;
  border: none;
  border-radius: 9px;
  cursor: pointer;
}
.red {
  background: red;
}

JavaScript

$('.fadetoggle').click(function(){
	$('.text').fadeToggle();
});

$('.toggle').click(function(){
	$('.text').toggle('slow');
});

$('.show').click(function(){
	$('.text').show(500);
});

$('.hide').click(function(){
	$('.text').hide(2000);
});