/ Gists / 02. Blend mode | Tailwind Labs (Simon Swiss)
On gists

02. Blend mode | Tailwind Labs (Simon Swiss)

Tailwind CSS

preview.md Raw #

index.html Raw # 

<!--
https://play.tailwindcss.com/rLUYCIXqwt?size=1158x735
https://play.tailwindcss.com/6FwKUk5hIU?size=1020x720
-->

<!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: {
                        backgroundImage: {
                            texture: `url('https://images.unsplash.com/photo-1531685250784-7569952593d2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1374&q=80')`,
                        },
                        blur: {
                            px: `1px`,
                        },
                    },
                },
            };
        </script>
        <style type="text/tailwindcss"></style>
    </head>
    <body>
        <div class="min-h-screen flex flex-col justify-center items-center">
            <div class="mx-auto p-6">
                <div class="flex justify-center space-x-10">
                    <div class="bg-gradient-to-tr from-blue-500 to-green-400 relative w-80 h-80 max-w-full rounded-lg shadow-2xl overflow-hidden">
                        <img class="mix-blend-overlay absolute inset-0 w-full h-full object-cover" src="https://images.unsplash.com/photo-1552318317-ee6689754024?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=880&q=80" alt="" />
                    </div>
                    <div class="bg-gradient-to-tr from-yellow-500 to-red-400 relative w-80 h-80 max-w-full rounded-lg shadow-2xl overflow-hidden">
                        <img class="mix-blend-overlay absolute inset-0 w-full h-full object-cover" src="https://images.unsplash.com/photo-1552318317-ee6689754024?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=880&q=80" alt="" />
                    </div>
                    <div class="bg-gradient-to-tr from-red-500 to-purple-400 relative w-80 h-80 max-w-full rounded-lg shadow-2xl overflow-hidden">
                        <img class="mix-blend-overlay absolute inset-0 w-full h-full object-cover" src="https://images.unsplash.com/photo-1552318317-ee6689754024?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=880&q=80" alt="" />
                    </div>
                </div>
            </div>
        </div>

        <hr />

        <div class="min-h-screen flex flex-col justify-center items-center">
            <div class="relative w-full max-w-4xl h-96 bg-blue-500 rounded-xl bg-texture bg-cover bg-center bg-blend-color-burn">
                <h1 class="p-8 max-w-3xl text-8xl font-black uppercase text-white transform -rotate-6 mix-blend-overlay filter blur-px">CSS blend modes are super cool!</h1>
            </div>
        </div>
    </body>
</html>