/ Gists / 06. Stacking context & Isolate Tailwind Labs (Simon Swiss)
On gists

06. Stacking context & Isolate Tailwind Labs (Simon Swiss)

Tailwind CSS

preview.md Raw #

index.html Raw # 

<!--
https://play.tailwindcss.com/QZtQ53wsud
https://play.tailwindcss.com/SBUE3gLJ24
-->

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <script src="https://cdn.tailwindcss.com"></script>
        <script>
            tailwind.config = {
                theme: {
                    extend: {
                        borderWidth: {
                            20: '20px',
                        },
                    },
                },
            };
        </script>
        <style type="text/tailwindcss"></style>
    </head>
    <body>
        <div class="bg-white h-screen p-8 flex items-center justify-center">
            <div class="isolate hover:isolation-auto bg-gray-700 h-48 w-full max-w-5xl rounded-2xl flex items-center justify-center">
                <div class="flex items-center justify-center -space-x-32">
                    <div class="w-72 h-72 rounded-full bg-purple-500"></div>
                    <div class="w-72 h-72 rounded-full bg-green-500 mix-blend-lighten"></div>
                </div>
            </div>
        </div>

        <hr />

        <div class="mt-40 relative">
            <div class="isolate flex flex-col items-center -space-y-24">
                <div class="flex space-x-2">
                    <div class="z-50 w-44 h-44 border-20 border-blue-500 rounded-full"></div>
                    <div class="z-40 w-44 h-44 border-20 border-black rounded-full"></div>
                    <div class="z-30 w-44 h-44 border-20 border-red-500 rounded-full"></div>
                </div>
                <div class="flex space-x-2">
                    <div class="z-20 w-44 h-44 border-20 border-yellow-500 rounded-full"></div>
                    <div class="z-10 w-44 h-44 border-20 border-green-500 rounded-full"></div>
                </div>
            </div>
            <div class="z-30 absolute top-20 h-24 w-full bg-yellow-100"></div>
        </div>
    </body>
</html>