NEW COLLECTION
Beautiful Laravel Blade Components With Tailwind CSS
A curated collection of ready-to-use Blade components with Tailwind CSS. Copy, paste, and ship faster!
#Modern Login Form with Social Buttons
Live demonstration of the selected component. Interact with it to see behaviors.
Click and hover to test interactions
Rendered live from Blade component
Component Description
Key Features of This Login Form:
- Modern Design Elements:
- Gradient header with welcome message
- Clean, card-based layout with subtle shadows
- Rounded corners for a friendly appearance
- Consistent spacing and typography
- Social Login Options:
- Google, Facebook, and Apple login buttons
- Hover animations for better interactivity
- Brand-colored icons for recognition
- "Or" divider between social and email login
- Form Functionality:
- Email input with envelope icon
- Password field with lock icon and show/hide toggle
- "Remember me" checkbox
- Forgot password link
- Gradient submit button with hover effect
20%
Discount | Hostinger
Premium Hosting & Domain Deals
Free SSL 99.9% Uptime 24/7 Support
Component Blade HTML + Tailwind CSS
<div class="w-full max-w-md mx-auto">
<!-- Login Card -->
<div class="bg-white rounded-2xl shadow-xl overflow-hidden dark:login-container dark:bg-gray-800">
<!-- Header -->
<div class="bg-gradient-to-r from-blue-500 to-purple-600 p-6 text-center">
<h1 class="text-2xl font-bold text-white">Welcome Back</h1>
<p class="text-blue-100 mt-1">Sign in to your account</p>
</div>
<!-- Form -->
<div class="p-6">
<!-- Social Login Buttons -->
<div class="grid grid-cols-3 gap-3 mb-6">
<button class="social-btn flex items-center justify-center py-2 px-4 border border-gray-300 rounded-lg bg-white hover:bg-gray-50 transition-all duration-300">
<i class="fab fa-google text-red-500 mr-2"></i>
</button>
<button class="social-btn flex items-center justify-center py-2 px-4 border border-gray-300 rounded-lg bg-white hover:bg-gray-50 transition-all duration-300">
<i class="fab fa-facebook-f text-blue-600 mr-2"></i>
</button>
<button class="social-btn flex items-center justify-center py-2 px-4 border border-gray-300 rounded-lg bg-white hover:bg-gray-50 transition-all duration-300">
<i class="fab fa-apple text-gray-800 mr-2"></i>
</button>
</div>
<!-- Divider -->
<div class="flex items-center my-6">
<div class="flex-1 border-t border-gray-300 dark:border-gray-600"></div>
<span class="px-3 text-gray-500 dark:text-gray-400">or</span>
<div class="flex-1 border-t border-gray-300 dark:border-gray-600"></div>
</div>
<!-- Email Input -->
<div class="mb-4">
<label for="email" class="block text-sm font-medium text-gray-700 mb-1 dark:text-gray-300">Email Address</label>
<div class="relative">
<div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
<i class="fas fa-envelope text-gray-400"></i>
</div>
<input
type="email"
id="email"
class="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white"
placeholder="you@example.com">
</div>
</div>
<!-- Password Input -->
<div class="mb-6">
<label for="password" class="block text-sm font-medium text-gray-700 mb-1 dark:text-gray-300">Password</label>
<div class="relative">
<div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
<i class="fas fa-lock text-gray-400"></i>
</div>
<input
type="password"
id="password"
class="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white"
placeholder="••••••••">
<button type="button" class="absolute inset-y-0 right-0 flex items-center pr-3">
<i class="fas fa-eye-slash text-gray-400 hover:text-gray-500"></i>
</button>
</div>
</div>
<!-- Remember & Forgot -->
<div class="flex items-center justify-between mb-6">
<div class="flex items-center">
<input
id="remember-me"
type="checkbox"
class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded dark:bg-gray-700 dark:border-gray-600">
<label for="remember-me" class="ml-2 block text-sm text-gray-700 dark:text-gray-300">Remember me</label>
</div>
<a href="#" class="text-sm text-blue-600 hover:text-blue-500 dark:text-blue-400">Forgot password?</a>
</div>
<!-- Submit Button -->
<button
type="submit"
class="w-full bg-gradient-to-r from-blue-500 to-purple-600 text-white py-3 px-4 rounded-lg font-medium hover:from-blue-600 hover:to-purple-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-all duration-300">
Sign In
</button>
<!-- Sign Up Link -->
<div class="mt-6 text-center">
<p class="text-sm text-gray-600 dark:text-gray-400">
Don't have an account?
<a href="#" class="font-medium text-blue-600 hover:text-blue-500 dark:text-blue-400">Sign up</a>
</p>
</div>
</div>
</div>
</div>
#Modern Text Input Components with Tailwind CSS
Live demonstration of the selected component. Interact with it to see behaviors.
Click and hover to test interactions
Rendered live from Blade component
Component Description
This single HTML file contains a complete collection of modern text input components with the following features:
- Input Varieties:
- Basic text input with focus states
- Floating label input with smooth animation
- Minimalist underline-style input
- Input with decorative icon
- Input with attached action button
- Disabled input state
- Validation states (success/error)
- Search input with clear button
- Multi-line textarea
- Design Features:
- Fully responsive layout
- Dark mode support for all components
- Consistent spacing and typography
- Visual feedback for interactive states
- Accessible markup structure
- Technical Implementation:
- Pure Tailwind CSS styling (no custom CSS except for dark mode tweaks)
- Font Awesome icons for visual enhancement
- Proper form labeling for accessibility
- Semantic HTML structure
- Mobile-first responsive design
- Documentation Included:
- Live preview of all input types
- Descriptive labels for each component
- Usage notes below each input
- Comprehensive explanation section
- Customization guidelines
- Ready-to-Use:
- Self-contained single HTML file
- CDN dependencies (Tailwind, Font Awesome)
- No build step required
- Easy to copy/paste individual components
This collection provides a complete toolkit for text input needs in modern web applications, following current design trends while maintaining functionality and accessibility.
20%
Discount | Hostinger
Premium Hosting & Domain Deals
Free SSL 99.9% Uptime 24/7 Support
Component Blade HTML + Tailwind CSS
<div class="max-w-3xl mx-auto">
<h1 class="text-3xl font-bold text-gray-800 mb-6 dark:text-white">Modern Input Collection</h1>
<!-- Preview Container -->
<div class="bg-white rounded-xl shadow-md p-6 mb-8 dark:preview-box dark:bg-gray-800">
<h2 class="text-xl font-semibold text-gray-700 mb-4 dark:text-gray-300">Input Showcase</h2>
<!-- 1. Basic Input Field -->
<div class="mb-6">
<label for="basic-input" class="block text-sm font-medium text-gray-700 mb-1 dark:text-gray-300">Basic Input</label>
<input
type="text"
id="basic-input"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all dark:bg-gray-700 dark:border-gray-600 dark:text-white"
placeholder="Enter your text">
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">Standard text input with focus effects</p>
</div>
<!-- 2. Floating Label Input -->
<div class="relative mb-6">
<input
type="text"
id="floating-input"
class="block px-4 py-3 w-full text-gray-900 bg-transparent rounded-lg border border-gray-300 appearance-none focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 peer dark:bg-gray-700 dark:border-gray-600 dark:text-white"
placeholder=" ">
<label
for="floating-input"
class="absolute text-sm text-gray-500 duration-300 transform -translate-y-4 scale-75 top-2 z-10 origin-[0] bg-white px-2 peer-focus:px-2 peer-focus:text-blue-600 peer-placeholder-shown:scale-100 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:top-1/2 peer-focus:top-2 peer-focus:scale-75 peer-focus:-translate-y-4 left-3 dark:bg-gray-800 dark:text-gray-400">
Floating Label
</label>
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">Label animates to top when focused</p>
</div>
<!-- 3. Underline Input -->
<div class="mb-6">
<label for="underline-input" class="block text-sm font-medium text-gray-700 mb-1 dark:text-gray-300">Underline Style</label>
<div class="relative">
<input
type="text"
id="underline-input"
class="block w-full px-0 py-2 border-0 border-b-2 border-gray-300 focus:ring-0 focus:border-blue-500 bg-transparent dark:border-gray-600 dark:text-white"
placeholder="Simple and clean">
</div>
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">Minimalist underline style input</p>
</div>
<!-- 4. Input with Icon -->
<div class="mb-6">
<label for="icon-input" class="block text-sm font-medium text-gray-700 mb-1 dark:text-gray-300">With Icon</label>
<div class="relative">
<div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
<i class="fas fa-user text-gray-400"></i>
</div>
<input
type="text"
id="icon-input"
class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white"
placeholder="Username">
</div>
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">Input with left icon decoration</p>
</div>
<!-- 5. Input with Button -->
<div class="mb-6">
<label for="button-input" class="block text-sm font-medium text-gray-700 mb-1 dark:text-gray-300">With Action Button</label>
<div class="flex">
<input
type="text"
id="button-input"
class="flex-1 px-4 py-2 border border-gray-300 rounded-l-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 focus:z-10 dark:bg-gray-700 dark:border-gray-600 dark:text-white"
placeholder="Enter promo code">
<button
type="button"
class="px-4 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 rounded-r-lg">
Apply
</button>
</div>
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">Input with attached action button</p>
</div>
<!-- 6. Disabled Input -->
<div class="mb-6">
<label for="disabled-input" class="block text-sm font-medium text-gray-700 mb-1 dark:text-gray-300">Disabled Input</label>
<input
type="text"
id="disabled-input"
class="w-full px-4 py-2 border border-gray-300 rounded-lg bg-gray-100 cursor-not-allowed dark:bg-gray-700 dark:border-gray-600 dark:text-gray-400"
placeholder="Not available"
disabled>
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">Non-interactive disabled state</p>
</div>
<!-- 7. Validation States -->
<div class="grid md:grid-cols-2 gap-4 mb-6">
<!-- Success State -->
<div>
<label for="success-input" class="block text-sm font-medium text-green-700 mb-1 dark:text-green-400">Success Input</label>
<input
type="text"
id="success-input"
class="w-full px-4 py-2 border border-green-500 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 bg-green-50 dark:bg-gray-800 dark:border-green-600 dark:text-white"
placeholder="Valid input">
<p class="mt-1 text-xs text-green-600 dark:text-green-400">Looks good!</p>
</div>
<!-- Error State -->
<div>
<label for="error-input" class="block text-sm font-medium text-red-700 mb-1 dark:text-red-400">Error Input</label>
<input
type="text"
id="error-input"
class="w-full px-4 py-2 border border-red-500 rounded-lg focus:ring-2 focus:ring-red-500 focus:border-red-500 bg-red-50 dark:bg-gray-800 dark:border-red-600 dark:text-white"
placeholder="Invalid input">
<p class="mt-1 text-xs text-red-600 dark:text-red-400">This field is required</p>
</div>
</div>
<!-- 8. Search Input -->
<div class="mb-6">
<label for="search-input" class="block text-sm font-medium text-gray-700 mb-1 dark:text-gray-300">Search Input</label>
<div class="relative">
<div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
<i class="fas fa-search text-gray-400"></i>
</div>
<input
type="text"
id="search-input"
class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white"
placeholder="Search...">
<div class="absolute inset-y-0 right-0 flex items-center pr-3">
<button type="button" class="text-gray-400 hover:text-gray-500 dark:hover:text-gray-300">
<i class="fas fa-times"></i>
</button>
</div>
</div>
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">Search field with clear button</p>
</div>
<!-- 9. Textarea -->
<div class="mb-6">
<label for="textarea" class="block text-sm font-medium text-gray-700 mb-1 dark:text-gray-300">Textarea</label>
<textarea
id="textarea"
rows="4"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white"
placeholder="Write your message here..."></textarea>
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">Multi-line text input</p>
</div>
</div>
</div>
← Previous
More Components
Next →
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
20%
DISCOUNT
Limited time offer!
Ends soon
