Tailwind Examples

Explore these examples to see how Tailwind CSS can be used to style various components and layouts:

1. Button Styles

Create stylish buttons with Tailwind CSS using utility classes for background color, text color, padding, and hover effects.


<div class="flex justify-center">
    <button class="bg-blue-500 text-white font-bold py-2 px-4 rounded hover:bg-blue-700">Primary Button</button>
    <button class="bg-gray-300 text-gray-700 font-bold py-2 px-4 rounded hover:bg-gray-400">Secondary Button</button>
</div>

2. Responsive Grid Layout

Build responsive grid layouts with Tailwind CSS using the grid and flexbox utilities. Create custom layouts that adapt to different screen sizes.


<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
    <div class="bg-gray-200 p-4">Item 1</div>
    <div class="bg-gray-200 p-4">Item 2</div>
    <div class="bg-gray-200 p-4">Item 3</div>
    <div class="bg-gray-200 p-4">Item 4</div>
    <div class="bg-gray-200 p-4">Item 5</div>
    <div class="bg-gray-200 p-4">Item 6</div>
</div>

3. Navigation Bar

Design a responsive navigation bar with Tailwind CSS using flexbox and spacing utilities. Create a mobile-friendly menu that collapses into a hamburger icon on smaller screens.


<nav class="flex items-center justify-between flex-wrap bg-gray-800 p-6">
    <div class="flex items-center flex-shrink-0 text-white mr-6">
        <span class="font-semibold text-xl tracking-tight">My Website</span>
    </div>
    <div class="block lg:hidden">
        <button class="flex items-center px-3 py-2 border rounded text-gray-300 border-gray-400 hover:text-white hover:border-white">
            <svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <title>Menu</title>
            <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" />
            </svg>
        </button>
    </div>
    <div class="w-full block flex-grow lg:flex lg:items-center lg:w-auto">
    <div class="text-sm lg:flex-grow">
    <a href="#" class="block mt-4 lg:inline-block lg:mt-0 text-gray-300 hover:text-white mr-4">Home</a>
    <a href="#" class="block mt-4 lg:inline-block lg:mt-0 text-gray-300 hover:text-white mr-4">About</a>
    <a href="#" class="block mt-4 lg:inline-block lg:mt-0 text-gray-300 hover:text-white">Contact</a>
</div>
</div>
</nav>

4. Card Component

Create a reusable card component with Tailwind CSS for displaying content such as articles, products, or user profiles.


<div class="max-w-sm rounded overflow-hidden shadow-lg">
    <img class="w-full" src="https://via.placeholder.com/350x150" alt="Placeholder Image">
    <div class="px-6 py-4">
    <div class="font-bold text-xl mb-2">Card Title</div>
        <p class="text-gray-700 text-base">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.</p>
    </div>
    <div class="px-6 py-4">
        <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2">#tag1</span>
        <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2">#tag2</span>
</div>
</div>

5. Modal Dialog

Create a modal dialog using Tailwind CSS for displaying pop-up content such as forms, alerts, or images.


<div class="fixed z-10 inset-0 overflow-y-auto hidden">
    <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
    <div class="fixed inset-0 transition-opacity" aria-hidden="true">
        <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
          </div>
          <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
          <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
            <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
              <div class="sm:flex sm:items-start">
                <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-green-100 sm:mx-0 sm:h-10 sm:w-10">
                  <svg class="h-6 w-6 text-green-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                  </svg>
                </div>
                <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
                  <h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-title"> Modal Title </h3>
                  <div class="mt-2">
                    <p class="text-sm text-gray-500"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur amet labore. </p>
                  </div>
                </div>
              </div>
            </div>
            <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
              <button class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-green-600 text-base font-medium text-white hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 sm:ml-3 sm:w-auto sm:text-sm"> Accept </button>
              <button class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 sm:mt-0 sm:w-auto sm:text-sm"> Cancel </button>
            </div>
        </div>
    </div>
</div>

Conclusion

These examples demonstrate the versatility and ease of use of Tailwind CSS for styling web interfaces. Whether you're designing buttons, grids, navigation bars, cards, or modal dialogs, Tailwind CSS provides a rich set of utility classes to streamline your development workflow and create visually appealing designs.

Archive