Interactive Component Library

A comprehensive collection of responsive UI components built with Tailwind CSS and JavaScript for modern web applications.

Explore Components Get Started

Featured components include:

Buttons Forms Cards Modals Accordions

// Interactive component example
function toggleModal() {
  const modal = document.getElementById('modal');
  modal.classList.toggle('hidden');
}

Fully Responsive

Components adapt seamlessly to any screen size from mobile to desktop.

Interactive Elements

Smooth animations and transitions enhance the user experience.

Customizable

Easily modify components to match your brand and design requirements.

Scroll down to explore all components

Buttons

A collection of responsive button components with various styles, states, and animations for modern web interfaces.

Basic Buttons

Primary & Secondary

<button class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors">Primary</button>
<button class="px-4 py-2 bg-neutral-200 text-neutral-800 rounded-md hover:bg-neutral-300 transition-colors">Secondary</button>

Outlined Buttons

<button class="px-4 py-2 border border-blue-600 text-blue-600 rounded-md hover:bg-blue-50 transition-colors">Primary</button>
<button class="px-4 py-2 border border-neutral-600 text-neutral-600 rounded-md hover:bg-neutral-50 transition-colors">Secondary</button>

Button Sizes

Size Variations

<button class="px-2 py-1 bg-blue-600 text-white text-xs rounded hover:bg-blue-700 transition-colors">Small</button>
<button class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors">Default</button>
<button class="px-6 py-3 bg-blue-600 text-white text-lg rounded-lg hover:bg-blue-700 transition-colors">Large</button>

Full Width

<button class="w-full px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors">Full Width Button</button>

Button States

Interactive States

<button class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors">Default</button>
<button class="px-4 py-2 bg-blue-600 text-white rounded-md opacity-50 cursor-not-allowed" disabled>Disabled</button>

Loading State

<button class="px-4 py-2 bg-blue-600 text-white rounded-md flex items-center space-x-2">
  <svg class="animate-spin h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
  </svg>
  <span>Loading...</span>
</button>

Advanced Buttons

Icon Buttons

<button class="px-4 py-2 bg-blue-600 text-white rounded-md flex items-center space-x-2">
  <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z" clip-rule="evenodd" />
  </svg>
  <span>Add Item</span>
</button>

Animated Buttons

<button class="px-4 py-2 bg-purple-600 text-white rounded-md hover:bg-purple-700 transition-all transform hover:scale-105">
  Scale Effect
</button>

Button Groups

Horizontal Group

<div class="inline-flex rounded-md shadow-sm" role="group">
  <button type="button" class="px-4 py-2 text-sm font-medium text-blue-700 bg-white border border-blue-600 rounded-l-lg hover:bg-blue-50">
    Left
  </button>
  <button type="button" class="px-4 py-2 text-sm font-medium text-blue-700 bg-white border-t border-b border-blue-600 hover:bg-blue-50">
    Middle
  </button>
  <button type="button" class="px-4 py-2 text-sm font-medium text-blue-700 bg-white border border-blue-600 rounded-r-lg hover:bg-blue-50">
    Right
  </button>
</div>

Toggle Buttons

<div class="flex flex-wrap gap-2" id="toggle-button-group">
  <button class="px-4 py-2 text-sm font-medium bg-white border border-neutral-300 rounded-md hover:bg-neutral-50 toggle-button" data-active="false">
    Option 1
  </button>
  // More buttons...
</div>

Example Usage

Form Submission

Call to Action

Ready to get started?

Join thousands of satisfied customers today.

Interactive Demo

Button Customizer

Button Text

Style

Color

Size

Border Radius

Include Icon

Preview

Generated Code:

<button class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors">
  Custom Button
</button>

Forms

Interactive form components with validation, responsive layouts, and modern design patterns.

Basic Form Elements

Text Inputs

Text Input

Email Input

Password Input

<div>
  <label for="text-input" class="block text-sm font-medium text-neutral-700 mb-1">Text Input</label>
  <input type="text" id="text-input" class="w-full px-3 py-2 border border-neutral-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="Enter text">
</div>

Selection Controls

Select Input

Checkbox

I agree to the terms

Radio Buttons

Option 1

Option 2

<div class="flex items-center">
  <input type="checkbox" id="checkbox-1" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-neutral-300 rounded">
  <label for="checkbox-1" class="ml-2 block text-sm text-neutral-700">I agree to the terms</label>
</div>

Form Layouts

Stacked Form

Inline Form

Form Validation

Inline Validation

Custom Validation States

Success State

Input is valid

Error State

Please enter a valid input

Loading State

Validating input...

<div class="relative">
  <input type="text" class="w-full pl-3 pr-10 py-2 border border-red-500 rounded-md focus:outline-none focus:ring-2 focus:ring-red-500">
  <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
    <svg class="h-5 w-5 text-red-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
      <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
    </svg>
  </div>
