JSFiddle - React, Tailwind, and code Playground

by Petr Haluza

HTML

<div class="container">
        <!-- Pokud máš logo, lze zde vložit (zatím skrytý řádek) -->
        <!-- <img class="logo" src="logo-hal3000.png" alt="HAL3000 logo"> -->

        <h1>HAL3000 – Hraj jako vítěz!</h1>
        <div class="subtitle">O nás</div>

        <p>
            Jsme český výrobce počítačů, které pro vás vyrábíme v Brně. Nabízíme pečlivě vyladěné sestavy pro herní nadšence, streamery i progamery. Dále i kancelářské PC, výkonné pracovní stanice nebo domácí sestavy, které bez problémů zvládnou školu i zábavu.
        </p>
        <p>
            Tým HAL3000 má k počítačům blízko – ať už jako hráči, technici nebo geekové. Moc dobře víme, na co se zaměřit a přizpůsobujeme tomu výběr komponent. Každou konfiguraci pečlivě ladíme a testujeme. Za více než 20 let jsme vyrobili přes 200 000 počítačů a to ve více jak 7 000 různých konfiguracích.
        </p>
        <p>
            Podporujeme e-sport v Česku už od jeho začátků. Od roku 2011 jsme generálním partnerem Mistrovství ČR v počítačových hrách. Spolupracujeme s řadou známých influencerů a přinášíme svým fanouškům na sociálních mediích spoustu zábavy, zajímavých informací ze světa hardware, ale i soutěží, produktových novinek a výhodných akcí.
        </p>

        <h2>HAL3000 ve zkratce:</h2>
        <div class="highlights">
            <ul>
                <li>🖥️ Vyrábíme v Česku – konkrétně v Brně.</li>
                <li>🎮 Dlouhodobě podporujeme český esport – od roku 2011 jsme generálním partnerem Mistrovství ČR v počítačových hrách.</li>
                <li>🛠️ Vyrobili jsme přes 200 000 počítačů.</li>
                <li>🤝 Spolupracujeme s mnoha influencery, kteří na našich počítačích hrají, streamují a tvoří obsah.</li>
            </ul>
        </div>

        <h2>Stručně z naší historie:</h2>
        <div class="history">
            <ul>
                <li>2002 – Vznik značky HAL3000</li>
                <li>2004 - Dosáhli jsme 10.000 vyrobených počítačů...

CSS

body {
            background: #f6f7fa;
            font-family: 'Segoe UI', Arial, sans-serif;
            margin: 0;
            padding: 0;
            color: #222;
        }
        .container {
            max-width: 750px;
            margin: 40px auto;
            background: #fff;
            border-radius: 12px;
            box-shadow: 0 0 16px rgba(0,0,0,0.04);
            padding: 32px 24px;
        }
        h1 {
            color: #d6002a;
            font-size: 2.2em;
            margin-top: 0;
            margin-bottom: 8px;
            text-align: center;
        }
        .subtitle {
            font-size: 1.1em;
            color: #333;
            font-weight: 600;
            margin-bottom: 24px;
            text-align: center;
        }
        p {
            line-height: 1.7;
            margin: 18px 0;
        }
        h2 {
            color: #d6002a;
            margin-top: 36px;
        }
        ul, ol {
            margin-left: 1.3em;
            margin-top: 10px;
            margin-bottom: 10px;
        }
        li {
            margin: 8px 0;
        }
        @media(max-width:600px){
            .container {padding: 10px;}
        }
        .logo {
            display: block;
            margin: 0 auto 24px;
            max-width: 160px;
        }
        .history {
            background: #f7f1f1;
            padding: 16px 14px;
            border-radius: 8px;
        }
        .highlights {
            background: #f1f7f3;
            padding: 16px 14px;
            border-radius: 8px;
        }