Transcription Dashboard Interface - Copy this Html, Tailwind Component to your project

###-Real-time-Transcription-Page-UI-Prompt-####-General-Layout---A-clean,-responsive-interface-with-focus-on-clarity-and-usability.---Ensure-the-page-works-seamlessly-on-both-desktop-and-mobile-devices.-----####-**Page-Structure**-1.-**Header-Section**:---**Logo**:-Top-left-corner-for-branding.---**Navigation**:-Links/buttons-for-other-sections-like-Dashboard,-Resume-Optimization,-and-Logout-(if-applicable).---**Dark-Mode-Toggle**:-Top-right-corner-for-user-accessibility.-2.-**Main-Content-Area**:---**Meeting-Integration-Panel**:---A-modal-or-inline-card-requesting-permissions-for-screen-and-audio-sharing-via-WebRTC.---Clear-instructions-or-tooltips-to-help-the-user-enable-permissions-for-Zoom,-Google-Meet,-or-Teams.---A-"Start-Transcription"-button-to-initiate-audio-capture-and-processing.---**Real-time-Transcription-Display**:---A-large,-scrollable-text-box-displaying-the-transcription-in-real-time.---**Features**:---Highlighted-questions-or-key-phrases-from-the-interviewer.---Speaker-labels-(e.g.,-"Interviewer"-and-"Candidate")-with-distinct-colors-for-differentiation.---Time-stamped-entries-for-easy-navigation.---Word-confidence-markers-(optional,-based-on-API-data).---**Control-Panel**:---Buttons-for-controlling-the-transcription:---**Start/Stop-Transcription**.---**Pause/Resume-Transcription**.---**Download-Transcript**:-Export-options-(PDF,-DOCX,-or-plain-text).---Indicators-for-connection-status-(e.g.,-"Connected-to-Deepgram-API").---Language-selection-dropdown-to-support-multiple-languages.---**Assistant-Sidebar**-(Optional):---A-collapsible-sidebar-showing-AI-generated-answer-suggestions-for-questions-in-the-transcript.---Quick-actions-to-"Copy"-or-"Edit"-AI-suggestions.-3.-**Footer-Section**:---**Help/FAQ-Link**:-Redirects-to-a-page-or-modal-explaining-the-transcription-process-and-troubleshooting-tips.---**Privacy-Notice**:-A-small-text-link-informing-users-about-data-usage-and-privacy.-----####-**User-Interactions**-1.-**First-Time-Use-Flow**:---**Step-1**:-User-is-greeted-with-a-modal-explaining-the-feature-and-asking-for-permissions-for-screen/audio-sharing.---**Step-2**:-After-granting-permissions,-the-"Start-Transcription"-button-becomes-active.---**Step-3**:-Once-transcription-starts,-the-real-time-display-area-updates-dynamically.-2.-**Ongoing-Transcription**:---**Real-time-Updates**:-New-text-appears-smoothly-without-disrupting-the-user’s-focus.---**Highlighting**:-Automatically-emphasize-questions-as-they-are-detected.-3.-**Error-Handling**:---If-permissions-are-not-granted:-Show-a-clear-error-message-with-troubleshooting-steps.---If-the-API-connection-fails:-Display-a-retry-button-and-detailed-error-logs.-----####-**Color-Scheme-and-Style**---**Primary-Colors**:---Light-mode:-White-background-with-blue-highlights.---Dark-mode:-Dark-gray-background-with-soft-teal-highlights.---**Font**:-Clean,-sans-serif-fonts-like-Inter-or-Roboto.---**Text-Formatting**:---Interviewer’s-text:-Bold-and-slightly-larger-font.---Candidate’s-text:-Regular-font-weight.---Time-stamps:-Smaller,-muted-text.