JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Stowarzyszenie STOP SCRUM - Alarmujące Dane</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <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=Inter:wght@400;700;900&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Inter', sans-serif;
            background-color: #111827; /* bg-gray-900 */
        }
        .text-shadow {
            text-shadow: 1px 1px 3px rgba(0,0,0,0.4);
        }
        .card {
            background-color: rgba(31, 41, 55, 0.5); /* bg-gray-800 with opacity */
            border: 1px solid rgba(239, 68, 68, 0.3); /* border-red-500 with opacity */
            backdrop-filter: blur(5px);
        }
    </style>
</head>
<body class="text-gray-200 flex items-center justify-center min-h-screen p-4">

    <div class="w-full max-w-5xl mx-auto">
        
        <!-- Nagłówek -->
        <header class="text-center mb-8">
            <div class="flex justify-center items-center gap-3 mb-2">
                <!-- Logo -->
                <svg class="w-8 h-8 text-red-500" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM17 15.59L15.59 17L12 13.41L8.41 17L7 15.59L10.59 12L7 8.41L8.41 7L12 10.59L15.59 7L17 8.41L13.41 12L17 15.59Z" fill="currentColor"/>
                </svg>
                <h1 class="text-xl md:text-2xl font-bold tracking-wider uppercase">Stowarzyszenie STOP SCRUM</h1>
            </div>
            <p class="text-lg text-red-400 font-semibold">Oficjalny Raport o Stanie Zespołów Deweloperskich</p>
        </header>

...