Responsive Navbar
A modern navigation bar that collapses into a hamburger menu on mobile devices. Perfect for any web application.
Live Preview
<nav class="bg-white shadow-sm">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-16">
<div class="flex items-center">
<div class="flex-shrink-0">
<span class="text-xl font-bold text-gray-800">Brand</span>
</div>
<div class="hidden md:ml-6 md:flex md:space-x-8">
<a href="#" class="text-gray-700 hover:text-blue-600 px-3 py-2 text-sm font-medium">Home</a>
<a href="#" class="text-gray-700 hover:text-blue-600 px-3 py-2 text-sm font-medium">About</a>
<a href="#" class="text-gray-700 hover:text-blue-600 px-3 py-2 text-sm font-medium">Services</a>
<a href="#" class="text-gray-700 hover:text-blue-600 px-3 py-2 text-sm font-medium">Contact</a>
</div>
</div>
<div class="hidden md:flex items-center">
<button class="bg-blue-600 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-blue-700">Get Started</button>
</div>
<div class="md:hidden flex items-center">
<button id="mobile-menu-button" class="text-gray-700 hover:text-blue-600">
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
</div>
</div>
</div>
<div id="mobile-menu" class="md:hidden hidden bg-white border-t border-gray-200">
<div class="px-2 pt-2 pb-3 space-y-1">
<a href="#" class="text-gray-700 hover:text-blue-600 block px-3 py-2 text-base font-medium">Home</a>
<a href="#" class="text-gray-700 hover:text-blue-600 block px-3 py-2 text-base font-medium">About</a>
<a href="#" class="text-gray-700 hover:text-blue-600 block px-3 py-2 text-base font-medium">Services</a>
<a href="#" class="text-gray-700 hover:text-blue-600 block px-3 py-2 text-base font-medium">Contact</a>
<button class="w-full text-left bg-blue-600 text-white px-3 py-2 text-base font-medium rounded-md">Get Started</button>
</div>
</div>
</nav>const mobileMenuButton = document.getElementById('mobile-menu-button');
const mobileMenu = document.getElementById('mobile-menu');
mobileMenuButton.addEventListener('click', function() {
mobileMenu.classList.toggle('hidden');
});Premium Kits & Templates
Learn to Build It
Complete Guide to Flexbox
Master modern CSS layouts with comprehensive flexbox tutorial
Start Learning →Essential Dev Tools
Pricing Cards
Clean, conversion-optimized pricing tables with highlighted popular plans and clear feature comparisons.
Live Preview
Basic
$9
/month
- Up to 5 projects
- 2GB storage
- Email support
Most Popular
Pro
$29
/month
- Unlimited projects
- 100GB storage
- Priority support
- Advanced analytics
Enterprise
$99
/month
- Everything in Pro
- Unlimited storage
- 24/7 phone support
- Custom integrations
<div class="max-w-6xl mx-auto">
<div class="grid md:grid-cols-3 gap-8">
<!-- Basic Plan -->
<div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
<h3 class="text-lg font-semibold text-gray-900 mb-2">Basic</h3>
<div class="mb-4">
<span class="text-3xl font-bold text-gray-900">$9</span>
<span class="text-gray-600">/month</span>
</div>
<ul class="space-y-3 mb-6">
<li class="flex items-center text-gray-700">
<svg class="w-4 h-4 text-green-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
</svg>
Up to 5 projects
</li>
<li class="flex items-center text-gray-700">
<svg class="w-4 h-4 text-green-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
</svg>
2GB storage
</li>
<li class="flex items-center text-gray-700">
<svg class="w-4 h-4 text-green-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
</svg>
Email support
</li>
</ul>
<button class="w-full bg-gray-100 text-gray-900 py-2 px-4 rounded-md font-medium hover:bg-gray-200 transition-colors">Choose Basic</button>
</div>
<!-- Pro Plan (Most Popular) -->
<div class="bg-white rounded-lg shadow-lg border-2 border-blue-500 p-6 relative">
<div class="absolute -top-3 left-1/2 transform -translate-x-1/2">
<span class="bg-blue-500 text-white px-3 py-1 rounded-full text-sm font-medium">Most Popular</span>
</div>
<h3 class="text-lg font-semibold text-gray-900 mb-2">Pro</h3>
<div class="mb-4">
<span class="text-3xl font-bold text-gray-900">$29</span>
<span class="text-gray-600">/month</span>
</div>
<!-- Features list similar to above -->
<button class="w-full bg-blue-600 text-white py-2 px-4 rounded-md font-medium hover:bg-blue-700 transition-colors">Choose Pro</button>
</div>
<!-- Enterprise Plan -->
<div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
<!-- Similar structure to Basic Plan -->
</div>
</div>
</div>Premium Kits & Templates
Learn to Build It
Essential Dev Tools
Login Form
A clean, secure login form with proper validation and accessibility features. Perfect for authentication flows.
Live Preview
Welcome back
Please sign in to your account
Don't have an account? Sign up
<div class="max-w-md mx-auto">
<div class="bg-white rounded-lg shadow-sm border border-gray-200 p-8">
<div class="text-center mb-8">
<h2 class="text-2xl font-bold text-gray-900">Welcome back</h2>
<p class="text-gray-600 mt-2">Please sign in to your account</p>
</div>
<form class="space-y-6">
<div>
<label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email address</label>
<input type="email" id="email" name="email" required class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500" placeholder="Enter your email">
</div>
<div>
<label for="password" class="block text-sm font-medium text-gray-700 mb-1">Password</label>
<input type="password" id="password" name="password" required class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500" placeholder="Enter your password">
</div>
<div class="flex items-center justify-between">
<div class="flex items-center">
<input type="checkbox" id="remember-me" name="remember-me" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
<label for="remember-me" class="ml-2 block text-sm text-gray-700">Remember me</label>
</div>
<div>
<a href="#" class="text-sm text-blue-600 hover:text-blue-500">Forgot password?</a>
</div>
</div>
<div>
<button type="submit" class="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 font-medium">Sign in</button>
</div>
</form>
<div class="mt-6 text-center">
<p class="text-sm text-gray-600">
Don't have an account?
<a href="#" class="text-blue-600 hover:text-blue-500 font-medium">Sign up</a>
</p>
</div>
</div>
</div>Premium Kits & Templates
Learn to Build It
Essential Dev Tools
Confirmation Modal
A accessible modal dialog for critical user actions with overlay backdrop and focus management.
Live Preview
Confirm Deletion
Are you sure you want to delete this item? This action cannot be undone.
<!-- Trigger Button -->
<button id="delete-btn" class="bg-red-600 text-white px-6 py-2 rounded-md hover:bg-red-700 transition-colors font-medium">Delete Item</button>
<!-- Modal -->
<div id="modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 hidden z-50">
<div class="bg-white rounded-lg shadow-xl max-w-md w-full">
<div class="p-6">
<div class="flex items-center mb-4">
<div class="flex-shrink-0">
<svg class="h-6 w-6 text-red-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.996-.833-2.464 0L3.349 16.5c-.77.833.192 2.5 1.732 2.5z" />
</svg>
</div>
<div class="ml-3">
<h3 class="text-lg font-medium text-gray-900">Confirm Deletion</h3>
</div>
</div>
<div class="mb-6">
<p class="text-sm text-gray-600">Are you sure you want to delete this item? This action cannot be undone.</p>
</div>
<div class="flex space-x-3 justify-end">
<button id="cancel-btn" class="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-md transition-colors">Cancel</button>
<button id="confirm-btn" class="px-4 py-2 text-sm font-medium text-white bg-red-600 hover:bg-red-700 rounded-md transition-colors">Delete</button>
</div>
</div>
</div>
</div>const deleteBtn = document.getElementById('delete-btn');
const modal = document.getElementById('modal');
const cancelBtn = document.getElementById('cancel-btn');
const confirmBtn = document.getElementById('confirm-btn');
// Show modal
deleteBtn.addEventListener('click', function() {
modal.classList.remove('hidden');
});
// Hide modal
function hideModal() {
modal.classList.add('hidden');
}
cancelBtn.addEventListener('click', hideModal);
confirmBtn.addEventListener('click', function() {
// Perform deletion action here
console.log('Item deleted');
hideModal();
});
// Close modal when clicking outside
modal.addEventListener('click', function(e) {
if (e.target === modal) {
hideModal();
}
});Premium Kits & Templates
Learn to Build It
Essential Dev Tools
Accordion FAQ
An expandable accordion component perfect for FAQs, with smooth animations and keyboard navigation support.
Live Preview
We offer a 30-day return policy for all unused items in their original packaging. Simply contact our support team to initiate a return.
Standard shipping takes 3-5 business days. Express shipping is available for next-day delivery in most areas.
Yes! Our customer support team is available 24/7 via email, chat, and phone. We're here to help with any questions or issues.
Orders can be cancelled within 2 hours of placement. After that, please contact support to discuss options if your order hasn't shipped yet.
<div class="max-w-2xl mx-auto">
<div class="bg-white rounded-lg shadow-sm border border-gray-200">
<div class="accordion-item border-b border-gray-200 last:border-b-0">
<button class="accordion-trigger w-full px-6 py-4 text-left flex items-center justify-between hover:bg-gray-50 focus:outline-none focus:bg-gray-50">
<span class="text-lg font-medium text-gray-900">What is your return policy?</span>
<svg class="accordion-icon w-5 h-5 text-gray-500 transform transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
</svg>
</button>
<div class="accordion-content max-h-0 overflow-hidden transition-all duration-300 ease-in-out">
<div class="px-6 pb-4">
<p class="text-gray-600">We offer a 30-day return policy for all unused items in their original packaging.</p>
</div>
</div>
</div>
<!-- Repeat for other accordion items -->
<div class="accordion-item border-b border-gray-200 last:border-b-0">
<!-- Similar structure -->
</div>
</div>
</div>const accordionTriggers = document.querySelectorAll('.accordion-trigger');
accordionTriggers.forEach(trigger => {
trigger.addEventListener('click', function() {
const accordionItem = this.parentElement;
const accordionContent = accordionItem.querySelector('.accordion-content');
const accordionIcon = this.querySelector('.accordion-icon');
// Close all other accordions
accordionTriggers.forEach(otherTrigger => {
if (otherTrigger !== this) {
const otherItem = otherTrigger.parentElement;
const otherContent = otherItem.querySelector('.accordion-content');
const otherIcon = otherTrigger.querySelector('.accordion-icon');
otherContent.style.maxHeight = '0';
otherIcon.style.transform = 'rotate(0deg)';
}
});
// Toggle current accordion
if (accordionContent.style.maxHeight && accordionContent.style.maxHeight !== '0px') {
accordionContent.style.maxHeight = '0';
accordionIcon.style.transform = 'rotate(0deg)';
} else {
accordionContent.style.maxHeight = accordionContent.scrollHeight + 'px';
accordionIcon.style.transform = 'rotate(180deg)';
}
});
});Premium Kits & Templates
Learn to Build It
Essential Dev Tools
Hero Section
A powerful, attention-grabbing hero section with compelling copy and clear call-to-action buttons.
Live Preview
Build Better Products Faster Than Ever
Our platform helps teams ship high-quality software with confidence. Join thousands of developers who trust us with their most important projects.
Trusted by 50,000+ developers
Microsoft
Google
Netflix
Spotify
<div class="bg-gradient-to-br from-blue-600 to-purple-700 text-white">
<div class="max-w-6xl mx-auto px-4 py-20 text-center">
<h1 class="text-5xl md:text-6xl font-bold mb-6 leading-tight">
Build Better Products
<span class="block text-blue-200">Faster Than Ever</span>
</h1>
<p class="text-xl md:text-2xl text-blue-100 mb-8 max-w-3xl mx-auto leading-relaxed">
Our platform helps teams ship high-quality software with confidence. Join thousands of developers who trust us with their most important projects.
</p>
<div class="flex flex-col sm:flex-row gap-4 justify-center items-center">
<button class="bg-white text-blue-600 px-8 py-4 rounded-lg font-semibold text-lg hover:bg-blue-50 transition-colors shadow-lg">
Get Started Free
</button>
<button class="border-2 border-white text-white px-8 py-4 rounded-lg font-semibold text-lg hover:bg-white hover:text-blue-600 transition-colors">
Watch Demo
</button>
</div>
<div class="mt-12 flex flex-wrap justify-center items-center gap-8 opacity-80">
<div class="text-sm">Trusted by 50,000+ developers</div>
<div class="flex items-center gap-6">
<div class="text-sm font-medium">Microsoft</div>
<div class="text-sm font-medium">Google</div>
<div class="text-sm font-medium">Netflix</div>
<div class="text-sm font-medium">Spotify</div>
</div>
</div>
</div>
</div>