JSFiddle - React, Tailwind, and code Playground

HTML

<script src='https://code.responsivevoice.org/responsivevoice.js'></script>

<div class="container">

    <p id="intro">Welcome to our tutorial with speech enabled to better assist you. Please click the play step 1 button to begin. The problem is I'd like to show step #1 after this is finished playing.</p>

    <h1>Tutorial with Speech</h1>

    <div id="step1">
      <p x-webkit-speech>This is step #1. There will be four total steps to resolve this problem for you. As you will see as you progress through the totorial, each step's text renders before the audio is finished playing.</p>
      <input class="stepButton" id="step1Button" onclick="responsiveVoice.speak($('#step1').text(), 'UK English Male', {pitch: .7});" type="button" value="🔊 Play Step 1" />
    </div>

    <div id="step2">
      <p x-webkit-speech>This is step #2. It can be a little complicated, but don't worry, we'll get you through it.</p>
      <input class="stepButton" id="step2Button" onclick="responsiveVoice.speak($('#step2').text(), 'UK English Male', {pitch: .7});" type="button" value="🔊 Play Step 2" />
    </div>

    <div id="step3">
      <p x-webkit-speech>This is step #3. You're almost done.</p>
      <input class="stepButton" id="step3Button" onclick="responsiveVoice.speak($('#step3').text(), 'UK English Male', {pitch: .7});" type="button" value="🔊 Play Step 3" />
    </div>

    <div id="step4">
      <p x-webkit-speech>You're finished, thank you for taking our tutorial!</p>
      <input class="stepButton" id="step3Button" onclick="responsiveVoice.speak($('#step4').text(), 'UK English Male', {pitch: .7});" type="button" value="🔊 You're Finished!" />
    </div>
  </div>

JavaScript

responsiveVoice.OnVoiceReady = function() {
      responsiveVoice.speak($('#intro').text());
    };

    $("#intro, #step2, #step3, #step4").hide();

    $("#step1").click(function(){
        $("#step2").show();
        $("#step1").hide();
    });

    $("#step2").click(function(){
        $("#step3").show();
        $("#step2").hide();
    });

    $("#step3").click(function(){
        $("#step4").show();
        $("#step3").hide();
    });