JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>In Memoriam — Robert S. Mueller III (1944–2026)</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500&family=Inter:wght@300;400;500&display=swap" rel="stylesheet">
  <style>
    *, *::before, *::after {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    :root {
      --black: #0a0a0a;
      --dark: #1a1a1a;
      --charcoal: #2a2a2a;
      --gray: #6b6b6b;
      --silver: #999;
      --light: #c8c8c8;
      --off-white: #e8e4df;
      --cream: #f5f2ed;
      --gold: #b8a88a;
      --gold-dim: #8a7d68;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      font-family: 'Inter', sans-serif;
      background-color: var(--black);
      color: var(--light);
      line-height: 1.7;
      overflow-x: hidden;
    }

    /* ===== Candle Flicker Animation ===== */
    @keyframes flicker {
      0%, 100% { opacity: 1; text-shadow: 0 0 10px #b8a88a55, 0 0 20px #b8a88a33; }
      25% { opacity: 0.9; text-shadow: 0 0 8px #b8a88a44, 0 0 16px #b8a88a22; }
      50% { opacity: 1; text-shadow: 0 0 12px #b8a88a66, 0 0 24px #b8a88a44; }
      75% { opacity: 0.95; text-shadow: 0 0 9px #b8a88a55, 0 0 18px #b8a88a33; }
    }

    @keyframes fadeInUp {
      from { opacity: 0; transform: translateY(30px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    @keyframes slowPulse {
      0%, 100% { opacity: 0.3; }
      50% { opacity: 0.6; }
    }

    /* ===== Hero Section ===== */
    .hero {
      position: relative;
     ...