# Tailwind Component Patterns Complete, accessible component patterns with Tailwind CSS. All examples include dark mode support and accessibility attributes. ## Cards ### Basic Card ```html

Card Title

Card content goes here with a reasonable amount of text.

``` ### Card with Image ```html
Description of image

Card Title

Supporting text for this card.

Read more →
``` ### Horizontal Card ```html
Description

Horizontal Card

Image sits beside the content on larger screens, stacks on mobile.

``` ### Interactive Card (Clickable) ```html

Clickable Card

The entire card is a link with hover and focus states.

 ``` ### Pricing Card ```html
Most Popular

Pro Plan

$29 /month
``` ### Feature Card ```html

Feature Name

Description of this feature and its value to users.

``` ## Buttons ### Primary Button ```html ``` ### Secondary Button ```html ``` ### Outline Button ```html ``` ### Ghost Button ```html ``` ### Icon Button ```html ``` ### Loading Button ```html ``` ### Button Group ```html
``` ### Button Sizes ```html ``` ## Forms ### Text Input ```html
``` ### Textarea ```html

Max 500 characters.

``` ### Select ```html
``` ### Checkbox ```html
``` ### Radio Group ```html
Notification preference
``` ### Toggle Switch ```html ``` ### File Upload ```html
``` ### Search Input ```html
``` ### Input with Icon (Addon) ```html
https://
``` ### Input Group (Button Addon) ```html
``` ### Validation States ```html

Email address is valid.

``` ## Navigation ### Horizontal Navbar ```html ``` ### Mobile Hamburger Menu (Expanded State) ```html
Home Features Pricing
Get Started
``` ### Sidebar Navigation ```html ``` ### Breadcrumbs ```html ``` ### Tabs ```html
Tab content goes here.
``` ### Pagination ```html ``` ## Modals ### Centered Modal with Overlay ```html ``` ### Slide-Over Panel ```html ``` ### Confirmation Dialog ```html

Delete Item?

This action cannot be undone. The item will be permanently removed.

``` ## Tables ### Basic Table ```html
Name Email Role Actions
Jane Doe jane@example.com Admin
``` ### Striped Table ```html
Product Price Stock
Widget A $9.99 142
Widget B $19.99 85
``` ### Sortable Table Header ```html ``` ### Responsive Table (Stacked on Mobile) ```html
Name Jane Doe
Email jane@example.com
Role Admin
``` ## Alerts ### Info Alert ```html

A new version is available. Please update to continue.

``` ### Success Alert ```html

Changes saved successfully.

``` ### Warning Alert ```html ``` ### Error Alert ```html ``` ### Dismissible Alert ```html

Tip: You can drag items to reorder them.

``` ## Badges ### Inline Badge ```html New ``` ### Pill Badge ```html Default Active Removed ``` ### Badge with Dot Indicator ```html Online Idle Offline ``` ### Notification Count Badge ```html
3
``` ## Avatars ### Image Avatar ```html Jane Doe ``` ### Initials Avatar ```html
JD
``` ### Avatar Group (Stacked) ```html
User 1 User 2 User 3
+5
``` ## Dropdowns ### Basic Dropdown ```html
``` ### Dropdown with Dividers and Icons ```html ``` ## Tooltips ### CSS-Only Tooltip ```html
``` ## Skeleton Loaders ### Text Skeleton ```html
``` ### Image Skeleton ```html
``` ### Card Skeleton ```html
``` ## Accessibility Patterns ### Focus-Visible Rings ```html Link on dark background ``` ### Screen Reader Only Text ```html Skip to main content ``` ### ARIA Attributes with Tailwind ```html Current Page ``` ### Reduced Motion ```html
Bouncing content (static for reduced-motion users)
Pulses only when safe
Scales on hover (but not for reduced-motion users)
```