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: 600px; 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 15px 0; text-transform: uppercase; letter-spacing: -0.5px;">
            404: Evidence Missing
        </h1>
        
        <!-- 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 style="color: #ffffff; font-size: 13px; font-weight: bold; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px;">
                Recommended Forensic Actions:
            </div>
            <ul style="color: #bbbbbb; font-size: 13px; padding-left: 20px; margin: 0; line-height: 1.6;">
                <li style="margin-bottom: 5px;">Re-examine the URL path in the navigation header bar for structural typographical errors.</li>
                <li style="margin-bottom:...