</div>
<p class="text-red-600 text-xs mt-1">Please enter a valid input</p>

Advanced Form Components

Custom Select

Toggle Switch

Off

Range Slider

Value: 50

File Upload

Upload File

Upload a file

or drag and drop

PNG, JPG, GIF up to 10MB

Date Picker

Select Date

Contact Form Example

Get in Touch

Fill out the form and we'll get back to you as soon as possible.

First Name

Last Name

Subject

Message

I agree to the terms and privacy policy

Component Cards

Basic Card

A simple card with title and description. Hover to see transform effect.

Image Card

Card with image, title and description. Hover for shadow effect.

Horizontal Card

Horizontal layout on larger screens, vertical on mobile.

Flip Card

Click to flip this card and see the back side

Back Side

This is the back of the flip card

Expandable Card

Interactive Card

Hover to see overlay effect and reveal hidden content.

Modal Components

Standard Modal

A centered modal with semi-transparent backdrop and close button.

Side Drawer

A side-sliding drawer with swipe-to-close functionality.

Bottom Sheet

A sheet that slides up from the bottom with drag handle.

Popup/Tooltip

A small overlay with automatic and manual close options.

Confirmation Modal

A modal that requires user confirmation to proceed.

Image Modal

A modal that displays an image in a lightbox style.

Accordion Components

Basic Accordion

A simple accordion with toggle functionality.

What is an accordion component?

When should I use accordions?

How do accordions improve UX?

FAQ Accordion

A styled FAQ accordion with icons and smooth transitions.

How do I create an accessible accordion?

Can multiple accordion sections be open at once?

Should accordions animate when opening/closing?

Nested Accordion

An accordion with nested content for hierarchical information.

Web Development

Design Systems

Multi-section Accordion

An accordion that allows multiple sections to be open simultaneously.

Project Planning

User Research

Design Process

Tab Components

Basic Tabs

Simple horizontal tabs with clean styling.

Product Overview

A comprehensive look at our product's capabilities and benefits.

Styled Tabs

Tabs with enhanced styling and icons.

About Our Company

We are a leading provider of innovative solutions for web development and design.

Vertical Tabs

Side-by-side tabs for better content organization.

Product Design Process

Our design process focuses on user needs, creating intuitive interfaces that solve real problems.

Responsive Tabs

Tabs that adapt to different screen sizes.

Dashboard Overview

View all your important metrics and data at a glance with our comprehensive dashboard.

Modern Tabs

Contemporary tab design with smooth transitions.

Architectural Design

Our architectural designs blend form and function to create stunning, practical spaces.

Card Tabs

Tabs styled as cards for a unique interface.

Welcome Home

Your dashboard overview with all the important information and quick actions.

Slider Components

Basic Range Slider

A simple range slider with value display.

Adjust Value 50

Styled Range Slider

A custom styled range slider with enhanced visuals.

Brightness 75%

Dual Range Slider

A range slider with two handles for selecting a range of values.

Price Range

$25 - $75

Vertical Slider

A vertical orientation slider for different UI needs.

Volume

Audio Mixer Slider

Multiple vertical sliders simulating an audio mixer.

Bass

Mid

Treble

Volume

Image Comparison Slider

Compare two images with a draggable slider.

Drag the slider to compare images

Interactive Component Library

Fully Responsive

Interactive Elements

Customizable

Buttons

Basic Buttons

Primary & Secondary

Outlined Buttons

Button Sizes

Size Variations

Full Width

Button States

Interactive States

Loading State

Advanced Buttons

Icon Buttons

Animated Buttons

Button Groups

Horizontal Group

Toggle Buttons

Example Usage

Form Submission

Call to Action

Ready to get started?

Interactive Demo

Button Customizer

Preview

Generated Code:

Forms

Basic Form Elements

Text Inputs

Selection Controls

Form Layouts

Stacked Form

Inline Form

Form Validation

Inline Validation

Custom Validation States

Advanced Form Components

Custom Select

Toggle Switch

Range Slider

File Upload

Date Picker

Contact Form Example

Get in Touch

Component Cards

Basic Card

Image Card

Horizontal Card

Flip Card

Back Side

Expandable Card

Interactive Card

Modal Components

Standard Modal

Side Drawer

Bottom Sheet

Popup/Tooltip

Confirmation Modal

Image Modal

Accordion Components

Basic Accordion

FAQ Accordion

Nested Accordion

Multi-section Accordion

Tab Components

Basic Tabs

Product Overview

Key Features

Technical Specifications

Styled Tabs

About Our Company

Our Services

Contact Us

Vertical Tabs

Product Design Process

Development Workflow

Quality Assurance

Responsive Tabs