Beautiful Laravel Blade Components With Tailwind CSS
A curated collection of ready-to-use Blade components with Tailwind CSS. Copy, paste, and ship faster!
Live demonstration of the selected component. Interact with it to see behaviors.
This collection showcases premium, interactive buttons designed with Tailwind CSS. Each button has unique styles, hover effects, and modern UI animations to elevate user experience.
Button Variants:
- Glass Morphism Button – Semi-transparent with a blurred background.
- Neon Glowing Button – A dynamic neon effect that lights up on hover.
- Cyberpunk Button – Inspired by futuristic cyberpunk design.
- 3D Depth Button – Creates a depth illusion when clicked.
- Floating Button – Enhanced shadow effect for a floating feel.
- Ripple Effect Button – Water ripple animation when clicked.
- Pill Button – Rounded button with a soft appearance.
- Animated Loading Button – Displays a spinning icon for processing actions.
- Button with Animated Border – Stylish hover effect with a glowing outline.
- Icon Circle Button – A clean, circular button with an icon.
- Pulse Button – Animated pulsing effect for attention-grabbing actions.
- Dark Mode Switch Button – A button for toggling between dark and light mode.
Features:
✅ Dark Mode Ready – All buttons support dark themes.
✅ Smooth Animations – Designed for a premium user experience.
✅ Fully Responsive – Adapts to all screen sizes.
✅ Performance Optimized – Uses Tailwind's utility classes for efficiency.
These buttons are perfect for modern web apps, SaaS platforms, dashboards, and e-commerce sites. 🚀
Discount | Hostinger
Premium Hosting & Domain Deals
Free SSL 99.9% Uptime 24/7 Support
<div class="flex flex-wrap gap-4 p-6 bg-gray-100 dark:bg-gray-900">
<!-- Glass Morphism Button -->
<button class="px-6 py-3 text-sm font-semibold rounded-lg bg-white/10 backdrop-blur-md text-white border border-white/20 hover:bg-white/20 transition duration-300 focus:outline-none focus:ring-2 focus:ring-white/40">
Glass Button
</button>
<!-- Neon Glowing Button -->
<button class="relative px-6 py-3 text-sm font-semibold text-white bg-gray-900 rounded-lg overflow-hidden group">
<span class="absolute inset-0 w-full h-full bg-gradient-to-r from-pink-500 to-blue-500 opacity-0 group-hover:opacity-100 transition duration-300"></span>
<span class="relative z-10">Neon Effect</span>
</button>
<!-- Cyberpunk Button -->
<button class="relative px-6 py-3 text-sm font-semibold rounded-lg text-lime-400 border border-lime-400 bg-black shadow-lg hover:bg-lime-400 hover:text-black transition duration-300">
Cyberpunk
</button>
<!-- 3D Depth Button -->
<button class="px-6 py-3 text-sm font-semibold rounded-lg bg-red-500 text-white shadow-lg transform active:translate-y-1 transition duration-150">
3D Button
</button>
<!-- Floating Button -->
<button class="px-6 py-3 text-sm font-semibold rounded-lg bg-yellow-500 text-white shadow-lg hover:shadow-xl transition-all duration-300">
Floating Button
</button>
<!-- Ripple Effect Button -->
<button class="relative px-6 py-3 text-sm font-semibold rounded-lg bg-indigo-600 text-white overflow-hidden focus:outline-none group">
<span class="absolute inset-0 bg-indigo-500 scale-0 group-hover:scale-100 transition-transform duration-500"></span>
<span class="relative">Ripple Effect</span>
</button>
<!-- Pill Button -->
<button class="px-6 py-3 text-sm font-semibold rounded-full bg-purple-600 text-white hover:bg-purple-700 transition duration-300 focus:outline-none">
Pill Button
</button>
<!-- Animated Loading Button -->
<button class="flex items-center px-6 py-3 text-sm font-semibold rounded-lg bg-blue-600 text-white hover:bg-blue-700 transition duration-300 focus:outline-none focus:ring-2 focus:ring-blue-500">
<svg class="w-5 h-5 mr-2 animate-spin" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 2v4m0 12v4m8-8h4M2 12h4m13.656-7.656l2.828 2.828M4.344 4.344l2.828 2.828m13.656 13.656l-2.828-2.828M4.344 19.656l2.828-2.828"></path>
</svg>
Processing...
</button>
<!-- Button with Animated Border -->
<button class="relative px-6 py-3 text-sm font-semibold text-white rounded-lg bg-black border border-gray-700 overflow-hidden group">
<span class="absolute inset-0 w-full h-full bg-gradient-to-r from-blue-500 to-green-500 opacity-0 group-hover:opacity-100 transition duration-300"></span>
<span class="relative z-10">Border Glow</span>
</button>
<!-- Icon Circle Button -->
<button class="p-3 rounded-full bg-gray-800 text-white hover:bg-gray-700 transition duration-300 focus:outline-none focus:ring-2 focus:ring-gray-600">
<svg class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"></path>
</svg>
</button>
<!-- Pulse Button -->
<button class="px-6 py-3 text-sm font-semibold rounded-lg bg-green-500 text-white relative overflow-hidden">
<span class="absolute inset-0 w-full h-full bg-green-400 opacity-50 rounded-lg animate-ping"></span>
<span class="relative">Pulse Button</span>
</button>
<!-- Dark Mode Switch Button -->
<button class="flex items-center px-6 py-3 text-sm font-semibold rounded-lg bg-gray-800 text-white hover:bg-gray-700 transition duration-300 focus:outline-none">
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 3v1m0 16v1m8-8h1M3 12H2m15.071 7.071l.707.707M4.222 4.222l.707.707m14.142 0l.707-.707M4.222 19.778l.707-.707M12 6a6 6 0 100 12 6 6 0 000-12z"></path>
</svg>
Dark Mode
</button>
</div>
Live demonstration of the selected component. Interact with it to see behaviors.
This is an advanced button collection featuring unique and visually appealing styles, fully responsive and optimized for modern web applications with dark mode support.
Button Variants:
- Gradient Button – Uses a smooth gradient transition for a modern look.
- Glassmorphism Button – Features a frosted glass effect, perfect for sleek UI designs.
- Outline Button – A clean-bordered button that changes background on hover.
- Neon Glow Button – Uses a soft glowing effect, ideal for futuristic designs.
- 3D Button – Includes shadow depth and hover lift for a 3D effect.
- Floating Button – Lifts when hovered, adding a subtle interaction effect.
- Pill Button – Fully rounded for a soft and elegant appearance.
- Disabled Button – A grayed-out button for inactive states.
- Ripple Effect Button – Features an animated ripple effect when clicked.
- Circular Icon Button – A minimalist icon button, perfect for quick actions.
Features:
✅ Dark Mode Support – Fully adaptive UI.
✅ Smooth Hover & Focus Effects – Enhances user interaction.
✅ High-Quality Visuals – Uses modern design trends.
✅ Fully Responsive
These buttons are perfect for landing pages, SaaS platforms, e-commerce sites, dashboards, and web apps. 🚀
Discount | Hostinger
Premium Hosting & Domain Deals
Free SSL 99.9% Uptime 24/7 Support
<div class="flex flex-wrap gap-4 p-6 bg-gray-100 dark:bg-gray-900">
<!-- Gradient Button -->
<button class="px-6 py-3 text-sm font-semibold rounded-lg text-white bg-gradient-to-r from-purple-500 to-indigo-600 hover:from-purple-600 hover:to-indigo-700 transition duration-300 focus:outline-none focus:ring-2 focus:ring-indigo-400">
Gradient Button
</button>
<!-- Glassmorphism Button -->
<button class="px-6 py-3 text-sm font-semibold rounded-lg text-white backdrop-blur-md bg-white/10 border border-white/20 hover:bg-white/20 transition duration-300 focus:outline-none focus:ring-2 focus:ring-white/30">
Glassmorphism Button
</button>
<!-- Outline Button -->
<button class="px-6 py-3 text-sm font-semibold rounded-lg border border-blue-600 text-blue-600 hover:bg-blue-600 hover:text-white transition duration-300 focus:outline-none focus:ring-2 focus:ring-blue-500">
Outline Button
</button>
<!-- Neon Glow Button -->
<button class="relative px-6 py-3 text-sm font-semibold rounded-lg text-white bg-gray-900 hover:bg-gray-800 transition duration-300 focus:outline-none focus:ring-2 focus:ring-blue-500">
<span class="absolute inset-0 rounded-lg bg-blue-500 blur-md opacity-50 group-hover:opacity-75 transition duration-300"></span>
<span class="relative">Neon Glow Button</span>
</button>
<!-- 3D Button -->
<button class="px-6 py-3 text-sm font-semibold rounded-lg bg-red-500 text-white shadow-lg hover:shadow-xl transform hover:translate-y-1 transition duration-300 focus:outline-none focus:ring-2 focus:ring-red-400">
3D Button
</button>
<!-- Floating Button -->
<button class="px-6 py-3 text-sm font-semibold rounded-lg bg-teal-500 text-white shadow-md hover:shadow-xl transition-all duration-300 ease-in-out hover:-translate-y-1 focus:outline-none focus:ring-2 focus:ring-teal-400">
Floating Button
</button>
<!-- Pill Button -->
<button class="px-8 py-3 text-sm font-semibold rounded-full bg-pink-500 text-white hover:bg-pink-600 transition duration-300 focus:outline-none focus:ring-2 focus:ring-pink-400">
Pill Button
</button>
<!-- Disabled Button -->
<button class="px-6 py-3 text-sm font-semibold rounded-lg bg-gray-300 text-gray-500 cursor-not-allowed opacity-50">
Disabled Button
</button>
<!-- Ripple Effect Button -->
<button class="relative px-6 py-3 text-sm font-semibold rounded-lg bg-indigo-500 text-white overflow-hidden transition duration-300 hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-indigo-400">
<span class="absolute inset-0 bg-white opacity-10 animate-ping"></span>
Ripple Effect Button
</button>
<!-- Circular Icon Button -->
<button class="p-3 rounded-full bg-gray-800 text-white hover:bg-gray-700 transition duration-300 focus:outline-none focus:ring-2 focus:ring-gray-600">
<svg class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"></path>
</svg>
</button>
</div>
Getting Started
Learn how to quickly implement these components in your Laravel application with our step-by-step guide.
Documentation
Explore our comprehensive docs to learn about customization options and advanced usage.
Component Usage Guide
1. Browse Components
Our library is organized into logical categories to help you find what you need:
- Navigation: Menus, navbars, pagination
- Forms: Inputs, selects, validation components
- Data Display: Cards, tables, lists
- Feedback: Alerts, modals, loaders
Use the category filter or search functionality to locate specific components.
2. Component Selection
Each component page includes:
- Live Preview: See the component in action
- Variants: Different style options available
- Props/Parameters: Customization options
- Accessibility Notes: ARIA attributes and keyboard navigation
Pro Tip: Click the "Expand Code" button to see implementation details and required dependencies.
3. Implementation
To use a component in your Laravel application:
- Click the "Get this component" button
- Paste into your Blade template file (.blade.php)
- Ensure required CSS/JS dependencies are loaded
- Customize using the available props/tailwind classes
Troubleshooting
- Component not rendering? Check that you've registered the component class in your Laravel service provider
- Styles missing? Verify Tailwind CSS is properly configured in your project
Get the Best Hosting, Domain & VPS on Hostinger!
Premium Hosting
Start from $1.99/month
Domain Registration
.com start from $8.99
Cloud VPS
High performance
Free SSL
With every plan
