04. Glowing background gradient | Tailwind Labs (Simon Swiss)

12.12.2023
Tailwind CSS
preview.md Raw #

index.html Raw #

<!--
https://play.tailwindcss.com/fNKKyOG2Yv
-->

<!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: {
                        animation: {
                            tilt: 'tilt 10s infinite linear',
                        },
                        keyframes: {
                            tilt: {
                                '0%, 50%, 100%': {
                                    transform: 'rotate(0deg)',
                                },
                                '25%': {
                                    transform: 'rotate(0.5deg)',
                                },
                                '75%': {
                                    transform: 'rotate(-0.5deg)',
                                },
                            },
                        },
                    },
                },
            };
        </script>
        <style type="text/tailwindcss">
            html,
            body {
                background-color: #030303;
                min-height: 100vh;
            }
        </style>
    </head>
    <body>
        <div class="px-8 py-32">
            <div class="grid gap-8 items-start justify-center">
                <div class="relative group">
                    <div class="absolute -inset-0.5 bg-gradient-to-r from-pink-600 to-purple-600 rounded-lg blur opacity-75 group-hover:opacity-100 transition duration-1000 group-hover:duration-200 animate-tilt"></div>
                    <button class="relative px-7 py-4 bg-black rounded-lg leading-none flex items-center divide-x divide-gray-600">
                        <span class="flex items-center space-x-5">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-pink-600 -rotate-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z" />
                            </svg>
                            <span class="pr-6 text-gray-100">Labs Release 2021.09</span>
                        </span>
                        <span class="pl-6 text-indigo-400 group-hover:text-gray-100 transition duration-200">See what's new &rarr;</span>
                    </button>
                </div>
            </div>
        </div>
    </body>
</html>