JSFiddle - React, Tailwind, and code Playground

by hlim188

HTML

<!DOCTYPE html>
<html lang="en">
<head>
   <!-- Required meta tags -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap 4.1.x -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- <link rel="stylesheet" type="text/css" href="style.css"> -->

    <!-- Bootstrap 4.0 : jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>

    <script type="text/javascript" src="script.js"></script>

</head>
<body>
  
  <p id="test">Press this!</p>


<div id="tutorialPages">
  <p id="tutorialFirst">This is 1st sentence.</p>
  <p id="tutorialSecond">This is 2nd sentence.</p>
  <p id="tutorialThird">This is 3rd sentence.</p>
  <p id="tutorialFourth">This is 4th sentence.</p>
</div>

</body>

CSS

/* #tutorialPages{
  display: none; 
}  
 */
#tutorialGreen{
  color:black;
  font-weight: bold;
  font-size: 30px;
}

JavaScript

$(document).ready(function(){

	$("#tutorialFirst").hide();
  $("#tutorialSecond").hide();
	$("#tutorialThird").hide();
	$("#tutorialFourth").hide();

  $('#test').click(function(){
    $("#tutorialFirst").fadeIn();
  });
  
  $('#tutorialFirst').click(function(){
    $("#tutorialSecond").fadeIn();
  });
  
  $('#tutorialSecond').click(function(){
    $("#tutorialThird").fadeIn();
  });
  
  $('#tutorialThird').click(function(){
    $("#tutorialFourth").fadeIn();
  });
  
});