Transcript Editor - Copy this React, Tailwind Component to your project

The goal of this project is to create a user friendly transcript editor using React and Tailwind CSS. The editor allows users to interact with a transcript, where each word has a specified start time and duration for playback. Check the screens at the end to get more clarity) Key Features 1. Transcript Loading: Each word in the transcript comes with metadata, specifically: Start Time: Indicates when the word playback should begin. Duration: Specifies how long the word will be highlighted during playback. Editing Capabilities: Users can edit the text of any word within the transcript. Word deletions are not allowed, ensuring the integrity of the transcript. 2 Playback Functionality: A play button initiates the sequential highlighting of each word. For example, if the sequence starts at time t=0, the word "Hello" will be highlighted because it has a start time of 0 ms and a duration of 500 ms. As the sequence progresses to t=500 ms, the word "world" will be highlighted next, followed by "This" at t=1200 ms, and so on. This real time highlighting provides a visual representation of the words as they are being played back. Example: Imagine the transcript contains the following words with their respective start times and durations: "Hello" (start_time: 0 ms, duration: 500 ms) "world" (start_time: 500 ms, duration: 700 ms) "This" (start_time: 1200 ms, duration: 300 ms) When the user presses the play button: 1) At time t=0 ms, "Hello" will be highlighted. 2) At time t=500 ms, "world" will be highlighted. 3) At time t=1200 ms, "This" will be highlighted. Users can also click on any word to edit its text, but they cannot delete words, ensuring the transcript remains intact.