All Components
Browse our entire library of ready-to-use components. Copy the code, paste into your project, and customize to fit your needs.
Multi-Step Registration Form
A modern, Tailwind CSS Multi-Step Form multi-step registration form that breaks down the sign-up process into logical sections: Personal, Account, and Preferences. It features a dynamic progress bar, step-by-step validation, smooth transitions between steps, and a final success screen. This user-friendly approach improves user experience for longer forms component.
LTR
RTL
<section class="relative overflow-hidden min-h-[100vh] 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 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 w-full max-w-2xl">
<!-- 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>
<!-- Multi-step 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="{
currentStep: 1,
submitting: false,
showPassword: false,
showConfirmPassword: false,
steps: [
{ title: 'Personal', completed: false },
{ title: 'Account', completed: false },
{ title: 'Preferences', completed: false }
],
formData: {
firstName: '',
lastName: '',
email: '',
phone: '',
username: '',
password: '',
confirmPassword: '',
newsletter: true,
marketing: false,
accountType: 'personal',
terms: false
},
errors: {},
validateStep(step) {
this.errors = {};
if (step === 1) {
if (!this.formData.firstName.trim()) this.errors.firstName = 'First name is required';
if (!this.formData.lastName.trim()) this.errors.lastName = 'Last name is required';
if (!this.formData.email.trim()) {
this.errors.email = 'Email is required';
} else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(this.formData.email)) {
this.errors.email = 'Please enter a valid email address';
}
}
if (step === 2) {
if (!this.formData.username.trim()) this.errors.username = 'Username is required';
if (!this.formData.password) {
this.errors.password = 'Password is required';
} else if (this.formData.password.length < 8) {
this.errors.password = 'Password must be at least 8 characters';
}
if (this.formData.password !== this.formData.confirmPassword) {
this.errors.confirmPassword = 'Passwords do not match';
}
}
if (step === 3) {
if (!this.formData.terms) {
this.errors.terms = 'You must accept the terms and conditions';
}
}
return Object.keys(this.errors).length === 0;
},
nextStep() {
if (this.validateStep(this.currentStep)) {
this.steps[this.currentStep - 1].completed = true;
this.currentStep++;
}
},
prevStep() {
if (this.currentStep > 1) {
this.currentStep--;
}
},
async submitForm() {
if (!this.validateStep(3)) return;
this.submitting = true;
// Simulate API call
await new Promise(resolve => setTimeout(resolve, 2000));
// Move to success step
this.currentStep = 4;
this.submitting = false;
},
// Calculate the progress line width
getProgressWidth() {
if (this.currentStep === 1) return '0%';
if (this.currentStep === 2) return '50%';
if (this.currentStep === 3 || this.currentStep === 4) return '100%';
return '0%';
},
// Check if step is completed
isStepCompleted(index) {
return index < this.currentStep - 1;
},
// Check if step is active
isStepActive(index) {
return index === this.currentStep - 1;
}
}">
<!-- Progress Steps -->
<div class="mb-8">
<div class="flex justify-between relative">
<!-- Progress Line -->
<div class="absolute top-4 left-0 right-0 h-0.5 bg-gray-200 dark:bg-gray-700 -z-10">
<div class="h-full bg-blue-600 transition-all duration-500 ease-in-out"
x-bind:style="`width: ${getProgressWidth()}`"></div>
</div>
<!-- Step Indicators -->
<template x-for="(step, index) in steps" :key="index">
<div class="flex flex-col items-center relative z-10">
<div class="w-8 h-8 rounded-full flex items-center justify-center transition-all duration-300 border-2"
:class="{
'bg-blue-600 border-blue-600 text-white': isStepCompleted(index) || isStepActive(index),
'bg-white dark:bg-gray-800 border-gray-300 dark:border-gray-600 text-gray-500': !isStepCompleted(index) && !isStepActive(index)
}">
<span x-text="index + 1"
:class="{
'text-white': isStepCompleted(index) || isStepActive(index),
'text-gray-500': !isStepCompleted(index) && !isStepActive(index)
}"></span>
</div>
<span class="mt-2 text-sm font-medium"
:class="{
'text-blue-600': isStepCompleted(index) || isStepActive(index),
'text-gray-500': !isStepCompleted(index) && !isStepActive(index)
}" x-text="step.title"></span>
</div>
</template>
</div>
</div>
<!-- Multi-step Form -->
<form @submit.prevent="submitForm">
<!-- Step 1: Personal Information -->
<div x-show="currentStep === 1" x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="opacity-0 transform translate-x-8"
x-transition:enter-end="opacity-100 transform translate-x-0"
class="space-y-6">
<h2 class="text-2xl font-bold text-gray-900 dark:text-white">Personal Information</h2>
<div class="grid 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" class="w-full form-input 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 focus:ring-2 focus:ring-blue-500 transition-all duration-200" placeholder="John" required>
<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" class="w-full form-input 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 focus:ring-2 focus:ring-blue-500 transition-all duration-200" placeholder="Doe" required>
<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" class="w-full form-input 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 focus:ring-2 focus:ring-blue-500 transition-all duration-200" placeholder="you@example.com" required>
<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</label>
<input type="tel" id="phone" x-model="formData.phone" class="w-full form-input 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 focus:ring-2 focus:ring-blue-500 transition-all duration-200" placeholder="+1 (555) 123-4567">
<div x-show="errors.phone" x-text="errors.phone" class="mt-1 text-sm text-red-600 dark:text-red-400"></div>
</div>
<div class="flex justify-end">
<button type="button" @click="nextStep" class="px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors duration-200 font-medium">
Continue
</button>
</div>
</div>
<!-- Step 2: Account Setup -->
<div x-show="currentStep === 2" x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="opacity-0 transform translate-x-8"
x-transition:enter-end="opacity-100 transform translate-x-0"
class="space-y-6">
<h2 class="text-2xl font-bold text-gray-900 dark:text-white">Account Setup</h2>
<div>
<label for="username" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Username</label>
<input type="text" id="username" x-model="formData.username" class="w-full form-input 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 focus:ring-2 focus:ring-blue-500 transition-all duration-200" placeholder="johndoe" required>
<div x-show="errors.username" x-text="errors.username" class="mt-1 text-sm text-red-600 dark:text-red-400"></div>
</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" class="w-full form-input 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 focus:ring-2 focus:ring-blue-500 transition-all duration-200 pr-10" placeholder="••••••••" required>
<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" class="w-full form-input 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 focus:ring-2 focus:ring-blue-500 transition-all duration-200 pr-10" placeholder="••••••••" required>
<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="flex justify-between">
<button type="button" @click="prevStep" class="px-6 py-3 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">
Back
</button>
<button type="button" @click="nextStep" class="px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors duration-200 font-medium">
Continue
</button>
</div>
</div>
<!-- Step 3: Preferences & Finalization -->
<div x-show="currentStep === 3" x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="opacity-0 transform translate-x-8"
x-transition:enter-end="opacity-100 transform translate-x-0"
class="space-y-6">
<h2 class="text-2xl font-bold text-gray-900 dark:text-white">Preferences & Finalization</h2>
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">Communication Preferences</label>
<div class="space-y-3">
<div class="flex items-start">
<div class="flex items-center h-5">
<input id="newsletter" x-model="formData.newsletter" 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="newsletter" class="ml-2 text-sm text-gray-700 dark:text-gray-300">
Send me product updates and newsletters
</label>
</div>
<div class="flex items-start">
<div class="flex items-center h-5">
<input id="marketing" x-model="formData.marketing" 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="marketing" class="ml-2 text-sm text-gray-700 dark:text-gray-300">
Send me marketing communications
</label>
</div>
</div>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">Account Type</label>
<div class="grid grid-cols-2 gap-4">
<div>
<input type="radio" id="personal" name="accountType" x-model="formData.accountType" value="personal" class="hidden peer">
<label for="personal" class="flex flex-col p-4 border border-gray-300 dark:border-gray-600 rounded-lg cursor-pointer peer-checked:border-blue-600 peer-checked:bg-blue-50 dark:peer-checked:bg-blue-900/20 transition-colors duration-200">
<span class="font-medium text-gray-900 dark:text-white">Personal</span>
<span class="text-sm text-gray-600 dark:text-gray-400">For individual use</span>
</label>
</div>
<div>
<input type="radio" id="business" name="accountType" x-model="formData.accountType" value="business" class="hidden peer">
<label for="business" class="flex flex-col p-4 border border-gray-300 dark:border-gray-600 rounded-lg cursor-pointer peer-checked:border-blue-600 peer-checked:bg-blue-50 dark:peer-checked:bg-blue-900/20 transition-colors duration-200">
<span class="font-medium text-gray-900 dark:text-white">Business</span>
<span class="text-sm text-gray-600 dark:text-gray-400">For teams and organizations</span>
</label>
</div>
</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" required>
</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-between">
<button type="button" @click="prevStep" class="px-6 py-3 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">
Back
</button>
<button type="submit" :disabled="submitting" class="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">
<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>
<!-- Success Message -->
<div x-show="currentStep === 4" 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">
<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="`Username: ${formData.username}`"></p>
<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="`Account Type: ${formData.accountType === 'personal' ? 'Personal' : 'Business'}`"></p>
</div>
<a href="#" class="inline-block px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors duration-200 font-medium">Go to Dashboard</a>
</div>
</form>
</div>
</div>
</section>Multi-Type Alert Banners
A set of versatile Tailwind CSS Alert components for displaying success, error, warning, and informational messages. Each alert is styled with a distinct color and icon for clear visual communication component.
LTR
RTL
<div class="flex flex-col items-center justify-center min-h-screen px-4 space-y-4">
<!-- Success Alert -->
<div class="flex items-center p-4 bg-green-100 dark:bg-green-900 border-l-4 border-green-500 dark:border-green-400 text-green-700 dark:text-green-200 w-full max-w-md rounded-r-lg">
<svg class="w-6 h-6 mr-2 rtl:mr-0 rtl:ml-2" 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>
<span class="text-start">Success: Operation completed successfully!</span>
</div>
<!-- Error Alert -->
<div class="flex items-center p-4 bg-red-100 dark:bg-red-900 border-l-4 border-red-500 dark:border-red-400 text-red-700 dark:text-red-200 w-full max-w-md rounded-r-lg">
<svg class="w-6 h-6 mr-2 rtl:mr-0 rtl:ml-2" 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>
<span class="text-start">Error: Something went wrong.</span>
</div>
<!-- Warning Alert -->
<div class="flex items-center p-4 bg-yellow-100 dark:bg-yellow-900 border-l-4 border-yellow-500 dark:border-yellow-400 text-yellow-700 dark:text-yellow-200 w-full max-w-md rounded-r-lg">
<svg class="w-6 h-6 mr-2 rtl:mr-0 rtl:ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
<span class="text-start">Warning: Proceed with caution.</span>
</div>
<!-- Info Alert -->
<div class="flex items-center p-4 bg-blue-100 dark:bg-blue-900 border-l-4 border-blue-500 dark:border-blue-400 text-blue-700 dark:text-blue-200 w-full max-w-md rounded-r-lg">
<svg class="w-6 h-6 mr-2 rtl:mr-0 rtl:ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
<span class="text-start">Info: Here's some information for you.</span>
</div>
</div>Newsletter Subscription Form with Toast Notifications
A clean and modern Tailwind CSS Newsletter subscription component. It features a simple input form and a "Subscribe" button, complemented by an elegant toast notification system that provides instant, non-intrusive feedback for success or validation errors component.
LTR
RTL
<div x-data="{
email: '',
showToast: false,
toastMessage: '',
toastSuccess: false,
validateEmail(email) {
const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return re.test(email);
},
subscribe() {
if (!this.email.trim()) {
this.toastMessage = 'Please enter an email address';
this.toastSuccess = false;
this.showToast = true;
setTimeout(() => { this.showToast = false; }, 3000);
} else if (!this.validateEmail(this.email)) {
this.toastMessage = 'Please enter a valid email address';
this.toastSuccess = false;
this.showToast = true;
setTimeout(() => { this.showToast = false; }, 3000);
} else {
this.toastMessage = 'Thank you for subscribing!';
this.toastSuccess = true;
this.showToast = true;
this.email = '';
setTimeout(() => { this.showToast = false; }, 3000);
}
}
}" class="max-w-3xl mx-auto px-4 py-8 bg-white shadow-sm">
<!-- Toast Notification -->
<div
x-show="showToast"
x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="opacity-0 transform translate-y-4"
x-transition:enter-end="opacity-100 transform translate-y-0"
x-transition:leave="transition ease-in duration-300"
x-transition:leave-end="opacity-0 transform translate-y-4"
:class="toastSuccess ? 'bg-white text-green-600' : 'bg-white text-red-600'"
class="fixed top-4 right-4 px-4 py-2 rounded-lg shadow-lg flex items-center space-x-2"
>
<svg
x-show="toastSuccess"
class="w-5 h-5"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
<svg
x-show="!toastSuccess"
class="w-5 h-5"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
<span x-text="toastMessage"></span>
</div>
<h2 class="text-2xl font-bold text-gray-900 mb-6">Subscribe to Our Newsletter</h2>
<p class="text-gray-700 mb-6">
Stay updated with the latest insights on mindful coding and software development. Join our community today!
</p>
<div class="flex flex-col sm:flex-row gap-4">
<input
x-model="email"
type="email"
placeholder="Enter your email"
class="flex-1 p-4 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
>
<button
@click="subscribe"
class="px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
>
Subscribe
</button>
</div>
<p class="text-sm text-gray-500 mt-4">
We respect your privacy. Unsubscribe at any time.
</p>
</div>Onyx Glassmorphism Header
A premium, Tailwind CSS Header Navigation sticky navigation bar featuring a frosted-glass effect, a pill-shaped centered menu with dropdowns, an integrated search modal, and a responsive mobile drawer with accordion navigation component.
LTR
RTL
<div x-data="{ searchOpen: false, mobileOpen: false, dropdownOpen: false }">
<header class="fixed top-0 left-0 w-full z-40 bg-white/80 dark:bg-gray-950/80 backdrop-blur-md border-b border-gray-200 dark:border-gray-800 font-sans rtl:text-right">
<div class="container mx-auto px-6 h-20 flex items-center justify-between">
<!-- Logo -->
<a href="#" class="text-2xl font-black tracking-tighter flex items-center gap-2 text-gray-900 dark:text-white z-50">
<div class="w-6 h-6 bg-black dark:bg-white rounded-full"></div>
ONYX.
</a>
<!-- Desktop Nav -->
<nav class="hidden md:flex relative items-center bg-gray-100/50 dark:bg-gray-900/50 p-1.5 rounded-full border border-gray-200 dark:border-gray-800"
x-data="{ hovered: null, rect: { left: 0, width: 0 } }">
<a href="#" class="relative z-10 px-5 py-2 text-sm font-bold text-white bg-black dark:bg-white dark:text-black rounded-full shadow-md transition-all">Home</a>
<a href="#" class="relative z-10 px-5 py-2 text-sm font-bold text-gray-600 dark:text-gray-400 hover:text-black dark:hover:text-white transition-colors">Work</a>
<!-- Desktop Dropdown -->
<div class="relative" @mouseenter="dropdownOpen = true" @mouseleave="dropdownOpen = false">
<button class="relative z-10 px-5 py-2 text-sm font-bold text-gray-600 dark:text-gray-400 hover:text-black dark:hover:text-white transition-colors flex items-center gap-1">
Services
<svg class="w-3 h-3 transition-transform duration-300" :class="dropdownOpen ? 'rotate-180' : ''" 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="dropdownOpen"
x-transition:enter="transition ease-out duration-200"
x-transition:enter-start="opacity-0 translate-y-2"
x-transition:enter-end="opacity-100 translate-y-0"
x-transition:leave="transition ease-in duration-150"
x-transition:leave-start="opacity-100 translate-y-0"
x-transition:leave-end="opacity-0 translate-y-2"
class="absolute top-full left-1/2 -translate-x-1/2 pt-4 w-56">
<div class="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl shadow-xl p-2 overflow-hidden">
<a href="#" class="block px-4 py-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 text-sm font-bold text-gray-700 dark:text-gray-200">Web Development</a>
<a href="#" class="block px-4 py-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 text-sm font-bold text-gray-700 dark:text-gray-200">App Design</a>
<a href="#" class="block px-4 py-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 text-sm font-bold text-gray-700 dark:text-gray-200">SEO Strategy</a>
</div>
</div>
</div>
<a href="#" class="relative z-10 px-5 py-2 text-sm font-bold text-gray-600 dark:text-gray-400 hover:text-black dark:hover:text-white transition-colors">Agency</a>
</nav>
<!-- Desktop Actions -->
<div class="hidden md:flex items-center gap-4">
<button @click="searchOpen = true" class="flex items-center gap-2 px-3 py-2 text-sm text-gray-500 hover:text-black dark:hover:text-white border border-transparent hover:border-gray-200 dark:hover:border-gray-800 rounded-lg transition-all group">
<svg 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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
<span class="hidden lg:inline">Search...</span>
<kbd class="hidden lg:inline-block bg-gray-100 dark:bg-gray-800 px-2 py-0.5 rounded text-xs font-mono group-hover:bg-gray-200">⌘K</kbd>
</button>
<a href="#" class="bg-black dark:bg-white text-white dark:text-black px-5 py-2.5 rounded-lg text-sm font-bold hover:opacity-80 transition-opacity">Start Project</a>
</div>
<!-- Mobile Burger (FIXED) -->
<button @click="mobileOpen = !mobileOpen"
class="md:hidden relative z-50 w-12 h-12 flex items-center justify-center text-gray-900 dark:text-white hover:bg-gray-100 dark:hover:bg-gray-800 rounded-full focus:outline-none transition-colors duration-200">
<div class="relative w-6 h-5">
<!-- Top line -->
<span class="absolute left-0 w-full h-0.5 bg-current rounded-full transition-all duration-300 ease-in-out origin-center"
:class="mobileOpen ? 'top-2.5 rotate-45' : 'top-0 rotate-0'">
</span>
<!-- Middle line -->
<span class="absolute left-0 w-full h-0.5 bg-current rounded-full transition-all duration-300 ease-in-out top-2.5"
:class="mobileOpen ? 'opacity-0 scale-x-0' : 'opacity-100 scale-x-100'">
</span>
<!-- Bottom line -->
<span class="absolute left-0 w-full h-0.5 bg-current rounded-full transition-all duration-300 ease-in-out origin-center"
:class="mobileOpen ? 'top-2.5 -rotate-45' : 'top-5 rotate-0'">
</span>
</div>
</button>
</div>
<!-- Mobile Menu -->
<div x-show="mobileOpen"
x-collapse
class="md:hidden border-t border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-950 absolute w-full left-0 top-20 h-[calc(100vh-80px)] overflow-y-auto">
<div class="p-6 space-y-6">
<!-- Mobile Search -->
<div class="relative">
<svg class="absolute left-4 top-3.5 h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
<input type="text" placeholder="Search..." class="w-full bg-gray-100 dark:bg-gray-900 border-none rounded-xl py-3 pl-12 text-gray-900 dark:text-white focus:ring-2 focus:ring-black dark:focus:ring-white">
</div>
<div class="space-y-2">
<a href="#" class="block px-4 py-3 rounded-lg bg-gray-100 dark:bg-gray-900 text-black dark:text-white font-bold text-lg">Home</a>
<a href="#" class="block px-4 py-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-900 text-gray-600 dark:text-gray-400 font-bold text-lg">Work</a>
<!-- Mobile Accordion -->
<div x-data="{ expanded: false }">
<button @click="expanded = !expanded" class="w-full flex items-center justify-between px-4 py-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-900 text-gray-600 dark:text-gray-400 font-bold text-lg">
Services
<svg class="w-5 h-5 transition-transform duration-300" :class="expanded ? 'rotate-180' : ''" 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="expanded" x-collapse class="pl-4">
<a href="#" class="block px-4 py-3 text-gray-500 dark:text-gray-500 font-medium">Web Development</a>
<a href="#" class="block px-4 py-3 text-gray-500 dark:text-gray-500 font-medium">App Design</a>
<a href="#" class="block px-4 py-3 text-gray-500 dark:text-gray-500 font-medium">SEO Strategy</a>
</div>
</div>
<a href="#" class="block px-4 py-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-900 text-gray-600 dark:text-gray-400 font-bold text-lg">Agency</a>
</div>
<a href="#" class="block w-full text-center bg-black dark:bg-white text-white dark:text-black px-5 py-4 rounded-xl text-lg font-bold">
Start Project
</a>
</div>
</div>
</header>
<!-- Search Modal -->
<div x-show="searchOpen"
@keydown.escape.window="searchOpen = false"
class="fixed inset-0 z-[60] overflow-y-auto px-4 py-4 md:py-20 sm:px-6 md:px-0"
role="dialog" aria-modal="true" style="display: none;">
<div class="fixed inset-0 bg-gray-500/40 dark:bg-black/60 backdrop-blur-sm transition-opacity" @click="searchOpen = false"></div>
<div class="relative mx-auto max-w-2xl transform rounded-2xl bg-white dark:bg-gray-900 p-2 shadow-2xl ring-1 ring-black ring-opacity-5 transition-all">
<div class="relative">
<svg class="pointer-events-none absolute left-4 top-3.5 h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a1 1 0 11-1.414 1.414l-3.329-3.328A7 7 0 012 9z" clip-rule="evenodd" /></svg>
<input type="text" class="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-gray-900 dark:text-white placeholder:text-gray-400 focus:ring-0 sm:text-sm" placeholder="Search..." autofocus>
</div>
</div>
</div>
</div>Pricing Plans Section
A responsive, three-column Tailwind CSS Pricing section with distinct plans, a highlighted 'Most Popular' option, and clear feature lists for easy comparison component.
LTR
RTL
<section class="py-20 bg-gray-50 dark:bg-gray-800">
<div class="mx-auto px-4 sm:px-6 lg:px-8">
<div class="mb-16 text-center">
<h2 class="mb-4 text-4xl font-bold text-gray-900 sm:text-5xl dark:text-white">
Simple, Transparent Pricing
</h2>
<p class="mx-auto text-xl text-gray-600 dark:text-gray-300">
Choose the perfect plan for your business needs. All plans include our core features with no hidden fees.
</p>
</div>
<div class="grid gap-8 mb-16 md:grid-cols-3">
<div class="transition-shadow duration-300 p-8 border border-gray-200 rounded-2xl bg-white shadow-lg dark:border-gray-700 dark:bg-gray-900">
<div class="mb-8 text-center">
<h3 class="mb-2 text-2xl font-bold text-gray-900 dark:text-white">
Starter
</h3>
<p class="mb-6 text-gray-600 dark:text-gray-300">
Perfect for small businesses getting started
</p>
<div class="items-baseline justify-center flex">
<span class="text-4xl font-bold text-gray-900 dark:text-white">$</span><span class="text-5xl font-bold text-gray-900 dark:text-white">29</span><span class="ml-1 rtl:mr-1 rtl:ml-0 text-xl text-gray-600 dark:text-gray-300">/month</span>
</div>
</div>
<ul class="space-y-4 mb-8">
<li class="items-start flex">
<svg class="w-5 h-5 text-green-500 mr-3 rtl:ml-3 rtl:mr-0 mt-0.5" 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>
<span class="text-gray-700 dark:text-gray-300">Up to 5 team members</span>
</li>
<li class="items-start flex">
<svg class="w-5 h-5 text-green-500 mr-3 rtl:ml-3 rtl:mr-0 mt-0.5" 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>
<span class="text-gray-700 dark:text-gray-300">10GB cloud storage</span>
</li>
<li class="items-start flex">
<svg class="w-5 h-5 text-green-500 mr-3 rtl:ml-3 rtl:mr-0 mt-0.5" 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>
<span class="text-gray-700 dark:text-gray-300">Basic analytics</span>
</li>
<li class="items-start flex">
<svg class="w-5 h-5 text-green-500 mr-3 rtl:ml-3 rtl:mr-0 mt-0.5" 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>
<span class="text-gray-700 dark:text-gray-300">Email support</span>
</li>
<li class="items-start flex">
<svg class="w-5 h-5 text-green-500 mr-3 rtl:ml-3 rtl:mr-0 mt-0.5" 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>
<span class="text-gray-700 dark:text-gray-300">SSL certificate</span>
</li>
</ul>
<button class="transition-all duration-200 w-full px-6 py-3 border-2 border-gray-300 rounded-lg bg-transparent font-semibold text-gray-700 dark:border-blue-400 dark:text-blue-400">Get Started</button>
</div>
<div class="relative transition-shadow duration-300 transform p-8 border-2 border-blue-600 rounded-2xl bg-white shadow-xl dark:border-blue-400 dark:bg-gray-900">
<div class="absolute -top-4 left-1/2 transform -translate-x-1/2">
<span class="px-4 py-2 rounded-full bg-blue-600 text-sm font-medium text-white">Most Popular</span>
</div>
<div class="mb-8 text-center">
<h3 class="mb-2 text-2xl font-bold text-gray-900 dark:text-white">
Professional
</h3>
<p class="mb-6 text-gray-600 dark:text-gray-300">
Ideal for growing businesses and teams
</p>
<div class="items-baseline justify-center flex">
<span class="text-4xl font-bold text-gray-900 dark:text-white">$</span><span class="text-5xl font-bold text-gray-900 dark:text-white">79</span><span class="ml-1 rtl:mr-1 rtl:ml-0 text-xl text-gray-600 dark:text-gray-300">/month</span>
</div>
</div>
<ul class="space-y-4 mb-8">
<li class="items-start flex">
<svg class="w-5 h-5 text-green-500 mr-3 rtl:ml-3 rtl:mr-0 mt-0.5" 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>
<span class="text-gray-700 dark:text-gray-300">Up to 25 team members</span>
</li>
<li class="items-start flex">
<svg class="w-5 h-5 text-green-500 mr-3 rtl:ml-3 rtl:mr-0 mt-0.5" 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>
<span class="text-gray-700 dark:text-gray-300">100GB cloud storage</span>
</li>
<li class="items-start flex">
<svg class="w-5 h-5 text-green-500 mr-3 rtl:ml-3 rtl:mr-0 mt-0.5" 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>
<span class="text-gray-700 dark:text-gray-300">Advanced analytics & reporting</span>
</li>
<li class="items-start flex">
<svg class="w-5 h-5 text-green-500 mr-3 rtl:ml-3 rtl:mr-0 mt-0.5" 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>
<span class="text-gray-700 dark:text-gray-300">Priority support & live chat</span>
</li>
<li class="items-start flex">
<svg class="w-5 h-5 text-green-500 mr-3 rtl:ml-3 rtl:mr-0 mt-0.5" 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>
<span class="text-gray-700 dark:text-gray-300">API access & integrations</span>
</li>
<li class="items-start flex">
<svg class="w-5 h-5 text-green-500 mr-3 rtl:ml-3 rtl:mr-0 mt-0.5" 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>
<span class="text-gray-700 dark:text-gray-300">Advanced security features</span>
</li>
</ul>
<button class="transform transition-all duration-200 w-full px-6 py-3 rounded-lg bg-blue-600 font-semibold text-white shadow-lg">Start Free Trial</button>
</div>
<div class="transition-shadow duration-300 p-8 border border-gray-200 rounded-2xl bg-white shadow-lg dark:border-gray-700 dark:bg-gray-900">
<div class="mb-8 text-center">
<h3 class="mb-2 text-2xl font-bold text-gray-900 dark:text-white">
Enterprise
</h3>
<p class="mb-6 text-gray-600 dark:text-gray-300">
For large organizations with custom needs
</p>
<div class="items-baseline justify-center flex">
<span class="text-4xl font-bold text-gray-900 dark:text-white">$</span><span class="text-5xl font-bold text-gray-900 dark:text-white">199</span><span class="ml-1 rtl:mr-1 rtl:ml-0 text-xl text-gray-600 dark:text-gray-300">/month</span>
</div>
</div>
<ul class="space-y-4 mb-8">
<li class="items-start flex">
<svg class="w-5 h-5 text-green-500 mr-3 rtl:ml-3 rtl:mr-0 mt-0.5" 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>
<span class="text-gray-700 dark:text-gray-300">Unlimited team members</span>
</li>
<li class="items-start flex">
<svg class="w-5 h-5 text-green-500 mr-3 rtl:ml-3 rtl:mr-0 mt-0.5" 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>
<span class="text-gray-700 dark:text-gray-300">1TB cloud storage</span>
</li>
<li class="items-start flex">
<svg class="w-5 h-5 text-green-500 mr-3 rtl:ml-3 rtl:mr-0 mt-0.5" 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>
<span class="text-gray-700 dark:text-gray-300">Custom analytics & dashboards</span>
</li>
<li class="items-start flex">
<svg class="w-5 h-5 text-green-500 mr-3 rtl:ml-3 rtl:mr-0 mt-0.5" 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>
<span class="text-gray-700 dark:text-gray-300">24/7 dedicated support</span>
</li>
<li class="items-start flex">
<svg class="w-5 h-5 text-green-500 mr-3 rtl:ml-3 rtl:mr-0 mt-0.5" 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>
<span class="text-gray-700 dark:text-gray-300">Advanced API & custom integrations</span>
</li>
<li class="items-start flex">
<svg class="w-5 h-5 text-green-500 mr-3 rtl:ml-3 rtl:mr-0 mt-0.5" 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>
<span class="text-gray-700 dark:text-gray-300">Enterprise-grade security & compliance</span>
</li>
</ul>
<button class="transform transition-all duration-200 w-full px-6 py-3 rounded-lg bg-gray-900 font-semibold text-white shadow-lg dark:bg-gray-100 dark:text-gray-900">Contact Sales</button>
</div>
</div>
</div>
</section>Professional Team Showcase Section
A visually Tailwind CSS Team Section engaging team showcase section featuring a grid of interactive profile cards. Each card includes a professional profil picture with a hover-zoom effect, an expandable section for detailed biographies, and social media links, all designed to be fully responsive component.
LTR
RTL
<section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 bg-white dark:bg-gray-900">
<!-- Header -->
<header class="text-center mb-16">
<h2 class="text-4xl font-bold text-gray-900 mb-4">Meet Our Team</h2>
<p class="text-xl text-gray-600 max-w-3xl mx-auto">
Passionate professionals dedicated to innovation and excellence
</p>
</header>
<!-- Team Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-16">
<!-- Team Member Card Component -->
<article x-data="{ expanded: false }"
class="bg-white rounded-2xl shadow-lg hover:shadow-2xl transition-all duration-300 overflow-hidden group">
<!-- Image -->
<div class="relative h-80 overflow-hidden">
<img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=400&fit=crop&crop=face"
alt="John Smith - CEO"
class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent"></div>
<div class="absolute bottom-4 left-4 text-white">
<h3 class="text-2xl font-bold">John Smith</h3>
<p class="text-blue-200 font-medium">CEO & Founder</p>
</div>
</div>
<!-- Content -->
<div class="p-6">
<p class="text-gray-600 leading-relaxed mb-4">
Visionary leader with 15+ years in tech innovation, driving company growth and strategic partnerships.
</p>
<!-- Expandable Details -->
<div x-show="expanded"
x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="opacity-0 transform -translate-y-2"
x-transition:enter-end="opacity-100 transform translate-y-0"
class="border-t border-gray-200 pt-4 mb-4">
<p class="text-gray-600 text-sm leading-relaxed">
Stanford MBA graduate who founded the company in 2010. Regular speaker at tech conferences and mentor to startup founders. Passionate about sustainable technology solutions.
</p>
</div>
<!-- Actions -->
<div class="flex items-center justify-between">
<button @click="expanded = !expanded"
class="text-blue-600 hover:text-blue-800 font-semibold transition-colors duration-200">
<span x-text="expanded ? 'Show Less' : 'Learn More'"></span>
</button>
<div class="flex space-x-3">
<a href="#" class="text-gray-400 hover:text-blue-600 transition-colors duration-200">
<svg class="w-5 h-5" 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>
</a>
</div>
</div>
</div>
</article>
<!-- Team Member 2 -->
<article x-data="{ expanded: false }"
class="bg-white rounded-2xl shadow-lg hover:shadow-2xl transition-all duration-300 overflow-hidden group">
<div class="relative h-80 overflow-hidden">
<img src="https://images.unsplash.com/photo-1614786269829-d24616faf56d?q=80&w=735&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="Sarah Johnson - Lead Designer"
class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent"></div>
<div class="absolute bottom-4 left-4 text-white">
<h3 class="text-2xl font-bold">Sarah Johnson</h3>
<p class="text-blue-200 font-medium">Lead Designer</p>
</div>
</div>
<div class="p-6">
<p class="text-gray-600 leading-relaxed mb-4">
Creative visionary specializing in user experience design with focus on accessibility and inclusive design.
</p>
<div x-show="expanded"
x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="opacity-0 transform -translate-y-2"
x-transition:enter-end="opacity-100 transform translate-y-0"
class="border-t border-gray-200 pt-4 mb-4">
<p class="text-gray-600 text-sm leading-relaxed">
8+ years designing user interfaces with awards for accessibility innovation. Leads design systems and mentors junior designers. Advocates for inclusive design practices.
</p>
</div>
<div class="flex items-center justify-between">
<button @click="expanded = !expanded"
class="text-blue-600 hover:text-blue-800 font-semibold transition-colors duration-200">
<span x-text="expanded ? 'Show Less' : 'Learn More'"></span>
</button>
<div class="flex space-x-3">
<a href="#" class="text-gray-400 hover:text-blue-600 transition-colors duration-200">
<svg class="w-5 h-5" 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>
</a>
</div>
</div>
</div>
</article>
<!-- Team Member 3 -->
<article x-data="{ expanded: false }"
class="bg-white rounded-2xl shadow-lg hover:shadow-2xl transition-all duration-300 overflow-hidden group">
<div class="relative h-80 overflow-hidden">
<img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop&crop=face"
alt="Mike Chen - Senior Developer"
class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent"></div>
<div class="absolute bottom-4 left-4 text-white">
<h3 class="text-2xl font-bold">Mike Chen</h3>
<p class="text-blue-200 font-medium">Senior Developer</p>
</div>
</div>
<div class="p-6">
<p class="text-gray-600 leading-relaxed mb-4">
Full-stack engineer with expertise in React, Node.js, and cloud architecture. Problem-solving enthusiast.
</p>
<div x-show="expanded"
x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="opacity-0 transform -translate-y-2"
x-transition:enter-end="opacity-100 transform translate-y-0"
class="border-t border-gray-200 pt-4 mb-4">
<p class="text-gray-600 text-sm leading-relaxed">
Key contributor to platform scaling initiatives. Mentors junior developers and actively contributes to open-source projects. Certified in AWS and Kubernetes.
</p>
</div>
<div class="flex items-center justify-between">
<button @click="expanded = !expanded"
class="text-blue-600 hover:text-blue-800 font-semibold transition-colors duration-200">
<span x-text="expanded ? 'Show Less' : 'Learn More'"></span>
</button>
<div class="flex space-x-3">
<a href="#" class="text-gray-400 hover:text-blue-600 transition-colors duration-200">
<svg class="w-5 h-5" 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>
</a>
</div>
</div>
</div>
</article>
</div>
</section>Responsive Sidebar Navigation Layout
A full-featured, responsive Tailwind CSS Sidebar layout component for application dashboards. It includes an animated collapsible sidebar, a main content area that adjusts its margin accordingly, a mobile overlay, and separate open/close controls for a seamless user experience on both desktop and mobile devices component.
LTR
RTL
<div class="flex min-h-screen">
<!-- Sidebar -->
<div
x-show="isSidebarOpen"
class="fixed inset-y-0 left-0 w-64 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-lg transform transition-transform duration-300 ease-in-out z-50"
:class="{ 'translate-x-0': isSidebarOpen, '-translate-x-full': !isSidebarOpen }"
x-cloak
>
<div class="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700">
<h2 class="text-lg font-semibold">Dashboard</h2>
<button
@click="isSidebarOpen = false"
class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-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>
<nav class="p-4 space-y-2">
<a href="#" class="flex items-center space-x-2 rtl:space-x-reverse p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors duration-200">
<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-5 h-5">
<path d="M1 6V15H6V11C6 9.89543 6.89543 9 8 9C9.10457 9 10 9.89543 10 11V15H15V6L8 0L1 6Z" fill="#000000"/>
</svg>
<span>Dashboard</span>
</a>
<a href="#" class="flex items-center space-x-2 rtl:space-x-reverse p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors duration-200">
<svg 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="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>
<span>Users</span>
</a>
<a href="#" class="flex items-center space-x-2 rtl:space-x-reverse p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors duration-200">
<svg 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 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path>
</svg>
<span>Analytics</span>
</a>
<a href="#" class="flex items-center space-x-2 rtl:space-x-reverse p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors duration-200">
<svg 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="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
</svg>
<span>Settings</span>
</a>
</nav>
</div>
<!-- Mobile Overlay -->
<div
x-show="isSidebarOpen"
@click="isSidebarOpen = false"
class="fixed inset-0 bg-black bg-opacity-50 z-40 md:hidden"
x-cloak
></div>
<!-- Main Content -->
<div class="flex-1 transition-all duration-300 ease-in-out" :class="{ 'md:ml-64': isSidebarOpen, 'md:ml-0': !isSidebarOpen }">
<div class="p-4">
<div class="flex items-center justify-between mb-4">
<button
@click="isSidebarOpen = !isSidebarOpen"
class="text-gray-900 dark:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-700 p-2 rounded-lg transition-colors duration-200"
>
<svg x-show="!isSidebarOpen" 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="M4 6h16M4 12h16M4 18h16"></path>
</svg>
</button>
<h1 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Dashboard Content</h1>
<div class="w-6 h-6"></div> <!-- Spacer for alignment -->
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6 mb-6">
<h2 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">Welcome to your dashboard</h2>
<p class="text-gray-700 dark:text-gray-300 mb-4">Use the sidebar to navigate through different sections like Users, Analytics, and Settings. The sidebar now works on both mobile and desktop devices.</p>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mt-6">
<div class="bg-blue-50 dark:bg-blue-900/20 p-4 rounded-lg border border-blue-200 dark:border-blue-800">
<h3 class="font-semibold text-blue-900 dark:text-blue-100">Users</h3>
<p class="text-blue-700 dark:text-blue-300 text-sm mt-1">Manage user accounts and permissions</p>
</div>
<div class="bg-green-50 dark:bg-green-900/20 p-4 rounded-lg border border-green-200 dark:border-green-800">
<h3 class="font-semibold text-green-900 dark:text-green-100">Analytics</h3>
<p class="text-green-700 dark:text-green-300 text-sm mt-1">View detailed reports and statistics</p>
</div>
<div class="bg-purple-50 dark:bg-purple-900/20 p-4 rounded-lg border border-purple-200 dark:border-purple-800">
<h3 class="font-semibold text-purple-900 dark:text-purple-100">Settings</h3>
<p class="text-purple-700 dark:text-purple-300 text-sm mt-1">Configure your dashboard preferences</p>
</div>
</div>
</div>
</div>
</div>
</div>Services Section
A clean, grid-based section to showcase Tailwind CSS Services, featuring animated cards with distinct icons, descriptive text, and a bulleted list of key features for each service 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="mx-auto px-4 sm:px-6 lg:px-8">
<div class="mb-16 text-center">
<div :class="{ 'opacity-100 translate-y-0': inView, 'opacity-0 translate-y-8': !inView }" class="transition-all duration-1000 ease-out">
<h2 class="mb-4 text-4xl font-bold text-gray-900 sm:text-5xl dark:text-white">
Our Services
</h2>
<p class="mx-auto text-xl text-gray-600 dark:text-gray-300">
Comprehensive solutions designed to accelerate your business growth and digital transformation.
</p>
</div>
</div>
<div class="grid gap-8 mb-20 md:grid-cols-2 lg:grid-cols-3">
<div :class="{ 'opacity-100 translate-y-0': inView, 'opacity-0 translate-y-8': !inView }" class="group transition-all duration-1000 ease-out delay-200 p-8 rounded-2xl bg-gray-50 dark:bg-gray-800">
<div class="items-center justify-center group-hover:bg-blue-600 transition-colors duration-300 flex w-[64px] h-[64px] mb-6 rounded-full bg-blue-100 dark:bg-blue-900">
<div>
<svg class="w-8 h-8 text-blue-600 dark:text-blue-400 group-hover:text-white transition-colors duration-300" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path></svg>
</div>
</div>
<h3 class="mb-4 text-2xl font-bold text-gray-900 dark:text-white">
Web Development
</h3>
<p class="mb-6 text-gray-600 dark:text-gray-300">
Custom websites and web applications built with modern technologies for optimal performance and user experience.
</p>
<ul class="space-y-2 text-sm text-gray-600 dark:text-gray-400">
<li class="items-center flex">
<svg class="w-4 h-4 text-blue-600 mr-2 rtl:ml-2 rtl:mr-0" 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>
<span class="text-gray-700 dark:text-gray-300">Responsive Design</span>
</li>
<li class="items-center flex">
<svg class="w-4 h-4 text-blue-600 mr-2 rtl:ml-2 rtl:mr-0" 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>
<span class="text-gray-700 dark:text-gray-300">SEO Optimization</span>
</li>
<li class="items-center flex">
<svg class="w-4 h-4 text-blue-600 mr-2 rtl:ml-2 rtl:mr-0" 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>
<span class="text-gray-700 dark:text-gray-300">Performance Optimization</span>
</li>
</ul>
</div>
<div :class="{ 'opacity-100 translate-y-0': inView, 'opacity-0 translate-y-8': !inView }" class="group transition-all duration-1000 ease-out delay-400 p-8 rounded-2xl bg-gray-50 dark:bg-gray-800">
<div class="items-center justify-center group-hover:bg-green-600 transition-colors duration-300 flex w-[64px] h-[64px] mb-6 rounded-full bg-green-100 dark:bg-green-900">
<div>
<svg class="w-8 h-8 text-green-600 dark:text-green-400 group-hover:text-white transition-colors duration-300" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"></path></svg>
</div>
</div>
<h3 class="mb-4 text-2xl font-bold text-gray-900 dark:text-white">
Mobile Apps
</h3>
<p class="mb-6 text-gray-600 dark:text-gray-300">
Native and cross-platform mobile applications that deliver exceptional user experiences on iOS and Android.
</p>
<ul class="space-y-2 text-sm text-gray-600 dark:text-gray-400">
<li class="items-center flex">
<svg class="w-4 h-4 text-green-600 mr-2 rtl:ml-2 rtl:mr-0" 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>
<span class="text-gray-700 dark:text-gray-300">iOS & Android</span>
</li>
<li class="items-center flex">
<svg class="w-4 h-4 text-green-600 mr-2 rtl:ml-2 rtl:mr-0" 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>
<span class="text-gray-700 dark:text-gray-300">Cross-platform</span>
</li>
<li class="items-center flex">
<svg class="w-4 h-4 text-green-600 mr-2 rtl:ml-2 rtl:mr-0" 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>
<span class="text-gray-700 dark:text-gray-300">App Store Ready</span>
</li>
</ul>
</div>
<div :class="{ 'opacity-100 translate-y-0': inView, 'opacity-0 translate-y-8': !inView }" class="group transition-all duration-1000 ease-out delay-600 p-8 rounded-2xl bg-gray-50 dark:bg-gray-800">
<div class="items-center justify-center group-hover:bg-purple-600 transition-colors duration-300 flex w-[64px] h-[64px] mb-6 rounded-full bg-purple-100 dark:bg-purple-900">
<div>
<svg class="w-8 h-8 text-purple-600 dark:text-purple-400 group-hover:text-white transition-colors duration-300" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M9 19l3 3m0 0l3-3m-3 3V10"></path></svg>
</div>
</div>
<h3 class="mb-4 text-2xl font-bold text-gray-900 dark:text-white">
Cloud Solutions
</h3>
<p class="mb-6 text-gray-600 dark:text-gray-300">
Scalable cloud infrastructure and services to ensure your applications run smoothly and securely at any scale.
</p>
<ul class="space-y-2 text-sm text-gray-600 dark:text-gray-400">
<li class="items-center flex">
<svg class="w-4 h-4 text-purple-600 mr-2 rtl:ml-2 rtl:mr-0" 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>
<span class="text-gray-700 dark:text-gray-300">AWS & Azure</span>
</li>
<li class="items-center flex">
<svg class="w-4 h-4 text-purple-600 mr-2 rtl:ml-2 rtl:mr-0" 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>
<span class="text-gray-700 dark:text-gray-300">Auto-scaling</span>
</li>
<li class="items-center flex">
<svg class="w-4 h-4 text-purple-600 mr-2 rtl:ml-2 rtl:mr-0" 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>
<span class="text-gray-700 dark:text-gray-300">Security First</span>
</li>
</ul>
</div>
</div>
</div>
</section>Shopping Cart List
A responsive, ready-to-use Tailwind CSS Shopping Cart List block built with Alpine.js. Copy the code and start building component.
LTR
RTL
<div x-data="{
items: [
{ id: 1, name: 'Wireless Headphones', price: 79.99, quantity: 1, image: 'https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=100&h=100&fit=crop' },
{ id: 2, name: 'Smart Watch', price: 199.99, quantity: 1, image: 'https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=100&h=100&fit=crop' }
],
get total() {
return this.items.reduce((sum, item) => sum + (item.price * item.quantity), 0).toFixed(2);
},
removeItem(id) {
this.items = this.items.filter(item => item.id !== id);
}
}" class="max-w-4xl mx-auto">
<div class="bg-white rounded-lg shadow p-6">
<h3 class="text-xl font-bold mb-4">Shopping Cart</h3>
<div class="space-y-4">
<template x-for="item in items" :key="item.id">
<div class="flex items-center gap-4 pb-4 border-b">
<img :src="item.image" :alt="item.name" class="w-20 h-20 object-cover rounded">
<div class="flex-1">
<h4 class="font-semibold" x-text="item.name"></h4>
<p class="text-gray-600" x-text="'$' + item.price"></p>
</div>
<div class="flex items-center gap-2">
<button @click="item.quantity = Math.max(1, item.quantity - 1)" class="w-8 h-8 border rounded hover:bg-gray-100">-</button>
<span class="w-8 text-center" x-text="item.quantity"></span>
<button @click="item.quantity++" class="w-8 h-8 border rounded hover:bg-gray-100">+</button>
</div>
<button @click="removeItem(item.id)" class="text-red-500 hover:text-red-700">Remove</button>
</div>
</template><div class="flex items-center gap-4 pb-4 border-b">
<img :src="item.image" :alt="item.name" class="w-20 h-20 object-cover rounded" src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=100&h=100&fit=crop" alt="Wireless Headphones">
<div class="flex-1">
<h4 class="font-semibold" x-text="item.name">Wireless Headphones</h4>
<p class="text-gray-600" x-text="'$' + item.price">$79.99</p>
</div>
<div class="flex items-center gap-2">
<button @click="item.quantity = Math.max(1, item.quantity - 1)" class="w-8 h-8 border rounded hover:bg-gray-100">-</button>
<span class="w-8 text-center" x-text="item.quantity">1</span>
<button @click="item.quantity++" class="w-8 h-8 border rounded hover:bg-gray-100">+</button>
</div>
<button @click="removeItem(item.id)" class="text-red-500 hover:text-red-700">Remove</button>
</div><div class="flex items-center gap-4 pb-4 border-b">
<img :src="item.image" :alt="item.name" class="w-20 h-20 object-cover rounded" src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=100&h=100&fit=crop" alt="Smart Watch">
<div class="flex-1">
<h4 class="font-semibold" x-text="item.name">Smart Watch</h4>
<p class="text-gray-600" x-text="'$' + item.price">$199.99</p>
</div>
<div class="flex items-center gap-2">
<button @click="item.quantity = Math.max(1, item.quantity - 1)" class="w-8 h-8 border rounded hover:bg-gray-100">-</button>
<span class="w-8 text-center" x-text="item.quantity">1</span>
<button @click="item.quantity++" class="w-8 h-8 border rounded hover:bg-gray-100">+</button>
</div>
<button @click="removeItem(item.id)" class="text-red-500 hover:text-red-700">Remove</button>
</div>
</div>
<div class="mt-6 pt-4 border-t">
<div class="flex justify-between text-xl font-bold mb-4">
<span>Total:</span>
<span x-text="'$' + total">$279.98</span>
</div>
<button class="w-full bg-blue-600 text-white py-3 rounded hover:bg-blue-700 transition">
Checkout
</button>
</div>
</div>
</div>Simple 404 Error Page
A clean and minimalist Tailwind CSS 404 Error Page component featuring centered content with a large "404" heading, clear error message, and a call-to-action button to guide users back to the homepage component.
LTR
RTL
<section class="py-20 px-4 text-center" 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 max-w-md mx-auto">
<!-- Error Code -->
<div class="text-9xl font-bold text-blue-600 dark:text-blue-400 mb-4">
404
</div>
<!-- Title -->
<h1 class="text-3xl font-bold text-gray-900 dark:text-white mb-4">
Page Not Found
</h1>
<!-- Description -->
<p class="text-lg text-gray-600 dark:text-gray-300 mb-8">
Sorry, we couldn't find the page you're looking for.
</p>
<!-- Action Button -->
<a href="/" class="inline-block px-6 py-3 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 transition-colors">
Go back home
</a>
</div>
</section>