<!--
https://lab.rjwebdesign.cz/tailwindcss/advanced/
-->

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link href="./dist/output.css" rel="stylesheet" />
    </head>
    <body class="p-5">
        <h1 class="mb-4 font-bold text-3xl">1) Peer / Group</h1>
        <div class="peer group group/second group/third grid place-items-center bg-slate-600 w-20 h-20 mt-10">
            <div class="bg-black w-5 h-5 group-hover:bg-red-500"></div>
            <div class="bg-black w-5 h-5 group-hover/second:bg-green-500"></div>
            <div class="bg-black w-5 h-5 group-hover/third:bg-orange-500"></div>
        </div>
        <div class="w-20 h-20 bg-orange-400 mt-10 peer-hover:bg-violet-300"></div>

        <hr class="my-5" />
        <h1 class="mb-4 font-bold text-3xl">2) Animation / Transition</h1>
        <div class="w-20 h-20 bg-teal-700 transition-all hover:bg-red-300 delay-300 duration-150"></div>

        <hr class="my-5" />
        <h1 class="mb-4 font-bold text-3xl">3) Responsivenes / BP (ranges)</h1>
        <div class="w-20 h-20 bg-red-500 md:max-lg:bg-green-500"></div>

        <hr class="my-5" />
        <h1 class="mb-4 font-bold text-3xl">4) Dynamic variants / props / values</h1>
        <div class="w-20 h-20 bg-[theme('colors.blue.300')]"></div>

        <hr class="my-5" />
        <h1 class="mb-4 font-bold text-3xl">5) TW extend / config</h1>
        <div class="w-20 h-20 neon-blue"></div>

        <hr class="my-5" />
        <h1 class="mb-4 font-bold text-3xl">6) TW extend -> COLORS</h1>
        <div class="text-primary">Hello how are you?</div>
    </body>
</html>