How to Use Tailwind CSS Components

A showcase of beautiful, responsive components built with Tailwind CSS, with live examples and code snippets.

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that lets you design modern websites quickly and efficiently without writing a lot of custom CSS. Instead of creating custom classes, you compose designs directly in your HTML using utility classes.

<div class="bg-blue-100 p-4 rounded-lg shadow">Hello Tailwind!</div>

Why Use Tailwind CSS?

Tailwind helps you rapidly prototype websites, maintain consistent design, and eliminate long CSS files by using utility classes.

<button class="bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600">
  Click Me
</button>

Using Tailwind CSS Buttons

Buttons in Tailwind CSS are created using utility classes for background, text, padding, border, and hover effects. You can also apply gradients, shadows, and rounded corners for more visual impact.

<button class="bg-green-500 text-white py-2 px-4 rounded hover:bg-green-600">
  Success Button
</button>

Buttons

Color Palette

Tailwind provides hundreds of predefined colors for backgrounds, text, borders, and more. You can also add custom colors via the config file.

<div class="w-24 h-24 bg-red-500 rounded-lg"></div>
<div class="w-24 h-24 bg-blue-500 rounded-lg"></div>

Color Palette

red

blue

green

yellow

purple

pink

Working with Text

Tailwind offers utilities for font size, weight, style, line-height, and color. Combine them to quickly create headings, paragraphs, and emphasized text.

<h1 class="text-5xl font-bold text-gray-900">Heading 1</h1>
<p class="text-base text-gray-600">This is a paragraph.</p>

Typography

Heading 1 - Extra Large

Heading 2 - Large

Heading 3 - Medium

This is a large paragraph with text-xl class.

This is a regular paragraph with text-base class.

This is small text with text-sm class.

This is bold text.

This is italic text.

This is underlined text.

Layout Utilities

Tailwind provides utilities for flexbox, grid, spacing, alignment, and responsive layouts. Combine classes to quickly structure your content.

<div class="grid grid-cols-3 gap-4">
  <div class="bg-blue-500 p-4">Item 1</div>
  <div class="bg-green-500 p-4">Item 2</div>
  <div class="bg-red-500 p-4">Item 3</div>
</div>

Layout Examples

Grid Layout

Card 1

Responsive grid adjusts automatically.

Card 2

Works across devices.

Card 3

Three columns on large screens, stacked on mobile.

Flex Layout

Item 1

Item 2

Item 3

Item 4

Images

Tailwind makes it easy to style images with rounding, shadows, and responsive sizing.

<img class="w-full rounded-lg shadow-md" src="image.jpg" alt="Example"/>
<img class="w-full rounded-full shadow-md" src="image.jpg" alt="Example"/>

Rounded Image

Circular Image

Shadow Image