English
Dutch
Responsive Tailwind UI Components
Contents
Responsive Card Grid with Hover Effects
A collection of reusable and responsive UI components built with Tailwind CSS 3+ and Alpine.js — designed for fast prototyping, clean aesthetics, and production-ready frontend integration.
About
A flexible, responsive card layout perfect for dashboards, product grids, or snippet listings.
Each card has a subtle hover animation, shadow transitions, and adaptive spacing for all screen sizes.
Code
Language: HTML
<section class="bg-gray-50 py-10">
<div class="max-w-6xl mx-auto px-4">
<h2 class="text-2xl font-bold text-gray-800 mb-6">Responsive Card Grid</h2>
<div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Card -->
<div class="bg-white rounded-xl shadow hover:shadow-lg transition-all p-5">
<img src="https://via.placeholder.com/400x200" alt="Thumbnail" class="rounded-lg mb-4">
<h3 class="text-lg font-semibold text-gray-800 mb-2">Beautiful Tailwind Card</h3>
<p class="text-gray-600 text-sm mb-3">Clean, modern, and fully responsive card design with subtle hover effects.</p>
<button class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition">View More</button>
</div>
<div class="bg-white rounded-xl shadow hover:shadow-lg transition-all p-5">
<img src="https://via.placeholder.com/400x200" alt="Thumbnail" class="rounded-lg mb-4">
<h3 class="text-lg font-semibold text-gray-800 mb-2">Dark Mode Ready</h3>
<p class="text-gray-600 text-sm mb-3">Easily extend this card with dark mode styles using Tailwind variants.</p>
<button class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition">Explore</button>
</div>
<div class="bg-white rounded-xl shadow hover:shadow-lg transition-all p-5">
<img src="https://via.placeholder.com/400x200" alt="Thumbnail" class="rounded-lg mb-4">
<h3 class="text-lg font-semibold text-gray-800 mb-2">Reusable Components</h3>
<p class="text-gray-600 text-sm mb-3">Build faster with copy-paste-ready Tailwind components that just work.</p>
<button class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition">Get Started</button>
</div>
</div>
</div>
</section>Interactive Modal with Alpine.js
A modern, minimal modal component powered by Alpine.js and Tailwind CSS.
It fades in smoothly, centers responsively, and supports scroll lock — ideal for popups, confirmations, and detail previews.
Code
Language: HTML
<div x-data="{ open: false }" class="text-center py-10 bg-gray-50">
<button @click="open = true"
class="px-5 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition">
Open Modal
</button>
<!-- Modal -->
<div x-show="open"
x-transition.opacity
@keydown.escape.window="open = false"
class="fixed inset-0 flex items-center justify-center bg-black/50 z-50">
<div @click.away="open = false"
class="bg-white rounded-xl shadow-lg max-w-md w-full p-6 mx-2 text-left">
<h3 class="text-xl font-bold text-gray-800 mb-2">Simple Tailwind Modal</h3>
<p class="text-gray-600 mb-4">
This modal is built using Alpine.js and Tailwind’s utility classes.
It supports smooth transitions and accessibility.
</p>
<button @click="open = false"
class="px-4 py-2 bg-gray-200 rounded-lg hover:bg-gray-300 transition">
Close
</button>
</div>
</div>
</div>Gradient Buttons Collection
A stylish collection of gradient Tailwind buttons suitable for CTAs, dashboards, or forms.
Each button features smooth transitions, rounded corners, and accessibility-ready contrast.
Code
Language: HTML
<section class="bg-white py-10">
<div class="max-w-4xl mx-auto px-4 text-center">
<h2 class="text-2xl font-bold text-gray-800 mb-6">Gradient Buttons Collection</h2>
<div class="flex flex-wrap justify-center gap-4">
<button class="px-6 py-2 rounded-lg text-white font-semibold bg-gradient-to-r from-indigo-500 to-blue-600 hover:opacity-90 transition">Primary</button>
<button class="px-6 py-2 rounded-lg text-white font-semibold bg-gradient-to-r from-purple-500 to-pink-500 hover:opacity-90 transition">Vibrant</button>
<button class="px-6 py-2 rounded-lg text-white font-semibold bg-gradient-to-r from-green-500 to-teal-500 hover:opacity-90 transition">Success</button>
<button class="px-6 py-2 rounded-lg text-white font-semibold bg-gradient-to-r from-orange-500 to-yellow-500 hover:opacity-90 transition">Warning</button>
</div>
</div>
</section>Modern Login Form
A premium collection of elegant and fully responsive Tailwind CSS form components — including modern text fields, select dropdowns, toggles, and validation messages.
Each form is built with accessibility, responsive design, and developer convenience in mind.
Ideal for login pages, admin dashboards, or registration workflows.
A clean and modern login form featuring bold typography, floating labels, and responsive alignment.
Fully compatible with Laravel authentication pages and can be easily customized for dark mode.
Code
Language: HTML
<section class="flex items-center justify-center min-h-screen bg-gray-50">
<div class="bg-white rounded-2xl shadow-xl p-8 w-full max-w-md">
<h2 class="text-2xl font-bold text-center text-gray-800 mb-6">Welcome Back 👋</h2>
<form class="space-y-5">
<div>
<label class="block text-sm font-medium text-gray-600 mb-1">Email Address</label>
<input type="email" placeholder="you@example.com"
class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500">
</div>
<div>
<label class="block text-sm font-medium text-gray-600 mb-1">Password</label>
<input type="password" placeholder="••••••••"
class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500">
</div>
<button type="submit"
class="w-full bg-indigo-600 text-white py-2 rounded-lg font-semibold hover:bg-indigo-700 transition">
Sign In
</button>
<p class="text-center text-sm text-gray-600">Don’t have an account?
<a href="#" class="text-indigo-600 hover:underline">Register</a>
</p>
</form>
</div>
</section>Registration Form with Inline Validation
A beautiful registration form layout with inline validation feedback messages.
Clean, developer-friendly, and perfect for onboarding flows in Laravel or SPA projects.
Code
Language: HTML
<section class="bg-gray-50 py-10">
<div class="max-w-2xl mx-auto bg-white shadow rounded-xl p-8">
<h2 class="text-2xl font-bold text-gray-800 mb-6">Create Your Account</h2>
<form class="grid gap-6">
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Full Name</label>
<input type="text" placeholder="John Doe"
class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:ring-2 focus:ring-indigo-500 focus:outline-none">
<p class="text-xs text-green-600 mt-1">Looks good!</p>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Email Address</label>
<input type="email" placeholder="you@example.com"
class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:ring-2 focus:ring-indigo-500 focus:outline-none">
<p class="text-xs text-red-600 mt-1">Please enter a valid email.</p>
</div>
<div class="grid sm:grid-cols-2 gap-4">
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Password</label>
<input type="password" placeholder="••••••••"
class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:ring-2 focus:ring-indigo-500 focus:outline-none">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Confirm Password</label>
<input type="password" placeholder="••••••••"
class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:ring-2 focus:ring-indigo-500 focus:outline-none">
</div>
</div>
<button type="submit"
class="bg-indigo-600 text-white px-5 py-2 rounded-lg font-semibold hover:bg-indigo-700 transition">
Register
</button>
</form>
</div>
</section>Toggle Switches & Checkboxes
A collection of sleek Tailwind toggle switches and checkboxes with accessible labels — perfect for settings pages or preference forms.
Easily integrates into Livewire or Alpine.js data-bound components.
Code:
Language: HTML
<section class="bg-white py-10">
<div class="max-w-3xl mx-auto px-6">
<h2 class="text-2xl font-bold text-gray-800 mb-6">Form Toggles & Checkboxes</h2>
<div class="space-y-6">
<!-- Toggle -->
<div class="flex items-center justify-between">
<span class="text-gray-700 font-medium">Enable Notifications</span>
<label class="relative inline-flex items-center cursor-pointer">
<input type="checkbox" class="sr-only peer">
<div class="w-11 h-6 bg-gray-300 peer-focus:outline-none rounded-full peer peer-checked:bg-indigo-600
after:content-[''] after:absolute after:top-[2px] after:left-[2px]
after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5
after:transition-all peer-checked:after:translate-x-full"></div>
</label>
</div>
<!-- Checkbox -->
<div class="flex items-center gap-2">
<input type="checkbox" id="terms"
class="w-4 h-4 text-indigo-600 border-gray-300 rounded focus:ring-indigo-500">
<label for="terms" class="text-gray-700">I agree to the Terms and Conditions</label>
</div>
</div>
</div>
</section>