/ Gists / 05. Responsive grid tiles | Tailwind Labs (Simon Swiss)
On gists

05. Responsive grid tiles | Tailwind Labs (Simon Swiss)

Tailwind CSS

preview.md Raw #

index.html Raw # 

<!--
https://play.tailwindcss.com/9IEjFauwTF
-->

<!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>
            // const defautTheme = require('tailwindcss/defaultTheme')
            tailwind.config = {
                theme: {
                    // screens: {
                    //     sm: '540px',
                    //     ...defautTheme.screens,
                    // },
                    extend: {},
                },
            };
        </script>
        <style type="text/tailwindcss">
            @layer utilities {
                .square {
                    aspect-ratio: 1 / 1;
                }
            }
        </style>
    </head>
    <body>
        <div class="grid place-items-center min-h-screen">
            <!-- Responsive Grid Layout -->
            <div class="p-4 max-w-5xl grid gap-4 sm:grid-cols-2 sm:p-8 md:grid-cols-4 lg:gap-6">
                <h1 class="text-4xl font-extrabold sm:col-span-2 sm:grid sm:gap-4 sm:grid-cols-2 md:col-span-3 md:text-5xl md:grid-cols-3 lg:text-6xl">
                    <span class="md:col-span-2">Grid layout with Tailwind CSS.</span>
                </h1>
                <p class="sm:row-start-2 sm:col-start-2 sm:self-center md:col-start-1 md:col-span-2 md:pr-12 md:text-lg">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Distinctio hic itaque alias officiis.</p>
                <div class="h-16 bg-blue-500 sm:h-auto sm:square"></div>
                <div class="h-16 bg-blue-500 sm:h-auto sm:square"></div>
                <div class="h-16 bg-pink-500 sm:h-auto sm:square"></div>
                <div class="h-16 bg-blue-500 sm:h-auto sm:square md:col-start-2"></div>
                <div class="h-16 bg-pink-500 sm:h-auto sm:square"></div>
                <div class="h-16 bg-blue-500 sm:h-auto sm:square"></div>
                <div class="h-16 bg-blue-500 sm:h-auto sm:square"></div>
                <div class="h-16 bg-pink-500 sm:h-auto sm:square"></div>
                <p class="self-center md:text-lg md:col-span-2 md:text-center md:px-4">Lorem ipsum dolor, sit amet consectetur adipisicing elit, and some more.</p>
            </div>
        </div>
    </body>
</html>