<pre style="word-wrap: break-word; white-space: pre-wrap;">&lt;!DOCTYPE html&gt;
&lt;html lang="cs"&gt;
&lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  &lt;title&gt;Tailwind CSS - Advanced Triky&lt;/title&gt;
  &lt;script src="https://cdn.tailwindcss.com"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body class="p-8 bg-gray-50"&gt;
  &lt;h1 class="text-3xl font-bold mb-8"&gt;Tailwind CSS - Advanced Triky 🚀&lt;/h1&gt;

  &lt;!-- ============================================ --&gt;
  &lt;!-- #2 PEER SELEKTORY --&gt;
  &lt;!-- ============================================ --&gt;
  &lt;section class="mb-12 bg-white p-6 rounded-lg border-2 border-blue-200"&gt;
    &lt;h2 class="text-2xl font-bold mb-4 text-blue-700"&gt;#2 Peer selektory&lt;/h2&gt;
    &lt;p class="text-gray-600 mb-4"&gt;Sourozenec ovlivňuje sourozence&lt;/p&gt;
    &lt;div class="bg-gray-50 p-4 rounded mb-4"&gt;
      &lt;code class="text-sm"&gt;peer + peer-checked:class&lt;/code&gt;
    &lt;/div&gt;
    
    &lt;div class="mb-6"&gt;
      &lt;h3 class="font-semibold mb-3"&gt;Checkbox ovládá label&lt;/h3&gt;
      &lt;div class="flex items-center gap-3"&gt;
        &lt;input type="checkbox" id="check1" class="peer w-5 h-5" /&gt;
        &lt;label for="check1" class="peer-checked:text-blue-600 peer-checked:font-bold cursor-pointer"&gt;
          Zaškrtni checkbox → label se změní
        &lt;/label&gt;
      &lt;/div&gt;
    &lt;/div&gt;

    &lt;div class="mb-6"&gt;
      &lt;h3 class="font-semibold mb-3"&gt;Named peers (více peer prvků)&lt;/h3&gt;
      &lt;div class="space-y-3"&gt;
        &lt;div&gt;
          &lt;input type="radio" name="opt" id="opt1" class="peer/opt1 hidden" /&gt;
          &lt;label for="opt1" class="block p-3 border-2 border-gray-300 rounded cursor-pointer peer-checked/opt1:border-green-500 peer-checked/opt1:bg-green-50"&gt;
            Varianta 1
          &lt;/label&gt;
          &lt;div class="hidden peer-checked/opt1:block mt-2 p-3 bg-green-100 rounded"&gt;
            ✅ Obsah pro variantu 1
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div&gt;
          &lt;input type="radio" name="opt" id="opt2" class="peer/opt2 hidden" /&gt;
          &lt;label for="opt2" class="block p-3 border-2 border-gray-300 rounded cursor-pointer peer-checked/opt2:border-purple-500 peer-checked/opt2:bg-purple-50"&gt;
            Varianta 2
          &lt;/label&gt;
          &lt;div class="hidden peer-checked/opt2:block mt-2 p-3 bg-purple-100 rounded"&gt;
            ✅ Obsah pro variantu 2
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/section&gt;

  &lt;!-- ============================================ --&gt;
  &lt;!-- #4 MULTIPLE CONDITIONS --&gt;
  &lt;!-- ============================================ --&gt;
  &lt;section class="mb-12 bg-white p-6 rounded-lg border-2 border-green-200"&gt;
    &lt;h2 class="text-2xl font-bold mb-4 text-green-700"&gt;#4 Multiple conditions (AND)&lt;/h2&gt;
    &lt;p class="text-gray-600 mb-4"&gt;Několik podmínek musí platit zároveň&lt;/p&gt;
    &lt;div class="bg-gray-50 p-4 rounded mb-4"&gt;
      &lt;code class="text-sm"&gt;data-[active]:data-[type=premium]:bg-gold&lt;/code&gt;
    &lt;/div&gt;

    &lt;div class="mb-6"&gt;
      &lt;h3 class="font-semibold mb-3"&gt;Obě podmínky musí platit&lt;/h3&gt;
      &lt;div data-active data-type="premium" class="p-4 border-2 border-gray-300 data-[active]:data-[type=premium]:bg-yellow-100 data-[active]:data-[type=premium]:border-yellow-500 data-[active]:data-[type=premium]:font-bold"&gt;
        ✅ data-active + data-type="premium" → žluté pozadí
      &lt;/div&gt;
      &lt;div data-active class="p-4 mt-2 border-2 border-gray-300 data-[active]:data-[type=premium]:bg-yellow-100 data-[active]:data-[type=premium]:border-yellow-500"&gt;
        ❌ Jen data-active (chybí premium) → normální
      &lt;/div&gt;
      &lt;div data-type="premium" class="p-4 mt-2 border-2 border-gray-300 data-[active]:data-[type=premium]:bg-yellow-100 data-[active]:data-[type=premium]:border-yellow-500"&gt;
        ❌ Jen data-type="premium" (chybí active) → normální
      &lt;/div&gt;
    &lt;/div&gt;

    &lt;div class="mb-6"&gt;
      &lt;h3 class="font-semibold mb-3"&gt;Kombinace s hover a data atributem&lt;/h3&gt;
      &lt;button data-variant="danger" class="p-3 bg-red-500 text-white rounded hover:data-[variant=danger]:bg-red-700 hover:data-[variant=danger]:scale-105 transition"&gt;
        Hover + data-variant="danger" → tmavší a větší
      &lt;/button&gt;
    &lt;/div&gt;
  &lt;/section&gt;

  &lt;!-- ============================================ --&gt;
  &lt;!-- #5 NTH-CHILD SELEKTORY --&gt;
  &lt;!-- ============================================ --&gt;
  &lt;section class="mb-12 bg-white p-6 rounded-lg border-2 border-purple-200"&gt;
    &lt;h2 class="text-2xl font-bold mb-4 text-purple-700"&gt;#5 Nth-child selektory&lt;/h2&gt;
    &lt;p class="text-gray-600 mb-4"&gt;Stylování podle pozice v DOM&lt;/p&gt;
    &lt;div class="bg-gray-50 p-4 rounded mb-4"&gt;
      &lt;code class="text-sm"&gt;[&amp;&gt;*:nth-child(odd)]:bg-gray-100&lt;/code&gt;
    &lt;/div&gt;

    &lt;div class="mb-6"&gt;
      &lt;h3 class="font-semibold mb-3"&gt;Liché/sudé řádky (zebra pattern)&lt;/h3&gt;
      &lt;div class="[&amp;&gt;*:nth-child(odd)]:bg-gray-100 [&amp;&gt;*:nth-child(even)]:bg-white border-2 border-gray-300 rounded overflow-hidden"&gt;
        &lt;div class="p-3"&gt;Řádek 1 (lichý) - šedé pozadí&lt;/div&gt;
        &lt;div class="p-3"&gt;Řádek 2 (sudý) - bílé pozadí&lt;/div&gt;
        &lt;div class="p-3"&gt;Řádek 3 (lichý) - šedé pozadí&lt;/div&gt;
        &lt;div class="p-3"&gt;Řádek 4 (sudý) - bílé pozadí&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;

    &lt;div class="mb-6"&gt;
      &lt;h3 class="font-semibold mb-3"&gt;První a poslední prvek&lt;/h3&gt;
      &lt;div class="[&amp;&gt;*:first-child]:font-bold [&amp;&gt;*:first-child]:text-green-600 [&amp;&gt;*:last-child]:font-bold [&amp;&gt;*:last-child]:text-red-600 space-y-2"&gt;
        &lt;div class="p-3 border rounded"&gt;První prvek - zelený tučný&lt;/div&gt;
        &lt;div class="p-3 border rounded"&gt;Prostřední prvek - normální&lt;/div&gt;
        &lt;div class="p-3 border rounded"&gt;Poslední prvek - červený tučný&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;

    &lt;div class="mb-6"&gt;
      &lt;h3 class="font-semibold mb-3"&gt;Každý třetí prvek&lt;/h3&gt;
      &lt;div class="[&amp;&gt;*:nth-child(3n)]:bg-blue-100 [&amp;&gt;*:nth-child(3n)]:border-blue-500 space-y-2"&gt;
        &lt;div class="p-2 border-2 rounded"&gt;Prvek 1&lt;/div&gt;
        &lt;div class="p-2 border-2 rounded"&gt;Prvek 2&lt;/div&gt;
        &lt;div class="p-2 border-2 rounded"&gt;Prvek 3 - modrý (3n)&lt;/div&gt;
        &lt;div class="p-2 border-2 rounded"&gt;Prvek 4&lt;/div&gt;
        &lt;div class="p-2 border-2 rounded"&gt;Prvek 5&lt;/div&gt;
        &lt;div class="p-2 border-2 rounded"&gt;Prvek 6 - modrý (3n)&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;

    &lt;div class="mb-6"&gt;
      &lt;h3 class="font-semibold mb-3"&gt;Not last-child (margin mezi prvky)&lt;/h3&gt;
      &lt;div class="[&amp;&gt;*:not(:last-child)]:mb-4"&gt;
        &lt;div class="p-3 bg-gray-100 rounded"&gt;Prvek s marginem dole&lt;/div&gt;
        &lt;div class="p-3 bg-gray-100 rounded"&gt;Prvek s marginem dole&lt;/div&gt;
        &lt;div class="p-3 bg-gray-100 rounded"&gt;Poslední prvek BEZ marginu&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/section&gt;

  &lt;!-- ============================================ --&gt;
  &lt;!-- #6 BEFORE/AFTER --&gt;
  &lt;!-- ============================================ --&gt;
  &lt;section class="mb-12 bg-white p-6 rounded-lg border-2 border-orange-200"&gt;
    &lt;h2 class="text-2xl font-bold mb-4 text-orange-700"&gt;#6 Before/After pseudo-elementy&lt;/h2&gt;
    &lt;p class="text-gray-600 mb-4"&gt;Přidání obsahu bez HTML&lt;/p&gt;
    &lt;div class="bg-gray-50 p-4 rounded mb-4"&gt;
      &lt;code class="text-sm"&gt;before:content-['→'] after:content-['✓']&lt;/code&gt;
    &lt;/div&gt;

    &lt;div class="mb-6"&gt;
      &lt;h3 class="font-semibold mb-3"&gt;Ikony před/za textem&lt;/h3&gt;
      &lt;div class="before:content-['→'] before:mr-2 before:text-blue-500 p-3 border rounded"&gt;
        Text se šipkou před
      &lt;/div&gt;
      &lt;div class="after:content-['✓'] after:ml-2 after:text-green-500 p-3 border rounded mt-2"&gt;
        Text se zaškrtávátkem za
      &lt;/div&gt;
    &lt;/div&gt;

    &lt;div class="mb-6"&gt;
      &lt;h3 class="font-semibold mb-3"&gt;Dekorativní čára&lt;/h3&gt;
      &lt;h2 class="text-xl font-bold before:content-[''] before:inline-block before:w-12 before:h-1 before:bg-purple-500 before:mr-3 before:align-middle"&gt;
        Nadpis s čárou
      &lt;/h2&gt;
    &lt;/div&gt;

    &lt;div class="mb-6"&gt;
      &lt;h3 class="font-semibold mb-3"&gt;Badge/štítek&lt;/h3&gt;
      &lt;div class="relative inline-block"&gt;
        &lt;button class="px-4 py-2 bg-blue-500 text-white rounded after:content-['3'] after:absolute after:-top-2 after:-right-2 after:bg-red-500 after:text-white after:rounded-full after:w-6 after:h-6 after:flex after:items-center after:justify-center after:text-xs after:font-bold"&gt;
          Notifikace
        &lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;

    &lt;div class="mb-6"&gt;
      &lt;h3 class="font-semibold mb-3"&gt;Citace s úvozovkami&lt;/h3&gt;
      &lt;blockquote class="before:content-['"'] after:content-['"'] before:text-4xl after:text-4xl before:text-gray-400 after:text-gray-400 p-4 bg-gray-50 rounded italic"&gt;
        &lt;span class="text-lg"&gt;Toto je citace s automatickými úvozovkami&lt;/span&gt;
      &lt;/blockquote&gt;
    &lt;/div&gt;

    &lt;div class="mb-6"&gt;
      &lt;h3 class="font-semibold mb-3"&gt;Tooltip (hover efekt)&lt;/h3&gt;
      &lt;span class="relative inline-block cursor-help underline decoration-dotted hover:after:content-['Tohle_je_tooltip'] hover:after:absolute hover:after:left-1/2 hover:after:-translate-x-1/2 hover:after:top-full hover:after:mt-2 hover:after:bg-gray-800 hover:after:text-white hover:after:px-3 hover:after:py-1 hover:after:rounded hover:after:text-sm hover:after:whitespace-nowrap"&gt;
        Najeď myší
      &lt;/span&gt;
    &lt;/div&gt;
  &lt;/section&gt;

  &lt;!-- ============================================ --&gt;
  &lt;!-- #7 SUPPORTS QUERIES --&gt;
  &lt;!-- ============================================ --&gt;
  &lt;section class="mb-12 bg-white p-6 rounded-lg border-2 border-pink-200"&gt;
    &lt;h2 class="text-2xl font-bold mb-4 text-pink-700"&gt;#7 Supports queries (detekce CSS features)&lt;/h2&gt;
    &lt;p class="text-gray-600 mb-4"&gt;Aplikuj styly jen když prohlížeč podporuje feature&lt;/p&gt;
    &lt;div class="bg-gray-50 p-4 rounded mb-4"&gt;
      &lt;code class="text-sm"&gt;supports-[backdrop-filter]:backdrop-blur-lg&lt;/code&gt;
    &lt;/div&gt;

    &lt;div class="mb-6"&gt;
      &lt;h3 class="font-semibold mb-3"&gt;Backdrop blur (fallback)&lt;/h3&gt;
      &lt;div class="relative h-40 bg-gradient-to-r from-blue-400 to-purple-500 rounded overflow-hidden"&gt;
        &lt;img src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400" class="w-full h-full object-cover" alt="pozadí" /&gt;
        &lt;div class="absolute inset-0 flex items-center justify-center"&gt;
          &lt;div class="bg-white/30 supports-[backdrop-filter]:backdrop-blur-md supports-[backdrop-filter]:bg-white/20 p-6 rounded-lg"&gt;
            &lt;p class="font-bold text-white"&gt;
              S podporou: blur efekt&lt;br/&gt;
              Bez podpory: silnější opacity
            &lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;

    &lt;div class="mb-6"&gt;
      &lt;h3 class="font-semibold mb-3"&gt;Grid layout (fallback na flex)&lt;/h3&gt;
      &lt;div class="flex flex-wrap gap-4 supports-[display:grid]:grid supports-[display:grid]:grid-cols-3"&gt;
        &lt;div class="p-4 bg-blue-100 rounded"&gt;Box 1&lt;/div&gt;
        &lt;div class="p-4 bg-blue-100 rounded"&gt;Box 2&lt;/div&gt;
        &lt;div class="p-4 bg-blue-100 rounded"&gt;Box 3&lt;/div&gt;
      &lt;/div&gt;
      &lt;p class="text-sm text-gray-600 mt-2"&gt;S podporou Grid: 3 sloupce | Bez: flex wrap&lt;/p&gt;
    &lt;/div&gt;
  &lt;/section&gt;

  &lt;!-- ============================================ --&gt;
  &lt;!-- #10 ARBITRARY PROPERTIES --&gt;
  &lt;!-- ============================================ --&gt;
  &lt;section class="mb-12 bg-white p-6 rounded-lg border-2 border-indigo-200"&gt;
    &lt;h2 class="text-2xl font-bold mb-4 text-indigo-700"&gt;#10 Arbitrary properties (vlastní CSS)&lt;/h2&gt;
    &lt;p class="text-gray-600 mb-4"&gt;Použij libovolnou CSS property&lt;/p&gt;
    &lt;div class="bg-gray-50 p-4 rounded mb-4"&gt;
      &lt;code class="text-sm"&gt;[property:value]&lt;/code&gt;
    &lt;/div&gt;

    &lt;div class="mb-6"&gt;
      &lt;h3 class="font-semibold mb-3"&gt;Mask image (gradient fade)&lt;/h3&gt;
      &lt;div class="[mask-image:linear-gradient(to_bottom,black_50%,transparent)] bg-gradient-to-r from-purple-400 to-pink-400 h-32 flex items-center justify-center text-white font-bold"&gt;
        Fade efekt dole
      &lt;/div&gt;
    &lt;/div&gt;

    &lt;div class="mb-6"&gt;
      &lt;h3 class="font-semibold mb-3"&gt;Text stroke&lt;/h3&gt;
      &lt;h2 class="text-5xl font-bold text-transparent [-webkit-text-stroke:2px_black]"&gt;
        OUTLINED TEXT
      &lt;/h2&gt;
    &lt;/div&gt;

    &lt;div class="mb-6"&gt;
      &lt;h3 class="font-semibold mb-3"&gt;Custom scrollbar&lt;/h3&gt;
      &lt;div class="h-32 overflow-y-scroll border-2 border-gray-300 rounded p-4 [&amp;::-webkit-scrollbar]:w-2 [&amp;::-webkit-scrollbar-track]:bg-gray-100 [&amp;::-webkit-scrollbar-thumb]:bg-blue-500 [&amp;::-webkit-scrollbar-thumb]:rounded"&gt;
        &lt;p&gt;Scrolluj dolů a uvidíš vlastní scrollbar.&lt;/p&gt;
        &lt;p class="mt-4"&gt;Lorem ipsum dolor sit amet.&lt;/p&gt;
        &lt;p class="mt-4"&gt;Lorem ipsum dolor sit amet.&lt;/p&gt;
        &lt;p class="mt-4"&gt;Lorem ipsum dolor sit amet.&lt;/p&gt;
        &lt;p class="mt-4"&gt;Lorem ipsum dolor sit amet.&lt;/p&gt;
        &lt;p class="mt-4"&gt;Konec obsahu.&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;

    &lt;div class="mb-6"&gt;
      &lt;h3 class="font-semibold mb-3"&gt;Aspect ratio nestandardní&lt;/h3&gt;
      &lt;div class="[aspect-ratio:21/9] bg-gradient-to-r from-orange-400 to-red-400 rounded flex items-center justify-center text-white font-bold"&gt;
        21:9 Ultrawide poměr
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/section&gt;

  &lt;!-- ============================================ --&gt;
  &lt;!-- #13 ARBITRARY VARIANTS S MODIFIERS --&gt;
  &lt;!-- ============================================ --&gt;
  &lt;section class="mb-12 bg-white p-6 rounded-lg border-2 border-teal-200"&gt;
    &lt;h2 class="text-2xl font-bold mb-4 text-teal-700"&gt;#13 Arbitrary variants s media queries&lt;/h2&gt;
    &lt;p class="text-gray-600 mb-4"&gt;Vlastní podmínky a media queries&lt;/p&gt;
    &lt;div class="bg-gray-50 p-4 rounded mb-4"&gt;
      &lt;code class="text-sm"&gt;[@media(hover:hover)]:hover:scale-110&lt;/code&gt;
    &lt;/div&gt;

    &lt;div class="mb-6"&gt;
      &lt;h3 class="font-semibold mb-3"&gt;Hover jen na zařízeních s hover (ne mobil)&lt;/h3&gt;
      &lt;button class="px-6 py-3 bg-blue-500 text-white rounded transition [@media(hover:hover)]:hover:scale-110 [@media(hover:hover)]:hover:bg-blue-600"&gt;
        Hover efekt jen na PC/notebooku
      &lt;/button&gt;
      &lt;p class="text-sm text-gray-600 mt-2"&gt;Na mobilu (touch) se škálování neaplikuje&lt;/p&gt;
    &lt;/div&gt;

    &lt;div class="mb-6"&gt;
      &lt;h3 class="font-semibold mb-3"&gt;Dark mode s prefers-color-scheme&lt;/h3&gt;
      &lt;div class="p-4 border-2 rounded bg-white [@media(prefers-color-scheme:dark)]:bg-gray-800 [@media(prefers-color-scheme:dark)]:text-white [@media(prefers-color-scheme:dark)]:border-gray-600"&gt;
        Tento box reaguje na systémové nastavení dark mode
      &lt;/div&gt;
    &lt;/div&gt;

    &lt;div class="mb-6"&gt;
      &lt;h3 class="font-semibold mb-3"&gt;Orientace zařízení&lt;/h3&gt;
      &lt;div class="p-4 border-2 rounded bg-blue-100 [@media(orientation:portrait)]:bg-green-100 [@media(orientation:landscape)]:bg-orange-100"&gt;
        &lt;p class="font-semibold"&gt;Otoč zařízení:&lt;/p&gt;
        &lt;p class="text-sm"&gt;Portrait (na výšku) = zelená&lt;/p&gt;
        &lt;p class="text-sm"&gt;Landscape (na šířku) = oranžová&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;

    &lt;div class="mb-6"&gt;
      &lt;h3 class="font-semibold mb-3"&gt;Vlastní breakpoint&lt;/h3&gt;
      &lt;div class="p-4 border-2 rounded bg-gray-100 [@media(min-width:800px)]:bg-purple-100 [@media(min-width:800px)]:text-purple-800"&gt;
        Pod 800px: šedá | Nad 800px: fialová
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/section&gt;

  &lt;!-- ============================================ --&gt;
  &lt;!-- SHRNUTÍ --&gt;
  &lt;!-- ============================================ --&gt;
  &lt;section class="bg-gradient-to-r from-blue-50 to-purple-50 p-6 rounded-lg border-2 border-blue-300"&gt;
    &lt;h2 class="text-2xl font-bold mb-6"&gt;📚 Rychlé shrnutí&lt;/h2&gt;
    
    &lt;div class="grid md:grid-cols-2 gap-4"&gt;
      &lt;div class="bg-white p-4 rounded"&gt;
        &lt;h3 class="font-bold text-blue-600 mb-2"&gt;#2 Peer&lt;/h3&gt;
        &lt;code class="text-xs"&gt;peer-checked:text-blue-500&lt;/code&gt;
        &lt;p class="text-sm text-gray-600 mt-1"&gt;Sourozenec ovlivňuje sourozence&lt;/p&gt;
      &lt;/div&gt;

      &lt;div class="bg-white p-4 rounded"&gt;
        &lt;h3 class="font-bold text-green-600 mb-2"&gt;#4 Multiple conditions&lt;/h3&gt;
        &lt;code class="text-xs"&gt;data-[a]:data-[b]:class&lt;/code&gt;
        &lt;p class="text-sm text-gray-600 mt-1"&gt;Obě podmínky musí platit (AND)&lt;/p&gt;
      &lt;/div&gt;

      &lt;div class="bg-white p-4 rounded"&gt;
        &lt;h3 class="font-bold text-purple-600 mb-2"&gt;#5 Nth-child&lt;/h3&gt;
        &lt;code class="text-xs"&gt;[&amp;&gt;*:nth-child(odd)]:bg-gray&lt;/code&gt;
        &lt;p class="text-sm text-gray-600 mt-1"&gt;Stylování podle pozice&lt;/p&gt;
      &lt;/div&gt;

      &lt;div class="bg-white p-4 rounded"&gt;
        &lt;h3 class="font-bold text-orange-600 mb-2"&gt;#6 Before/After&lt;/h3&gt;
        &lt;code class="text-xs"&gt;before:content-['→']&lt;/code&gt;
        &lt;p class="text-sm text-gray-600 mt-1"&gt;Pseudo-elementy s obsahem&lt;/p&gt;
      &lt;/div&gt;

      &lt;div class="bg-white p-4 rounded"&gt;
        &lt;h3 class="font-bold text-pink-600 mb-2"&gt;#7 Supports&lt;/h3&gt;
        &lt;code class="text-xs"&gt;supports-[backdrop-filter]:blur&lt;/code&gt;
        &lt;p class="text-sm text-gray-600 mt-1"&gt;Feature detection + fallback&lt;/p&gt;
      &lt;/div&gt;

      &lt;div class="bg-white p-4 rounded"&gt;
        &lt;h3 class="font-bold text-indigo-600 mb-2"&gt;#10 Arbitrary properties&lt;/h3&gt;
        &lt;code class="text-xs"&gt;[mask-image:gradient]&lt;/code&gt;
        &lt;p class="text-sm text-gray-600 mt-1"&gt;Libovolné CSS properties&lt;/p&gt;
      &lt;/div&gt;

      &lt;div class="bg-white p-4 rounded"&gt;
        &lt;h3 class="font-bold text-teal-600 mb-2"&gt;#13 Arbitrary variants&lt;/h3&gt;
        &lt;code class="text-xs"&gt;[@media(hover:hover)]:hover&lt;/code&gt;
        &lt;p class="text-sm text-gray-600 mt-1"&gt;Vlastní media queries&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/section&gt;

&lt;/body&gt;
&lt;/html&gt;</pre>