JSFiddle - React, Tailwind, and code Playground

by tomarriola

HTML

<div class="d-flex align-items-center justify-content-center" style="background-color: #191919; color: #ffffff; padding: 40px 20px; font-family: 'IBM Plex Sans', sans-serif; min-height: 500px; width: 100%; border-radius: 4px;">
    <div style="max-width: 800px; width: 100%; background-color: #111111; border-left: 6px solid #ffff00; padding: 30px; box-shadow: 0 4px 15px rgba(0,0,0,0.5);">
        
        <!-- Forensics Tag -->
        <div style="color: #ffff00; font-size: 11px; letter-spacing: 2px; font-weight: bold; margin-bottom: 10px; text-transform: uppercase;">
            Status: Chain of Custody Broken
        </div>
        
        <!-- Clinical Warning Header -->
        <h1 style="color: #ffffff; font-size: 28px; line-height: 1.2; font-weight: 800; margin: 0 0 20px 0; text-transform: uppercase; letter-spacing: -0.5px;">
            404: Evidence Missing
        </h1>

        <!-- Noir Detective Visual Header -->
        <div style="width: 100%; height: auto; max-height: 380px; overflow: hidden; border-radius: 3px; border: 1px solid #191919; margin-bottom: 25px; background-color: #0b0b0b;">
            <img src="https://d2ol7oe51mr4n9.cloudfront.net/user_3CbqJk3NCL4TJRkgEI5SMs2hpgf/2766cfaf-5648-4e9f-9941-038b0bad3d00.png" alt="Forensic Case File Missing Visual" style="width: 100%; height: auto; display: block; object-fit: cover;" />
        </div>
        
        <!-- Descriptive Body Copy -->
        <p style="color: #cccccc; font-size: 15px; line-height: 1.6; margin-bottom: 25px;">
            The dossier, file, or piece of metadata you attempted to retrieve is currently unavailable at this coordinates. It may have been cataloged under a different reference ID, moved to the cold case archive, or suppressed during active processing.
        </p>
        
        <!-- Forensic Investigation Steps -->
        <div style="background-color: #1a1a1a; padding: 15px; border-radius: 4px; margin-bottom: 30px;">
            <div...