# tailwind-components > Reusable Tailwind CSS component patterns for consistent UI. Use when creating buttons, cards, forms, tables, modals, navigation, or any UI components with Tailwind CSS. - Author: root - Repository: omanjaya/attendancedev - Version: 20251223161655 - Stars: 0 - Forks: 0 - Last Updated: 2026-02-07 - Source: https://github.com/omanjaya/attendancedev - Web: https://mule.run/skillshub/@@omanjaya/attendancedev~tailwind-components:20251223161655 --- --- name: tailwind-components description: Reusable Tailwind CSS component patterns for consistent UI. Use when creating buttons, cards, forms, tables, modals, navigation, or any UI components with Tailwind CSS. allowed-tools: Read, Grep, Glob, Edit, Write --- # Tailwind Components Skill This skill provides ready-to-use Tailwind CSS component patterns for building consistent, professional UI. ## Button Components ### Primary Buttons ```html ``` ### Button Group ```html
``` ## Card Components ### Basic Card ```html

Card Title

Card description goes here with some supporting text.

``` ### Stats Card ```html
12%

2,543

Total Employees

``` ### Card with Header & Actions ```html

Recent Activity

Last 7 days

``` ## Form Components ### Text Input ```html

We'll never share your email.

``` ### Input with Icon ```html
``` ### Select Input ```html
``` ### Checkbox & Radio ```html ``` ### Toggle Switch ```html ``` ## Table Components ### Basic Table ```html
Employee Status Department Actions
John Doe
john@example.com
 Active Engineering
``` ## Modal Component ```html

Modal Title

Modal content goes here.

``` ## Badge/Status Components ```html Active Pending Inactive Draft ``` ## Alert Components ```html

Successfully saved!

Something went wrong!

Please review before submitting.

``` ## Navigation Components ### Sidebar Navigation Item ```html Dashboard Employees ``` ## Loading States ```html
``` ## Empty States ```html

No data found

Get started by creating your first item.

```