JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
	<!--This interactive, animated prose/poem/text template was developed by Andy K. Tytler. 
	Feel free to use it, modify, and share it, but keep this credit in the code!
	The concept was inspired by Bogi Takács's poem "You Are Here," in the 24 November 2014 issue of _Strange Horizons_
	http://strangehorizons.com/poetry/you-are-here-reprint/ -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

	<script src="https://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	
    <title>Sample Hypertext Poem - LCIR 2020</title>
		
	<style type="text/css">
	
		div {
			width: 75%;
		}
		
		.italic {
			font-style: italic;
		}
		
		.absolute {
			position: absolute;
		 }
		.bottom {
		  position: absolute;
      bottom: 0;
		}
		a
			{
				color: #000000;
				text-decoration: underline;
				font-weight:bold;
			}
		
	</style>	
	<script>
			var poem_blockdelay = 500; // Millisecond delay for each word change
			var poem_blockcount = 15; // Highest count of animations
			var poem_animlength = 750; // Millisecond length of each fade in / out

			$('document').ready(function (){
			
				$('#section2').slideUp();
				$('#section3').slideUp();
				// If you want more sections, you'll have to add their ids here.
				
				$('.poem_section1').click(function (e){
						
						e.preventDefault();
						
						function animStart(){

							var deferred = $.Deferred();

							$('.poem_section1').animate({
								opacity: 0
							}); 
							
							$('.clear').css('clear','left');
							$('#section1').css('clear','none');
							
							$('#section1').slideDown(function(){
								deferred.resolve();
							});
							return deferred.promise;
						
						}
						
						function poemAnim(){
							
							var deferred =...