/ Gists / 03. Filters | Tailwind Labs (Simon Swiss)
On gists

03. Filters | Tailwind Labs (Simon Swiss)

Tailwind CSS

preview.md Raw #

index.html Raw # 

<!-- 
https://play.tailwindcss.com/m2BOMlzA17
https://play.tailwindcss.com/FLMNSQP36X
-->

<!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: {},
                },
            };
        </script>
        <style type="text/tailwindcss"></style>
    </head>
    <body>
        <div class="p-4 min-h-screen flex items-center justify-center">
            <div>
                <div class="flex space-x-8">
                    <img class="h-48 shadow-xl rounded-lg transition duration-300 filter grayscale hover:grayscale-0" src="https://images.unsplash.com/photo-1473496169904-658ba7c44d8a?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80" alt="" />
                    <img class="h-48 shadow-xl rounded-lg transition duration-300 filter sepia hover:sepia-0" src="https://images.unsplash.com/photo-1473496169904-658ba7c44d8a?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80" alt="" />
                    <img class="h-48 shadow-xl rounded-lg transition duration-300 filter invert hover:invert-0" src="https://images.unsplash.com/photo-1473496169904-658ba7c44d8a?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80" alt="" />
                </div>
            </div>
        </div>

        <hr />

        <div class="mx-16 mt-8 h-96 relative">
            <div class="absolute w-full h-full py-8">
                <img class="h-80 w-full object-cover rounded-2xl" src="https://images.unsplash.com/photo-1473496169904-658ba7c44d8a?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2000&h=1000&q=80" alt="" />
            </div>
            <div class="relative h-full flex overflow-x-auto space-x-80">
                <div class="flex-shrink-0 rounded-2xl w-full"></div>
                <div class="flex-shrink-0 rounded-2xl w-1/3 border-4 border-black backdrop-filter backdrop-hue-rotate-180"></div>
                <div class="flex-shrink-0 rounded-2xl w-1/3 border-4 border-black backdrop-filter backdrop-saturate-200"></div>
                <div class="flex-shrink-0 rounded-2xl w-1/3 border-4 border-black backdrop-filter backdrop-invert"></div>
                <div class="flex-shrink-0 rounded-2xl w-1/3 border-4 border-black backdrop-filter backdrop-sepia"></div>
                <div class="flex-shrink-0 rounded-2xl w-1/3 border-4 border-black backdrop-filter backdrop-blur-lg"></div>
                <div class="flex-shrink-0 rounded-2xl w-full"></div>
            </div>
        </div>
    </body>
</html>