/ Gists / 01. Animated blog background | Tailwind Labs (Simon Swiss)
On gists

01. Animated blog background | Tailwind Labs (Simon Swiss)

Tailwind CSS

preview.md Raw #

index.html Raw # 

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

<!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: {
                            blob: 'blob 7s infinite',
                        },
                        keyframes: {
                            blob: {
                                '0%': {
                                    transform: 'translate(0px, 0px) scale(1)',
                                },
                                '33%': {
                                    transform: 'translate(30px, -50px) scale(1.1)',
                                },
                                '66%': {
                                    transform: 'translate(-20px, 20px) scale(0.9)',
                                },
                                '100%': {
                                    transform: 'tranlate(0px, 0px) scale(1)',
                                },
                            },
                        },
                    },
                },
            };
        </script>
        <style type="text/tailwindcss">
            @layer utilities {
                .animation-delay-2000 {
                    animation-delay: 2s;
                }
                .animation-delay-4000 {
                    animation-delay: 4s;
                }
            }
        </style>
    </head>
    <body>
        <div class="bg-gray-50 min-h-screen flex items-center justify-center px-16">
            <div class="relative w-full max-w-lg">
                <div class="absolute top-0 -left-4 w-72 h-72 bg-purple-300 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob"></div>
                <div class="absolute top-0 -right-4 w-72 h-72 bg-yellow-300 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000"></div>
                <div class="absolute -bottom-8 left-20 w-72 h-72 bg-pink-300 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-4000"></div>
                <div class="m-8 relative space-y-4">
                    <div class="p-5 bg-white rounded-lg flex items-center justify-between space-x-8">
                        <div class="flex-1">
                            <div class="h-4 w-48 bg-gray-300 rounded"></div>
                        </div>
                        <div>
                            <div class="w-24 h-6 rounded-lg bg-purple-300"></div>
                        </div>
                    </div>
                    <div class="p-5 bg-white rounded-lg flex items-center justify-between space-x-8">
                        <div class="flex-1">
                            <div class="h-4 w-56 bg-gray-300 rounded"></div>
                        </div>
                        <div>
                            <div class="w-20 h-6 rounded-lg bg-yellow-300"></div>
                        </div>
                    </div>
                    <div class="p-5 bg-white rounded-lg flex items-center justify-between space-x-8">
                        <div class="flex-1">
                            <div class="h-4 w-44 bg-gray-300 rounded"></div>
                        </div>
                        <div>
                            <div class="w-28 h-6 rounded-lg bg-pink-300"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>