JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rawgit.com/Hagsten/Talkify/master/dist/talkify.min.js"></script>
<link rel="stylesheet" href="https://rawgit.com/Hagsten/Talkify/master/dist/styles/talkify-common.css">
<link rel="stylesheet" href="https://rawgit.com/Hagsten/Talkify/master/dist/styles/talkify-playlist.css">
<link rel="stylesheet" href="https://rawgit.com/Hagsten/Talkify/master/dist/styles/colors.css">
<link rel="stylesheet" href="https://rawgit.com/Hagsten/Talkify/master/dist/styles/modern-control-center/colors.css">
<link rel="stylesheet" href="https://rawgit.com/Hagsten/Talkify/master/dist/styles/modern-control-center/main.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css">

<section id="root">
  <h3>
      Please click me if the demo does not load automatically
  </h3>
  <p>
    This is a short demo of the feature "Enhanced text visibility" in Talkify. This feature adds a subtitle bar at the bottom of the screen, with an increased font size. This enables the user to focus on the current text.
  </p>
</section>

JavaScript

talkify.config.remoteService.host = 'https://talkify.net';
talkify.config.remoteService.apiKey = '46b32f4e-6b73-40ee-8ae1-4a17cb1b18f6';

talkify.config.ui.audioControls.enabled = true; //<-- Disable to get the browser built in audio controls
talkify.config.ui.audioControls.voicepicker.enabled = true;
talkify.config.ui.audioControls.container = document.getElementById("player-and-voices");
  
$(document).ready(function() {
  var player = new talkify.TtsPlayer()
    .enableTextHighlighting()    
    .forceVoice({name: "Zira"});
    
  player.enableEnhancedTextVisibility();

  var playlist = new talkify.playlist()
    .begin()
    .usingPlayer(player)
    .withRootSelector('#root')
    .withTextInteraction()
    .build();
  
  playlist.play();
});