Responsive Navbar, Cards, and Modals

1. Responsive Navbar

<nav class="bg-gray-800 text-white p-4">
    <div class="max-w-6xl mx-auto flex justify-between items-center">
        <div class="text-xl font-bold">MySite</div>
        <div class="hidden md:flex space-x-6">
            <a href="#" class="hover:underline">Home</a>
            <a href="#" class="hover:underline">About</a>
            <a href="#" class="hover:underline">Contact</a>
        </div>
        <button class="md:hidden">☰</button>
    </div>
</nav>
            

Use md:hidden and hidden md:flex to toggle views based on screen size.

2. Reusable Card Component

<div class="max-w-sm bg-white shadow-md rounded-lg overflow-hidden">
    <img src="https://via.placeholder.com/400x200" alt="Card Image" class="w-full">
    <div class="p-4">
        <h3 class="text-xl font-semibold mb-2">Card Title</h3>
        <p class="text-gray-600">This is a simple card with image, title, and text.</p>
    </div>
</div>
            

Cards are flexible layout containers—ideal for products, articles, or user profiles.

3. Modal Component

Use Tailwind classes and Alpine.js or JavaScript to control modal visibility.

<!-- Modal Background -->
<div class="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center hidden" id="modal">
    <div class="bg-white p-6 rounded shadow-lg w-1/2">
        <h2 class="text-xl font-bold mb-4">Modal Title</h2>
        <p class="mb-4">This is a modal window with some text.</p>
        <button onclick="document.getElementById('modal').classList.add('hidden')" class="bg-blue-600 text-white px-4 py-2 rounded">Close</button>
    </div>
</div>

<!-- Trigger Button -->
<button onclick="document.getElementById('modal').classList.remove('hidden')" class="bg-indigo-600 text-white px-4 py-2 rounded">
    Open Modal
</button>
            

You can replace this with Alpine.js or Vue for better state handling.

Conclusion

Tailwind enables fast prototyping of complex UI patterns with minimal custom CSS. Combine layout utilities, interactivity, and responsive design to create polished components.