All Components
Browse our entire library of ready-to-use components. Copy the code, paste into your project, and customize to fit your needs.
FAQ Accordion
A clean FAQ Tailwind CSS Accordion block featuring collapsible question-and-answer sections with smooth animations and rotating chevron icons. Perfect for organizing frequently asked questions, help documentation, or any content that benefits from expandable sections to save space while maintaining easy access to information component.
LTR
RTL
<section class="py-20 bg-white dark:bg-gray-900" x-data="{ inView: false }" x-init="setTimeout(() => inView = true, 500)">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<!-- Section Header -->
<div class="text-center mb-16">
<div :class="{ 'opacity-100 translate-y-0': inView, 'opacity-0 translate-y-8': !inView }" class="transition-all duration-1000 ease-out">
<h2 class="text-4xl sm:text-5xl font-bold text-gray-900 dark:text-white mb-4">
Frequently Asked Questions
</h2>
<p class="text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">
Find answers to common questions about our services and how we can help your business succeed.
</p>
</div>
</div>
<!-- FAQ Accordion -->
<div class="space-y-4">
<div x-data="{ open: false }" :class="{ 'opacity-100 translate-y-0': inView, 'opacity-0 translate-y-8': !inView }" class="transition-all duration-1000 ease-out delay-200">
<button @click="open = !open" class="w-full flex justify-between items-center bg-gray-50 dark:bg-gray-800 rounded-2xl p-6 text-left hover:shadow-lg transition-shadow duration-300">
<h3 class="text-xl font-semibold text-gray-900 dark:text-white">What services do you offer?</h3>
<svg :class="{ 'rotate-180': open }" class="w-6 h-6 text-gray-600 dark:text-gray-300 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
</svg>
</button>
<div x-show="open" x-transition class="bg-gray-50 dark:bg-gray-800 rounded-b-2xl p-6 text-gray-600 dark:text-gray-300">
<p>We offer a range of services including web development, mobile apps, cloud solutions, data analytics, digital marketing, and IT consulting. Each service is tailored to meet your specific business needs.</p>
</div>
</div>
<div x-data="{ open: false }" :class="{ 'opacity-100 translate-y-0': inView, 'opacity-0 translate-y-8': !inView }" class="transition-all duration-1000 ease-out delay-400">
<button @click="open = !open" class="w-full flex justify-between items-center bg-gray-50 dark:bg-gray-800 rounded-2xl p-6 text-left hover:shadow-lg transition-shadow duration-300">
<h3 class="text-xl font-semibold text-gray-900 dark:text-white">How long does a typical project take?</h3>
<svg :class="{ 'rotate-180': open }" class="w-6 h-6 text-gray-600 dark:text-gray-300 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
</svg>
</button>
<div x-show="open" x-transition class="bg-gray-50 dark:bg-gray-800 rounded-b-2xl p-6 text-gray-600 dark:text-gray-300">
<p>Project timelines vary depending on complexity and scope. A standard website might take 4-8 weeks, while complex applications or cloud solutions could take 3-6 months. We provide detailed timelines during the consultation phase.</p>
</div>
</div>
<div x-data="{ open: false }" :class="{ 'opacity-100 translate-y-0': inView, 'opacity-0 translate-y-8': !inView }" class="transition-all duration-1000 ease-out delay-600">
<button @click="open = !open" class="w-full flex justify-between items-center bg-gray-50 dark:bg-gray-800 rounded-2xl p-6 text-left hover:shadow-lg transition-shadow duration-300">
<h3 class="text-xl font-semibold text-gray-900 dark:text-white">Do you provide ongoing support?</h3>
<svg :class="{ 'rotate-180': open }" class="w-6 h-6 text-gray-600 dark:text-gray-300 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
</svg>
</button>
<div x-show="open" x-transition class="bg-gray-50 dark:bg-gray-800 rounded-b-2xl p-6 text-gray-600 dark:text-gray-300">
<p>Yes, we offer ongoing support and maintenance for all our services, including regular updates, security patches, and performance optimization, depending on your plan.</p>
</div>
</div>
<div x-data="{ open: false }" :class="{ 'opacity-100 translate-y-0': inView, 'opacity-0 translate-y-8': !inView }" class="transition-all duration-1000 ease-out delay-800">
<button @click="open = !open" class="w-full flex justify-between items-center bg-gray-50 dark:bg-gray-800 rounded-2xl p-6 text-left hover:shadow-lg transition-shadow duration-300">
<h3 class="text-xl font-semibold text-gray-900 dark:text-white">Can you customize solutions for my business?</h3>
<svg :class="{ 'rotate-180': open }" class="w-6 h-6 text-gray-600 dark:text-gray-300 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
</svg>
</button>
<div x-show="open" x-transition class="bg-gray-50 dark:bg-gray-800 rounded-b-2xl p-6 text-gray-600 dark:text-gray-300">
<p>Absolutely! We specialize in creating tailored solutions to fit your unique business requirements, ensuring maximum efficiency and impact.</p>
</div>
</div>
</div>
</div>
</section>Feedback Form
A clean Tailwind CSS Feedback Form block featuring essential fields for name, email, and message with a prominent submit button. It's perfect for collecting user feedback, suggestions, or general comments with a professional, user-friendly design component.
LTR
RTL
<section class="py-20 bg-white dark:bg-gray-900">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<!-- Section Header -->
<div class="text-center mb-16" x-data="{ inView: false }" x-init="setTimeout(() => inView = true, 500)">
<div :class="{ 'opacity-100 translate-y-0': inView, 'opacity-0 translate-y-8': !inView }" class="transition-all duration-1000 ease-out">
<h2 class="text-4xl sm:text-5xl font-bold text-gray-900 dark:text-white mb-4">
Share Your Feedback
</h2>
<p class="text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">
We value your input! Let us know how we can improve WavyKits to better serve your needs.
</p>
</div>
</div>
<!-- Feedback Form -->
<div x-data="{ inView: false }" x-init="setTimeout(() => inView = true, 500)" :class="{ 'opacity-100 translate-y-0': inView, 'opacity-0 translate-y-8': !inView }" class="transition-all duration-1000 ease-out delay-200">
<div class="bg-gray-50 dark:bg-gray-800 rounded-2xl p-6">
<div class="space-y-6">
<div>
<label for="name" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Name</label>
<input type="text" id="name" name="name" class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm p-2.5" placeholder="Your Name">
</div>
<div>
<label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Email</label>
<input type="email" id="email" name="email" class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm p-2.5" placeholder="Your Email">
</div>
<div>
<label for="feedback" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Your Feedback</label>
<textarea id="feedback" name="feedback" rows="5" class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm p-2.5" placeholder="Share your thoughts about WavyKits..."></textarea>
</div>
<div class="flex items-center">
<input id="satisfaction" name="satisfaction" type="checkbox" class="h-4 w-4 text-blue-500 focus:ring-blue-500 border-gray-300 dark:border-gray-600 rounded">
<label for="satisfaction" class="ml-2 block text-sm text-gray-700 dark:text-gray-300">I am satisfied with WavyKits features</label>
</div>
<div>
<button
@click="alert('Feedback submitted! Thank you for your input.')"
class="w-full sm:w-auto px-6 py-3 bg-blue-500 text-white rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors duration-200"
>
Submit Feedback
</button>
</div>
</div>
</div>
</div>
</div>
</section>Grid Portfolio Showcase
A clean, responsive Tailwind CSS Portfolio section featuring a grid of project thumbnails. Each item has a hover-activated overlay that displays the project title, a brief description, and a "View Project" link, providing a professional and interactive way to showcase work component.
LTR
RTL
<section class=" dark:bg-gray-900 max-w-4xl mx-auto px-4 transition-colors duration-300">
<!-- Portfolio Content -->
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-8 transition-colors duration-300">
<!-- Header -->
<h1 class="text-3xl font-bold text-center text-gray-800 dark:text-white mb-2">My Portfolio</h1>
<p class="text-gray-600 dark:text-gray-300 text-center mb-8">A selection of my recent work</p>
<!-- Portfolio Grid -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<!-- Portfolio Item 1 -->
<div class="relative overflow-hidden rounded-lg group">
<img src="https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80"
alt="E-commerce Website" class="w-full h-64 object-cover rounded-lg">
<div class="absolute inset-0 bg-black dark:bg-gray-900 bg-opacity-70 dark:bg-opacity-80 flex flex-col justify-center items-center p-4 opacity-0 group-hover:opacity-100 transition-opacity duration-300 text-white text-center">
<h3 class="text-xl font-semibold mb-2">E-commerce Website</h3>
<p class="text-gray-200 dark:text-gray-300">A modern online store with product filtering and cart functionality.</p>
<a href="#" class="inline-flex items-center mt-4 px-4 py-2 bg-blue-500 dark:bg-blue-600 bg-opacity-80 hover:bg-opacity-100 rounded transition-colors duration-300 text-white">
View Project <i class="fas fa-external-link-alt ml-2"></i>
</a>
</div>
</div>
<!-- Portfolio Item 2 -->
<div class="relative overflow-hidden rounded-lg group">
<img src="https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80"
alt="Fitness Mobile App" class="w-full h-64 object-cover rounded-lg">
<div class="absolute inset-0 bg-black dark:bg-gray-900 bg-opacity-70 dark:bg-opacity-80 flex flex-col justify-center items-center p-4 opacity-0 group-hover:opacity-100 transition-opacity duration-300 text-white text-center">
<h3 class="text-xl font-semibold mb-2">Fitness Mobile App</h3>
<p class="text-gray-200 dark:text-gray-300">A workout tracking application with personalized exercise plans.</p>
<a href="#" class="inline-flex items-center mt-4 px-4 py-2 bg-blue-500 dark:bg-blue-600 bg-opacity-80 hover:bg-opacity-100 rounded transition-colors duration-300 text-white">
View Project <i class="fas fa-external-link-alt ml-2"></i>
</a>
</div>
</div>
<!-- Portfolio Item 3 -->
<div class="relative overflow-hidden rounded-lg group">
<img src="https://images.unsplash.com/photo-1447933601403-0c6688de566e?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80"
alt="Coffee Shop Branding" class="w-full h-64 object-cover rounded-lg">
<div class="absolute inset-0 bg-black dark:bg-gray-900 bg-opacity-70 dark:bg-opacity-80 flex flex-col justify-center items-center p-4 opacity-0 group-hover:opacity-100 transition-opacity duration-300 text-white text-center">
<h3 class="text-xl font-semibold mb-2">Coffee Shop Branding</h3>
<p class="text-gray-200 dark:text-gray-300">Complete branding package for a local coffee shop.</p>
<a href="#" class="inline-flex items-center mt-4 px-4 py-2 bg-blue-500 dark:bg-blue-600 bg-opacity-80 hover:bg-opacity-100 rounded transition-colors duration-300 text-white">
View Project <i class="fas fa-external-link-alt ml-2"></i>
</a>
</div>
</div>
</div>
</div>
</section>Hero Section with Animated Gradients
A full-screen Tailwind CSS Hero Section with a bold headline, call-to-action buttons, and key statistics. Features an animated image and a dynamic background with soft, blurred gradient shapes component.
LTR
RTL
<section class="relative overflow-hidden min-h-[100vh] bg-white dark:bg-gray-900">
<div class="absolute inset-0 overflow-hidden">
<div class="absolute -top-1/2 -right-1/2 rtl:-left-1/2 rtl:right-auto bg-blue-400/20 dark:bg-blue-600/20 blur-3xl w-[384px] h-[384px] rounded-full">
</div>
<div class="absolute -bottom-1/2 -left-1/2 rtl:-right-1/2 rtl:left-auto bg-purple-400/20 dark:bg-purple-600/20 blur-3xl w-[384px] h-[384px] rounded-full">
</div>
</div>
<div class="relative z-10 mx-auto px-4 pt-20 pb-16 sm:px-6 lg:px-8">
<div class="items-center grid gap-12 min-h-[80vh] lg:grid-cols-2">
<div class="space-y-8">
<h1 class="text-5xl font-bold text-gray-900 leading-tight sm:text-6xl lg:text-7xl dark:text-white">
Build the Future Today
</h1>
<p class="text-xl text-gray-600 leading-relaxed dark:text-gray-300">
Transform your ideas into reality with our cutting-edge solutions. We help businesses innovate, scale, and succeed in the digital age.
</p>
<div class="flex-col sm:flex-row flex gap-4">
<button class="transform transition-all duration-200 px-8 py-4 rounded-lg bg-blue-600 font-semibold text-white shadow-lg">Get Started</button>
<button class="transition-all duration-200 px-8 py-4 border-2 border-gray-300 rounded-lg bg-transparent font-semibold text-gray-700 dark:border-solid dark:border-blue-400 dark:text-blue-400">Learn More</button>
</div>
<div class="grid grid-cols-3 gap-8 pt-8">
<div class="text-center">
<div class="text-3xl font-bold text-gray-900 dark:text-white">
10K+
</div>
<div class="text-sm text-gray-600 dark:text-gray-400">
Happy Clients
</div>
</div>
<div class="text-center">
<div class="text-3xl font-bold text-gray-900 dark:text-white">
99%
</div>
<div class="text-sm text-gray-600 dark:text-gray-400">
Success Rate
</div>
</div>
<div class="text-center">
<div class="text-3xl font-bold text-gray-900 dark:text-white">
24/7
</div>
<div class="text-sm text-gray-600 dark:text-gray-400">
Support
</div>
</div>
</div>
</div>
<div class="relative" x-data="{ imageLoaded: false }" x-init="setTimeout(() => imageLoaded = true, 300)">
<div :class="{ 'opacity-100 scale-100': imageLoaded, 'opacity-0 scale-95': !imageLoaded }" class="transition-all duration-1000 ease-out">
<div class="relative overflow-hidden rounded-3xl shadow-2xl">
<img src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="Team collaboration" class="object-cover w-full h-[384px]" />
<div class="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent">
</div>
<div class="absolute top-6 left-6 rtl:right-6 rtl:left-auto bg-white/90 dark:bg-gray-800/90 backdrop-blur-sm px-4 py-2 rounded-full shadow-lg">
<div class="items-center space-x-2 rtl:space-x-reverse flex">
<div class="animate-pulse w-[8px] h-[8px] rounded-full bg-green-500">
</div>
<span class="text-sm font-medium text-gray-700 dark:text-gray-300">Live Now</span>
</div>
</div>
</div>
</div>
<div class="absolute -top-4 -right-4 rtl:-left-4 rtl:right-auto opacity-80 animate-pulse w-[80px] h-[80px] rounded-full bg-yellow-400">
</div>
<div class="absolute -bottom-4 -left-4 rtl:-right-4 rtl:left-auto opacity-60 animate-pulse w-[64px] h-[64px] rounded-full bg-pink-400" style="animation-delay: 1s;">
</div>
</div>
</div>
</div>
<div class="absolute bottom-8 left-1/2 transform -translate-x-1/2 animate-bounce">
<svg class="w-[24px] h-[24px] text-gray-400 dark:text-gray-500" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"></path></svg>
</div>
</section>Hierarchical Breadcrumb Navigation
A responsive Tailwind CSS Breadcrumb component dynamically displaying a navigational hierarchy with clickable links for previous pages and a highlighted current page. Features smooth hover transitions, a home icon, styled with a modern, shadowed container component.
LTR
RTL
<div class="max-w-4xl mx-auto my-16">
<!-- Basic Breadcrumb with RTL Support -->
<div class="bg-white p-6 rounded-lg shadow-sm mb-8">
<nav aria-label="Breadcrumb" class="flex items-center space-x-2 rtl:space-x-reverse rtl:space-x-0 rtl:space-x-reverse text-sm">
<a href="/" class="text-blue-600 hover:text-blue-800 transition-colors duration-200 flex items-center">
<svg class="w-4 h-4 mr-1 rtl:mr-0 rtl:ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m3 12 2-2m0 0 7-7 7 7M5 10v10a1 1 0 0 0 1 1h3m10-11 2 2m-2-2v10a1 1 0 0 1-1 1h-3m-6 0a1 1 0 0 0 1-1v-4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v4a1 1 0 0 0 1 1m-6 0h6"></path>
</svg>
Home
</a>
<svg class="w-4 h-4 text-gray-400 mx-2 rtl:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 18 6-6-6-6"></path>
</svg>
<a href="/products" class="text-blue-600 hover:text-blue-800 transition-colors duration-200">Products</a>
<svg class="w-4 h-4 text-gray-400 mx-2 rtl:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 18 6-6-6-6"></path>
</svg>
<a href="/products/electronics" class="text-blue-600 hover:text-blue-800 transition-colors duration-200">Electronics</a>
<svg class="w-4 h-4 text-gray-400 mx-2 rtl:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 18 6-6-6-6"></path>
</svg>
<a href="/products/electronics/smartphones" class="text-blue-600 hover:text-blue-800 transition-colors duration-200">Smartphones</a>
<svg class="w-4 h-4 text-gray-400 mx-2 rtl:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 18 6-6-6-6"></path>
</svg>
<span class="text-gray-500 font-medium" aria-current="page">iPhone 15 Pro</span>
</nav>
</div>
</div>Interactive Comment Section
A dynamic Tailwind CSS Comment Section component where users can view existing comments and submit new ones. The component features a simple form for adding a name and comment and a real-time updating comment list component.
LTR
RTL
<div x-data="{
comments: [
{
name: 'Sarah Chen',
text: 'Great article! Mindful coding really helps me stay focused.',
timestamp: new Date(Date.now() - 5 * 60 * 1000).toLocaleString(),
timeAgo: '5 minutes ago'
}
],
newComment: '',
newName: '',
addComment() {
if (this.newComment.trim() && this.newName.trim()) {
this.comments.push({
name: this.newName,
text: this.newComment,
timestamp: new Date().toLocaleString(),
timeAgo: 'just now'
});
this.newComment = '';
this.newName = '';
}
}
}" class="max-w-3xl mx-auto px-4 py-8 bg-white shadow-sm">
<h2 class="text-2xl font-bold text-gray-900 mb-6">Comments</h2>
<!-- Comment Input -->
<div class="mb-6 space-y-4">
<input
x-model="newName"
placeholder="Your name"
class="w-full p-4 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
type="text"
>
<textarea
x-model="newComment"
placeholder="Add your comment..."
class="w-full p-4 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 resize-y"
rows="4"
></textarea>
<button
@click="addComment"
class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
>
Post Comment
</button>
</div>
<!-- Comments List -->
<div class="space-y-4">
<template x-for="comment in comments" :key="comment.timestamp">
<div class="border-l-4 border-blue-600 bg-gray-50 p-4 rounded-r-lg">
<div class="flex justify-between items-baseline mb-2">
<span x-text="comment.name" class="font-semibold text-gray-900"></span>
<span x-text="comment.timeAgo" class="text-sm text-gray-500"></span>
</div>
<p x-text="comment.text" class="text-gray-800"></p>
</div>
</template>
</div>
</div>Interactive Image Gallery
An interactive and responsive Tailwind CSS Image Gallery that showcases a collection of images. It features a "Load More" button to progressively display more images, and elegant hover effects to reveal image titles and categories component.
LTR
RTL
<div class="max-w-7xl mx-auto">
<h1 class="text-4xl font-bold text-gray-900 dark:text-white mb-2 text-center rtl:text-right">Image Gallery</h1>
<p class="text-gray-600 dark:text-gray-400 text-center rtl:text-right mb-8">Browse through our collection of stunning images</p>
<!-- Gallery Component -->
<div x-data="{
images: [
{ id: 1, title: 'Mountain Sunrise', category: 'nature', thumbnail: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=400&q=80' },
{ id: 2, title: 'City Skyline', category: 'urban', thumbnail: 'https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=400&q=80' },
{ id: 3, title: 'Portrait Session', category: 'portrait', thumbnail: 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=400&q=80' },
{ id: 4, title: 'Forest Path', category: 'nature', thumbnail: 'https://images.unsplash.com/photo-1448375240586-882707db888b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=400&q=80' },
{ id: 5, title: 'Urban Architecture', category: 'urban', thumbnail: 'https://images.unsplash.com/photo-1487958449943-2429e8be8625?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=400&q=80' },
{ id: 6, title: 'Beach Sunset', category: 'nature', thumbnail: 'https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=400&q=80' },
{ id: 7, title: 'Street Photography', category: 'urban', thumbnail: 'https://images.unsplash.com/photo-1513475382585-d06e58bcb0e0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=400&q=80' },
{ id: 8, title: 'Professional Portrait', category: 'portrait', thumbnail: 'https://images.unsplash.com/photo-1544005313-94ddf0286df2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=400&q=80' }
],
loadedCount: 8
}"
class="bg-white dark:bg-gray-800 rounded-xl shadow-lg dark:shadow-2xl overflow-hidden p-6">
<!-- Gallery Grid -->
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-4">
<template x-for="(image, index) in images.slice(0, loadedCount)" :key="image.id">
<div class="rounded-lg overflow-hidden relative group transform transition-transform duration-300 hover:scale-105 hover:shadow-xl dark:hover:shadow-2xl">
<img
:src="image.thumbnail"
:alt="image.title"
class="w-full h-64 object-cover"
>
<div class="absolute inset-0 bg-black/0 group-hover:bg-black/40 transition-all duration-300 flex items-end p-4 rtl:flex-row-reverse">
<div class="transform translate-y-4 group-hover:translate-y-0 transition-transform duration-300 rtl:text-right">
<h3 class="text-white font-semibold text-lg rtl:text-right" x-text="image.title"></h3>
<p class="text-gray-300 text-sm rtl:text-right" x-text="image.category"></p>
</div>
</div>
</div>
</template>
</div>
<!-- Load More Button -->
<div x-show="loadedCount < images.length" class="text-center rtl:text-right mt-8">
<button
@click="loadedCount += 4"
class="bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 text-white px-6 py-3 rounded-full transition-colors duration-300 shadow-md hover:shadow-lg"
>
Load More Images
</button>
</div>
</div>
</div>Interactive Profile Setup Form
A comprehensive Tailwind CSS Profile Setup form for users to complete their profile after registration. It features a clean layout, an interactive avatar uploader with a live preview, and sections for personal, professional, and social information. The form includes real-time validation on blur, a character counter for the bio, and a smooth transition to a success state upon completion component.
LTR
RTL
<section class="relative overflow-hidden min-h-screen bg-white dark:bg-gray-900 flex items-center justify-center py-12">
<!-- Background elements -->
<div class="absolute inset-0 overflow-hidden">
<div class="absolute -top-1/2 -right-1/2 bg-blue-400/20 dark:bg-blue-600/20 blur-3xl w-96 h-96 rounded-full"></div>
<div class="absolute -bottom-1/2 -left-1/2 bg-purple-400/20 dark:bg-purple-600/20 blur-3xl w-96 h-96 rounded-full"></div>
</div>
<div class="relative z-10 mx-auto px-4 w-full max-w-2xl">
<!-- Header -->
<div class="text-center mb-8">
<h1 class="text-3xl font-bold text-gray-900 leading-tight sm:text-4xl dark:text-white">Complete Your Profile</h1>
<p class="mt-2 text-gray-600 dark:text-gray-400">Tell us more about yourself to personalize your experience</p>
</div>
<!-- Profile Setup Form Container -->
<div class="bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm rounded-2xl shadow-xl p-8 border border-gray-200/50 dark:border-gray-700/50"
x-data="{
submitting: false,
showSuccess: false,
formData: {
avatar: '',
firstName: '',
lastName: '',
bio: '',
location: '',
website: '',
jobTitle: '',
company: '',
facebook: '',
linkedin: ''
},
errors: {},
validateField(fieldName, value) {
this.errors[fieldName] = '';
if (fieldName === 'firstName') {
if (!value.trim()) return 'First name is required';
}
if (fieldName === 'lastName') {
if (!value.trim()) return 'Last name is required';
}
if (fieldName === 'bio') {
if (value.length > 200) return 'Bio must be less than 200 characters';
}
if (fieldName === 'website') {
if (value && !/^(https?:\/\/)?([\da-z.-]+)\.([a-z.]{2,6})([/\w .-]*)*\/?$/.test(value)) {
return 'Please enter a valid website URL';
}
}
if (fieldName === 'facebook') {
if (value && !/^(https?:\/\/)?(www\.)?facebook\.com\/[a-zA-Z0-9(\.\?)?]/.test(value)) {
return 'Please enter a valid Facebook URL';
}
}
return '';
},
validateForm() {
this.errors = {};
let isValid = true;
// Validate required fields
Object.keys(this.formData).forEach(field => {
if (field === 'firstName' || field === 'lastName') {
const error = this.validateField(field, this.formData[field]);
if (error) {
this.errors[field] = error;
isValid = false;
}
}
});
// Validate optional fields if they have values
['bio', 'website', 'facebook'].forEach(field => {
if (this.formData[field]) {
const error = this.validateField(field, this.formData[field]);
if (error) {
this.errors[field] = error;
isValid = false;
}
}
});
return isValid;
},
async submitForm() {
if (!this.validateForm()) {
// Scroll to first error
const firstError = document.querySelector('.error-input');
if (firstError) {
firstError.scrollIntoView({ behavior: 'smooth', block: 'center' });
firstError.focus();
}
return;
}
this.submitting = true;
// Simulate API call
await new Promise(resolve => setTimeout(resolve, 1500));
// Show success message
this.showSuccess = true;
this.submitting = false;
},
handleAvatarUpload(event) {
const file = event.target.files[0];
if (file) {
if (file.size > 2 * 1024 * 1024) { // 2MB limit
alert('File size must be less than 2MB');
return;
}
const reader = new FileReader();
reader.onload = (e) => {
this.formData.avatar = e.target.result;
};
reader.readAsDataURL(file);
}
}
}">
<!-- Profile Setup Form -->
<form @submit.prevent="submitForm" x-show="!showSuccess" x-transition>
<div class="space-y-8">
<!-- Avatar Section -->
<div class="text-center">
<div class="avatar-upload inline-block mb-4 relative">
<div class="relative w-32 h-32 mx-auto rounded-full border-2 border-dashed border-gray-300 dark:border-gray-600 flex items-center justify-center overflow-hidden">
<!-- Profile Image -->
<template x-if="formData.avatar">
<img :src="formData.avatar" alt="Profile preview" class="w-full h-full object-cover rounded-full">
</template>
<!-- Placeholder Icon -->
<template x-if="!formData.avatar">
<div class="flex items-center justify-center w-full h-full text-gray-400">
<svg class="w-12 h-12" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
</svg>
</div>
</template>
<!-- Hover Overlay -->
<div class="absolute inset-0 bg-black bg-opacity-30 rounded-full flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity duration-200 cursor-pointer">
<svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"></path>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"></path>
</svg>
</div>
<!-- Hidden File Input -->
<input type="file" accept="image/*" @change="handleAvatarUpload" class="absolute inset-0 w-full h-full opacity-0 cursor-pointer rounded-full">
</div>
</div>
<p class="text-sm text-gray-600 dark:text-gray-400">Click on the avatar to upload a profile picture</p>
</div>
<!-- Personal Information -->
<div>
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Personal Information</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label for="firstName" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">First Name</label>
<input type="text" id="firstName" x-model="formData.firstName"
@blur="errors.firstName = validateField('firstName', formData.firstName)"
:class="errors.firstName ? 'error-input' : ''"
class="w-full px-4 py-3 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none transition-all duration-200"
placeholder="John">
<div x-show="errors.firstName" x-text="errors.firstName" class="mt-1 text-sm text-red-600 dark:text-red-400"></div>
</div>
<div>
<label for="lastName" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Last Name</label>
<input type="text" id="lastName" x-model="formData.lastName"
@blur="errors.lastName = validateField('lastName', formData.lastName)"
:class="errors.lastName ? 'error-input' : ''"
class="w-full px-4 py-3 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none transition-all duration-200"
placeholder="Doe">
<div x-show="errors.lastName" x-text="errors.lastName" class="mt-1 text-sm text-red-600 dark:text-red-400"></div>
</div>
</div>
</div>
<!-- Bio -->
<div>
<label for="bio" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Bio</label>
<textarea id="bio" x-model="formData.bio" rows="3"
@blur="errors.bio = validateField('bio', formData.bio)"
:class="errors.bio ? 'error-input' : ''"
class="w-full px-4 py-3 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none transition-all duration-200"
placeholder="Tell us a bit about yourself..."></textarea>
<div class="flex justify-between mt-1">
<div x-show="errors.bio" x-text="errors.bio" class="text-sm text-red-600 dark:text-red-400"></div>
<div class="text-sm text-gray-500 dark:text-gray-400" x-text="`${200 - formData.bio.length} characters remaining`"></div>
</div>
</div>
<!-- Professional Information -->
<div>
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Professional Information</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label for="jobTitle" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Job Title</label>
<input type="text" id="jobTitle" x-model="formData.jobTitle"
class="w-full px-4 py-3 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none transition-all duration-200"
placeholder="Software Engineer">
</div>
<div>
<label for="company" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Company</label>
<input type="text" id="company" x-model="formData.company"
class="w-full px-4 py-3 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none transition-all duration-200"
placeholder="Acme Inc.">
</div>
</div>
</div>
<!-- Location & Website -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label for="location" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Location</label>
<input type="text" id="location" x-model="formData.location"
class="w-full px-4 py-3 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none transition-all duration-200"
placeholder="New York, NY">
</div>
<div>
<label for="website" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Website</label>
<input type="text" id="website" x-model="formData.website"
@blur="errors.website = validateField('website', formData.website)"
:class="errors.website ? 'error-input' : ''"
class="w-full px-4 py-3 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none transition-all duration-200"
placeholder="https://example.com">
<div x-show="errors.website" x-text="errors.website" class="mt-1 text-sm text-red-600 dark:text-red-400"></div>
</div>
</div>
<!-- Social Links -->
<div>
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Social Links</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label for="facebook" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1 flex items-center">
<svg class="w-4 h-4 mr-2 text-blue-600" fill="currentColor" viewBox="0 0 24 24">
<path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
</svg>
Facebook
</label>
<input type="text" id="facebook" x-model="formData.facebook"
@blur="errors.facebook = validateField('facebook', formData.facebook)"
:class="errors.facebook ? 'error-input' : ''"
class="w-full px-4 py-3 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none transition-all duration-200"
placeholder="https://facebook.com/username">
<div x-show="errors.facebook" x-text="errors.facebook" class="mt-1 text-sm text-red-600 dark:text-red-400"></div>
</div>
<div>
<label for="linkedin" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1 flex items-center">
<svg class="w-4 h-4 mr-2 text-blue-600" fill="currentColor" viewBox="0 0 24 24">
<path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/>
</svg>
LinkedIn
</label>
<input type="text" id="linkedin" x-model="formData.linkedin"
class="w-full px-4 py-3 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none transition-all duration-200"
placeholder="linkedin.com/in/username">
</div>
</div>
</div>
<!-- Action Buttons -->
<div class="pt-4">
<button type="submit" :disabled="submitting" class="w-full px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-70 disabled:cursor-not-allowed transition-colors duration-200 font-medium flex items-center justify-center">
<span x-show="!submitting">Complete Profile</span>
<span x-show="submitting" class="flex items-center">
<svg class="animate-spin -ml-1 mr-2 h-4 w-4 text-white" 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>
Saving Profile...
</span>
</button>
</div>
</div>
</form>
<!-- Success Message -->
<div x-show="showSuccess" x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="opacity-0 transform scale-95"
x-transition:enter-end="opacity-100 transform scale-100"
class="text-center py-8">
<div class="mb-4 flex justify-center">
<div class="w-16 h-16 rounded-full bg-green-100 dark:bg-green-900 flex items-center justify-center success-checkmark">
<svg class="w-8 h-8 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
</div>
</div>
<h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-2">Profile Updated Successfully!</h3>
<p class="text-gray-600 dark:text-gray-400 mb-6">Your profile has been updated with the new information.</p>
<div class="flex space-x-4">
<a href="#" class="flex-1 px-4 py-2 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200 font-medium text-center">
View Profile
</a>
<a href="#" class="flex-1 px-4 py-2 bg-blue-600 text-white text-center rounded-lg hover:bg-blue-700 transition-colors duration-200 font-medium">Go to Dashboard</a>
</div>
</div>
</div>
</div>
</section>Modal Dialog Component
A fully accessible and responsive Tailwind CSS Modal dialog component. It includes features like a semi-transparent backdrop, open/close animations component.
LTR
RTL
<div x-data="{ isOpen: true }" class="relative">
<!-- Button to open modal (if hidden) -->
<button
@click="isOpen = true"
class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 transition-colors duration-200 fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
>
Open Modal
</button>
<!-- Modal -->
<div
x-show="isOpen"
@click.away="isOpen = false"
class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 px-4"
x-cloak
>
<div
class="bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-md w-full p-6 transform transition-all duration-300"
:class="{ 'scale-100': isOpen, 'scale-95': !isOpen }"
@click.stop
>
<!-- Modal Header -->
<div class="flex justify-between items-center mb-4">
<h2 class="text-xl font-semibold text-gray-900 dark:text-gray-100">
<span class="block text-start">Modal Title</span>
</h2>
<button
@click="isOpen = false"
class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 transition-colors duration-200"
>
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
<!-- Modal Content -->
<div class="text-gray-700 dark:text-gray-300 mb-6 text-start">
<p>This is a simple modal component built with Tailwind CSS and Alpine.js.</p>
<p>It supports dark mode and RTL direction for accessibility.</p>
</div>
<!-- Modal Footer -->
<div class="flex justify-end space-x-2 rtl:space-x-reverse">
<button
@click="isOpen = false"
class="px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors duration-200"
>
Cancel
</button>
<button
@click="isOpen = false"
class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 transition-colors duration-200"
>
Confirm
</button>
</div>
</div>
</div>
</div>Modern Registration Form
A sleek, Tailwind CSS Authentication user-friendly registration form designed for modern web applications. It features a translucent, blurred background card effect, real-time client-side validation, password visibility toggles, and a distinct loading state upon submission. After successful submission, the form is replaced by a confirmation message component.
LTR
RTL
<section class="relative overflow-hidden min-h-screen bg-white dark:bg-gray-900 flex items-center justify-center py-12">
<!-- Background elements -->
<div class="absolute inset-0 overflow-hidden">
<div class="absolute -top-1/2 -right-1/2 bg-blue-400/20 dark:bg-blue-600/20 blur-3xl w-96 h-96 rounded-full"></div>
<div class="absolute -bottom-1/2 -left-1/2 bg-purple-400/20 dark:bg-purple-600/20 blur-3xl w-96 h-96 rounded-full"></div>
</div>
<div class="relative z-10 mx-auto px-4 w-full max-w-lg">
<!-- Logo/Brand -->
<div class="text-center mb-8">
<h1 class="text-3xl font-bold text-gray-900 leading-tight sm:text-4xl dark:text-white">Create Account</h1>
<p class="mt-2 text-gray-600 dark:text-gray-400">Join us and build the future today</p>
</div>
<!-- Single Page Form Container -->
<div class="bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm rounded-2xl shadow-xl p-8 border border-gray-200/50 dark:border-gray-700/50"
x-data="{
submitting: false,
showSuccess: false,
showPassword: false,
showConfirmPassword: false,
formData: {
firstName: '',
lastName: '',
email: '',
phone: '',
password: '',
confirmPassword: '',
terms: false
},
errors: {},
validateField(fieldName, value) {
this.errors[fieldName] = '';
if (fieldName === 'firstName') {
if (!value.trim()) return 'First name is required';
}
if (fieldName === 'lastName') {
if (!value.trim()) return 'Last name is required';
}
if (fieldName === 'email') {
if (!value.trim()) {
return 'Email is required';
} else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
return 'Please enter a valid email address';
}
}
if (fieldName === 'password') {
if (!value) {
return 'Password is required';
} else if (value.length < 8) {
return 'Password must be at least 8 characters';
}
}
if (fieldName === 'confirmPassword') {
if (value !== this.formData.password) {
return 'Passwords do not match';
}
}
if (fieldName === 'terms') {
if (!value) {
return 'You must accept the terms and conditions';
}
}
return '';
},
validateForm() {
this.errors = {};
let isValid = true;
// Validate all fields
Object.keys(this.formData).forEach(field => {
if (field !== 'phone') {
const error = this.validateField(field, this.formData[field]);
if (error) {
this.errors[field] = error;
isValid = false;
}
}
});
return isValid;
},
async submitForm() {
if (!this.validateForm()) {
// Scroll to first error
const firstError = document.querySelector('.error-input');
if (firstError) {
firstError.scrollIntoView({ behavior: 'smooth', block: 'center' });
firstError.focus();
}
return;
}
this.submitting = true;
// Simulate API call
await new Promise(resolve => setTimeout(resolve, 1500));
// Show success message
this.showSuccess = true;
this.submitting = false;
},
resetForm() {
this.formData = {
firstName: '',
lastName: '',
email: '',
phone: '',
password: '',
confirmPassword: '',
terms: false
};
this.errors = {};
this.showSuccess = false;
}
}">
<!-- Registration Form -->
<form @submit.prevent="submitForm" x-show="!showSuccess" x-transition>
<div class="space-y-6">
<h2 class="text-2xl font-bold text-gray-900 dark:text-white">Create Your Account</h2>
<!-- Personal Information -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label for="firstName" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">First Name</label>
<input type="text" id="firstName" x-model="formData.firstName"
@blur="errors.firstName = validateField('firstName', formData.firstName)"
:class="errors.firstName ? 'error-input' : ''"
class="w-full px-4 py-3 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none transition-all duration-200"
placeholder="John">
<div x-show="errors.firstName" x-text="errors.firstName" class="mt-1 text-sm text-red-600 dark:text-red-400"></div>
</div>
<div>
<label for="lastName" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Last Name</label>
<input type="text" id="lastName" x-model="formData.lastName"
@blur="errors.lastName = validateField('lastName', formData.lastName)"
:class="errors.lastName ? 'error-input' : ''"
class="w-full px-4 py-3 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none transition-all duration-200"
placeholder="Doe">
<div x-show="errors.lastName" x-text="errors.lastName" class="mt-1 text-sm text-red-600 dark:text-red-400"></div>
</div>
</div>
<div>
<label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Email Address</label>
<input type="email" id="email" x-model="formData.email"
@blur="errors.email = validateField('email', formData.email)"
:class="errors.email ? 'error-input' : ''"
class="w-full px-4 py-3 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none transition-all duration-200"
placeholder="you@example.com">
<div x-show="errors.email" x-text="errors.email" class="mt-1 text-sm text-red-600 dark:text-red-400"></div>
</div>
<div>
<label for="phone" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Phone Number (Optional)</label>
<input type="tel" id="phone" x-model="formData.phone"
class="w-full px-4 py-3 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none transition-all duration-200"
placeholder="+1 (555) 123-4567">
</div>
<div>
<label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Password</label>
<div class="relative">
<input :type="showPassword ? 'text' : 'password'" id="password" x-model="formData.password"
@blur="errors.password = validateField('password', formData.password)"
:class="errors.password ? 'error-input' : ''"
class="w-full px-4 py-3 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none transition-all duration-200 pr-10"
placeholder="••••••••">
<button type="button" @click="showPassword = !showPassword" class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300">
<svg x-show="!showPassword" class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
</svg>
<svg x-show="showPassword" class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"></path>
</svg>
</button>
</div>
<div x-show="errors.password" x-text="errors.password" class="mt-1 text-sm text-red-600 dark:text-red-400"></div>
</div>
<div>
<label for="confirmPassword" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Confirm Password</label>
<div class="relative">
<input :type="showConfirmPassword ? 'text' : 'password'" id="confirmPassword" x-model="formData.confirmPassword"
@blur="errors.confirmPassword = validateField('confirmPassword', formData.confirmPassword)"
:class="errors.confirmPassword ? 'error-input' : ''"
class="w-full px-4 py-3 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none transition-all duration-200 pr-10"
placeholder="••••••••">
<button type="button" @click="showConfirmPassword = !showConfirmPassword" class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300">
<svg x-show="!showConfirmPassword" class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
</svg>
<svg x-show="showConfirmPassword" class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"></path>
</svg>
</button>
</div>
<div x-show="errors.confirmPassword" x-text="errors.confirmPassword" class="mt-1 text-sm text-red-600 dark:text-red-400"></div>
</div>
<div class="mb-6">
<div class="flex items-start">
<div class="flex items-center h-5">
<input id="terms" x-model="formData.terms" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
</div>
<label for="terms" class="ml-2 text-sm text-gray-700 dark:text-gray-300">
I agree to the <a href="#" class="text-blue-600 hover:text-blue-500 dark:text-blue-400 dark:hover:text-blue-300">Terms and Conditions</a> and <a href="#" class="text-blue-600 hover:text-blue-500 dark:text-blue-400 dark:hover:text-blue-300">Privacy Policy</a>
</label>
</div>
<div x-show="errors.terms" x-text="errors.terms" class="mt-1 text-sm text-red-600 dark:text-red-400"></div>
</div>
<div class="flex justify-center">
<button type="submit" :disabled="submitting" class="w-full px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-70 disabled:cursor-not-allowed transition-colors duration-200 font-medium flex items-center justify-center">
<span x-show="!submitting">Create Account</span>
<span x-show="submitting" class="flex items-center">
<svg class="animate-spin -ml-1 mr-2 h-4 w-4 text-white" 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>
Creating Account...
</span>
</button>
</div>
</div>
</form>
<!-- Success Message -->
<div x-show="showSuccess" x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="opacity-0 transform scale-95"
x-transition:enter-end="opacity-100 transform scale-100"
class="text-center py-8">
<div class="mb-4 flex justify-center">
<div class="w-16 h-16 rounded-full bg-green-100 dark:bg-green-900 flex items-center justify-center success-checkmark">
<svg class="w-8 h-8 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
</div>
</div>
<h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-2">Account Created Successfully!</h3>
<p class="text-gray-600 dark:text-gray-400 mb-6">Welcome to our platform! We've sent a confirmation email to your address.</p>
<div class="bg-blue-50 dark:bg-blue-900/20 rounded-lg p-4 mb-6 text-left">
<h4 class="font-medium text-blue-800 dark:text-blue-300 mb-2">Your Account Details:</h4>
<p class="text-sm text-blue-700 dark:text-blue-400" x-text="`Email: ${formData.email}`"></p>
<p class="text-sm text-blue-700 dark:text-blue-400" x-text="`Name: ${formData.firstName} ${formData.lastName}`"></p>
</div>
<div class="flex space-x-4">
<button @click="resetForm" class="flex-1 px-4 py-2 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200 font-medium">
Create Another Account
</button>
<a href="#" class="flex-1 px-4 py-2 bg-blue-600 text-white text-center rounded-lg hover:bg-blue-700 transition-colors duration-200 font-medium">Go to Dashboard</a>
</div>
</div>
</div>
</div>
</section>