Categories :

Learn Responsive Design with Tailwindcss

It’s super simple. Yes, responsive web design with tailwindcss is mindblowing. Tailwindcss is the modern utility first CSS framework to design your attractive and responsive web pages. I love it. Now the most popular PHP framework Laravel recommend tailwindcss with VueJS for Single Page Application-SPA Development.

Watch this video and learn responsive web design in just 10 minutes.

Create an HTML file, copy the code and paste it there.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

</head>
<body>
    <div class="bg-blue-400 items-center justify-center flex min-h-screen">
        <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4">
            <div class="bg-white p-6 m-6 md:row-span-2">1</div>
            <div class="bg-white p-6 m-6">2</div>
            <div class="bg-white p-6 m-6">3</div>
            <div class="bg-white p-6 m-6">4</div>
            <div class="bg-white p-6 m-6">5</div>
            <div class="bg-white p-6 m-6 md:col-span-2">6</div>
            <div class="bg-white p-6 m-6">7</div>
            <div class="bg-white p-6 m-6">8</div>
            <div class="bg-white p-6 m-6">9</div>
        </div>
    </div>
</body>
</html>

Leave a Reply

Your email address will not be published.