Dark Timeline Editor - Copy this Html, Tailwind Component to your project

The Timeline Composition Interface serves as the heart of the media server control system, featuring a professional grade multi track timeline editor. The interface adopts a dark theme optimized for low light control room environments, with high contrast accent colors for critical elements. The main timeline area dominates the lower 60% of the screen, featuring multiple layers organized in tracks similar to professional video editing software. Each track represents different types of content (NDI streams, video files, still images, timer overlays) with distinct visual identifiers. The timeline supports multiple time formats (SMPTE timecode, real time clock, frames) with user switchable views. Content blocks within tracks are represented by thumbnails with waveform overlays for audio containing media. Each block can be precisely trimmed, scaled, and positioned with frame accurate control. Properties such as opacity, scaling, and rotation can be keyframed directly on the timeline, with bezier curve handling for smooth transitions. Above the timeline, a comprehensive preview window shows the composed output with safe areas, pixel perfect positioning grids, and real time content alignment tools. Multiple preview layouts are available: Program/Preview style for live switching, comprehensive multi viewer for all outputs, and individual output monitoring. The interface features a collapsed mini timeline view that can be expanded for detailed editing, allowing operators to maintain playback control while working on composition. Critical timing points can be marked with cue points, supporting both automatic and manual triggering modes.