All Components
Browse our entire library of ready-to-use components. Copy the code, paste into your project, and customize to fit your needs.
About us Section with Stats
A modern, Tailwind CSS About Us two-column about section for introducing a company, featuring descriptive text, key strengths with icons, and a feature image with an animated overlay displaying key business statistics component.
LTR
RTL
<section class="py-20 bg-gray-50 dark:bg-gray-800" 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">
About Our Company
</h2>
<p class="mx-auto text-xl text-gray-600 dark:text-gray-300">
We're passionate about creating innovative solutions that help businesses thrive in the digital age.
</p>
</div>
</div>
<div class="items-center grid gap-16 mb-20 lg:grid-cols-2">
<div class="space-y-8">
<div :class="{ 'opacity-100 translate-y-0': inView, 'opacity-0 translate-y-8': !inView }" class="transition-all duration-1000 ease-out delay-200">
<h3 class="mb-6 text-3xl font-bold text-gray-900 dark:text-white">
Building Tomorrow's Solutions Today
</h3>
<p class="mb-6 text-lg text-gray-600 leading-relaxed dark:text-gray-300">
Founded in 2020, we've been at the forefront of digital transformation, helping over 10,000 businesses worldwide achieve their goals through innovative technology solutions.
</p>
<p class="text-lg text-gray-600 leading-relaxed dark:text-gray-300">
Our team of expert developers, designers, and strategists work tirelessly to deliver cutting-edge solutions that not only meet today's challenges but anticipate tomorrow's opportunities.
</p>
</div>
<!-- This is the line that was changed -->
<div :class="{ 'opacity-100 translate-y-0': inView, 'opacity-0 translate-y-8': !inView }" class="transition-all duration-1000 ease-out delay-200">
<div class="space-y-4">
<div class="items-start space-x-4 rtl:space-x-reverse flex">
<div class="flex-shrink-0 items-center justify-center flex w-[32px] h-[32px] rounded-full bg-blue-600">
<svg class="w-[16px] h-[16px] text-white" 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>
<h4 class="text-lg font-semibold text-gray-900 dark:text-white">
Expert Team
</h4>
<p class="text-gray-600 dark:text-gray-300">
50+ skilled professionals with years of experience
</p>
</div>
</div>
<div class="items-start space-x-4 rtl:space-x-reverse flex">
<div class="flex-shrink-0 items-center justify-center flex w-[32px] h-[32px] rounded-full bg-blue-600">
<svg class="w-[16px] h-[16px] text-white" 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>
<h4 class="text-lg font-semibold text-gray-900 dark:text-white">
Global Reach
</h4>
<p class="text-gray-600 dark:text-gray-300">
Serving clients across 25+ countries worldwide
</p>
</div>
</div>
<div class="items-start space-x-4 rtl:space-x-reverse flex">
<div class="flex-shrink-0 items-center justify-center flex w-[32px] h-[32px] rounded-full bg-blue-600">
<svg class="w-[16px] h-[16px] text-white" 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>
<h4 class="text-lg font-semibold text-gray-900 dark:text-white">
Innovation Focus
</h4>
<p class="text-gray-600 dark:text-gray-300">
Always adopting the latest technologies and methodologies
</p>
</div>
</div>
</div>
</div>
</div>
<div class="relative">
<div :class="{ 'opacity-100 scale-100': inView, 'opacity-0 scale-95': !inView }" class="transition-all duration-1000 ease-out delay-300">
<div class="relative overflow-hidden rounded-3xl shadow-2xl">
<img src="https://images.unsplash.com/photo-1552664730-d307ca884978?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="Our team at work" class="object-cover w-full h-[384px]" />
<div class="absolute bottom-6 left-6 right-6">
<div class="backdrop-blur-sm p-6 rounded-xl bg-white shadow-lg dark:bg-gray-800">
<div class="grid grid-cols-3 gap-4 text-center">
<div>
<div class="text-2xl font-bold text-gray-900 dark:text-white">
5+
</div>
<div class="text-sm text-gray-600 dark:text-gray-400">
Years
</div>
</div>
<div>
<div class="text-2xl font-bold text-gray-900 dark:text-white">
50+
</div>
<div class="text-sm text-gray-600 dark:text-gray-400">
Team
</div>
</div>
<div>
<div class="text-2xl font-bold text-gray-900 dark:text-white">
25+
</div>
<div class="text-sm text-gray-600 dark:text-gray-400">
Countries
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>Blog Grid Section
A responsive, Tailwind CSS Blog Showcase three-column grid for blog posts, featuring animated cards with hover effects for the image and a 'Read More' call-to-action 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 Blog
</h2>
<p class="mx-auto text-xl text-gray-600 dark:text-gray-300">
Stay updated with the latest industry insights, tips, and trends from our expert team.
</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="transition-all duration-1000 ease-out delay-200">
<div class="group overflow-hidden transition-all duration-300 flex-col flex h-full rounded-2xl bg-gray-50 shadow-lg dark:bg-gray-800">
<div class="relative">
<img src="https://images.pexels.com/photos/1181244/pexels-photo-1181244.jpeg?auto=compress&cs=tinysrgb&w=800" alt="Blog Post 1" class="object-cover group-hover:scale-105 transition-transform duration-300 w-full h-[256px]" />
<div class="absolute inset-0 bg-black/60 group-hover:bg-opacity-40 transition-all duration-300 items-center justify-center opacity-0 group-hover:opacity-100 flex bg-opacity-0">
<a href="#" class="transition-colors duration-200 px-4 py-2 rounded-lg bg-blue-600 font-semibold text-white">Read More</a>
</div>
</div>
<div class="flex-col flex-grow flex p-6">
<h3 class="mb-2 text-xl font-bold text-gray-900 dark:text-white">
The Future of Web Development
</h3>
<p class="flex-grow text-gray-600 dark:text-gray-300">
Explore emerging trends in web development, from progressive web apps to AI-driven interfaces, and how they can transform your business.
</p>
</div>
</div>
</div>
<div :class="{ 'opacity-100 translate-y-0': inView, 'opacity-0 translate-y-8': !inView }" class="transition-all duration-1000 ease-out delay-400">
<div class="group overflow-hidden transition-all duration-300 flex-col flex h-full rounded-2xl bg-gray-50 shadow-lg dark:bg-gray-800">
<div class="relative">
<img src="https://images.pexels.com/photos/1181244/pexels-photo-1181244.jpeg?auto=compress&cs=tinysrgb&w=800" alt="Blog Post 2" class="object-cover group-hover:scale-105 transition-transform duration-300 w-full h-[256px]" />
<div class="absolute inset-0 bg-black/60 group-hover:bg-opacity-40 transition-all duration-300 items-center justify-center opacity-0 group-hover:opacity-100 flex bg-opacity-0">
<a href="#" class="transition-colors duration-200 px-4 py-2 rounded-lg bg-blue-600 font-semibold text-white">Read More</a>
</div>
</div>
<div class="flex-col flex-grow flex p-6">
<h3 class="mb-2 text-xl font-bold text-gray-900 dark:text-white">
Maximizing ROI with Digital Marketing
</h3>
<p class="flex-grow text-gray-600 dark:text-gray-300">
Learn proven strategies for boosting your online presence and driving measurable results through SEO, social media, and content marketing.
</p>
</div>
</div>
</div>
<div :class="{ 'opacity-100 translate-y-0': inView, 'opacity-0 translate-y-8': !inView }" class="transition-all duration-1000 ease-out delay-600">
<div class="group overflow-hidden transition-all duration-300 flex-col flex h-full rounded-2xl bg-gray-50 shadow-lg dark:bg-gray-800">
<div class="relative">
<img src="https://images.pexels.com/photos/1181244/pexels-photo-1181244.jpeg?auto=compress&cs=tinysrgb&w=800" alt="Blog Post 3" class="object-cover group-hover:scale-105 transition-transform duration-300 w-full h-[256px]" />
<div class="absolute inset-0 bg-black/60 group-hover:bg-opacity-40 transition-all duration-300 items-center justify-center opacity-0 group-hover:opacity-100 flex bg-opacity-0">
<a href="#" class="transition-colors duration-200 px-4 py-2 rounded-lg bg-blue-600 font-semibold text-white">Read More</a>
</div>
</div>
<div class="flex-col flex-grow flex p-6">
<h3 class="mb-2 text-xl font-bold text-gray-900 dark:text-white">
Scaling with Cloud Solutions
</h3>
<p class="flex-grow text-gray-600 dark:text-gray-300">
Discover how cloud infrastructure can enhance scalability and security for your business with real-world examples and best practices.
</p>
</div>
</div>
</div>
</div>
<div class="text-center">
<a href="#" class="transition-all duration-200 inline-block px-8 py-4 rounded-lg bg-blue-600 font-semibold text-white shadow-lg">View All Posts</a>
</div>
</div>
</section>Blog Hero Section with Featured Article
A clean Tailwind CSS Blog Hero and modern blog section designed to highlight a featured article and display additional posts in a responsive grid. The component includes a prominent featured post with a horizontal layout, and a grid of smaller article cards. Interactive features include staggered entrance animations and hover effects like image zoom and overlay buttons to enhance user engagement component.
LTR
RTL
<section class="bg-white py-16 px-4 sm:px-6 lg:px-8" x-data="{
visible: false,
init() {
setTimeout(() => this.visible = true, 100)
}
}">
<div class="max-w-6xl mx-auto">
<!-- Header -->
<div class="text-center mb-12" x-show="visible"
x-transition:enter="transition ease-out duration-800"
x-transition:enter-start="opacity-0 translate-y-6"
x-transition:enter-end="opacity-100 translate-y-0">
<h1 class="text-4xl md:text-5xl font-bold text-gray-900 mb-4">Latest Articles</h1>
<p class="text-xl text-gray-600 max-w-2xl mx-auto">
Discover tutorials, tips, and insights about modern web development
</p>
</div>
<!-- Featured Article -->
<div x-show="visible"
x-transition:enter="transition ease-out duration-800 delay-200"
x-transition:enter-start="opacity-0 translate-y-6"
x-transition:enter-end="opacity-100 translate-y-0"
class="mb-12">
<article class="bg-white rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition-shadow duration-300">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-0 h-full">
<div class="h-64 lg:h-full overflow-hidden">
<img src="https://images.unsplash.com/photo-1555066931-4365d14bab8c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80"
alt="Modern web development setup with code on screens"
class="w-full h-full object-cover">
</div>
<div class="p-8 flex flex-col justify-center">
<div class="mb-4">
<span class="text-blue-600 py-1 rounded-full text-sm font-semibold uppercase tracking-wide">Web Components</span>
<div class="text-gray-500 text-sm mt-2">March 15, 2024</div>
</div>
<h2 class="text-2xl md:text-3xl font-bold text-gray-900 mb-4 leading-tight">
Building Reusable Web Components: A Complete Guide
</h2>
<p class="text-gray-600 mb-6 leading-relaxed">
Master the art of creating modular, reusable web components using modern JavaScript and custom elements. Learn best practices, patterns, and real-world examples.
</p>
<button class="bg-blue-600 hover:bg-blue-700 text-white font-medium px-6 py-3 rounded-lg transition-colors duration-200 w-fit">
Read Article
</button>
</div>
</div>
</article>
</div>
<!-- Article Grid -->
<div x-show="visible"
x-transition:enter="transition ease-out duration-800 delay-400"
x-transition:enter-start="opacity-0 translate-y-6"
x-transition:enter-end="opacity-100 translate-y-0"
class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Article 1 -->
<article class="bg-white rounded-lg shadow-md hover:shadow-lg transition-all duration-300 overflow-hidden group">
<div class="h-48 overflow-hidden">
<img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80"
alt="CSS code on computer screen"
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
</div>
<div class="p-6 flex flex-col justify-between">
<div>
<div class="mb-3">
<span class="text-blue-600 py-1 rounded text-xs font-semibold uppercase tracking-wide">CSS</span>
<div class="text-gray-500 text-sm mt-2">March 12, 2024</div>
</div>
<h3 class="text-xl font-semibold text-gray-900 mb-3 leading-tight">
Mastering CSS Grid: Advanced Layout Techniques
</h3>
<p class="text-gray-600 text-sm leading-relaxed">
Unlock the full power of CSS Grid with advanced layout patterns, responsive design techniques, and real-world examples.
</p>
</div>
<button class="text-blue-600 hover:text-blue-700 font-medium flex items-center group mt-4">
Read More
<svg class="w-4 h-4 ml-2 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
</svg>
</button>
</div>
</article>
<!-- Article 2 -->
<article class="bg-white rounded-lg shadow-md hover:shadow-lg transition-all duration-300 overflow-hidden group">
<div class="h-48 overflow-hidden">
<img src="https://images.unsplash.com/photo-1461749280684-dccba630e2f6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2069&q=80"
alt="JavaScript code on dark background"
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
</div>
<div class="p-6 flex flex-col justify-between">
<div>
<div class="mb-3">
<span class="text-blue-600 py-1 rounded text-xs font-semibold uppercase tracking-wide">JavaScript</span>
<div class="text-gray-500 text-sm mt-2">March 10, 2024</div>
</div>
<h3 class="text-xl font-semibold text-gray-900 mb-3 leading-tight">
Modern JavaScript: ES2024 Features You Should Know
</h3>
<p class="text-gray-600 text-sm leading-relaxed">
Explore the latest JavaScript features and how they can improve your code quality and development workflow.
</p>
</div>
<button class="text-blue-600 hover:text-blue-700 font-medium flex items-center group mt-4">
Read More
<svg class="w-4 h-4 ml-2 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
</svg>
</button>
</div>
</article>
<!-- Article 3 -->
<article class="bg-white rounded-lg shadow-md hover:shadow-lg transition-all duration-300 overflow-hidden group">
<div class="h-48 overflow-hidden">
<img src="https://images.unsplash.com/photo-1571171637578-41bc2dd41cd2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80"
alt="Person typing on laptop with React code"
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
</div>
<div class="p-6 flex flex-col justify-between">
<div>
<div class="mb-3">
<span class="text-blue-600 py-1 rounded text-xs font-semibold uppercase tracking-wide">React</span>
<div class="text-gray-500 text-sm mt-2">March 8, 2024</div>
</div>
<h3 class="text-xl font-semibold text-gray-900 mb-3 leading-tight">
React Performance: Optimization Tips and Tricks
</h3>
<p class="text-gray-600 text-sm leading-relaxed">
Learn proven techniques to optimize your React applications for better performance and user experience.
</p>
</div>
<button class="text-blue-600 hover:text-blue-700 font-medium flex items-center group mt-4">
Read More
<svg class="w-4 h-4 ml-2 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
</svg>
</button>
</div>
</article>
</div>
</div>
</section>Checkout Form
A responsive, two-column Tailwind CSS Checkout component designed for e-commerce. The left column provides a clear order summary with item details and dynamically calculated totals, while the right column contains a payment form for credit card details component.
LTR
RTL
<div>
<div x-data="{
items: [
{ id: 1, name: 'Wireless Headphones', price: 79.99, qty: 1, image: 'https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=100&h=100&fit=crop' },
{ id: 2, name: 'Smart Watch', price: 199.99, qty: 1, image: 'https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=100&h=100&fit=crop' }
],
get subtotal() {
return this.items.reduce((sum, item) => sum + (item.price * item.qty), 0);
},
get tax() {
return this.subtotal * 0.1;
},
get total() {
return this.subtotal + this.tax;
}
}" class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
<div class="grid lg:grid-cols-2 gap-8">
<!-- Left: Order Summary -->
<div>
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4 rtl:text-right">Order Summary</h3>
<div class="space-y-4 mb-6">
<template x-for="item in items" :key="item.id">
<div class="flex gap-4 rtl:flex-row-reverse">
<img :src="item.image" :alt="item.name" class="w-16 h-16 object-cover rounded">
<div class="flex-1">
<h4 class="font-medium text-gray-900 dark:text-white rtl:text-right" x-text="item.name"></h4>
<p class="text-sm text-gray-500 dark:text-gray-400 rtl:text-right">Qty: <span x-text="item.qty"></span></p>
</div>
<div class="text-right rtl:text-left">
<p class="font-semibold text-gray-900 dark:text-white">$<span x-text="(item.price * item.qty).toFixed(2)"></span></p>
</div>
</div>
</template>
</div>
<div class="border-t dark:border-gray-700 pt-4 space-y-2">
<div class="flex justify-between text-gray-600 dark:text-gray-400 rtl:flex-row-reverse">
<span>Subtotal</span>
<span>$<span x-text="subtotal.toFixed(2)"></span></span>
</div>
<div class="flex justify-between text-gray-600 dark:text-gray-400 rtl:flex-row-reverse">
<span>Tax</span>
<span>$<span x-text="tax.toFixed(2)"></span></span>
</div>
<div class="flex justify-between text-lg font-bold text-gray-900 dark:text-white pt-2 border-t dark:border-gray-700 rtl:flex-row-reverse">
<span>Total</span>
<span>$<span x-text="total.toFixed(2)"></span></span>
</div>
</div>
</div>
<!-- Right: Payment Form -->
<div>
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4 rtl:text-right">Payment Details</h3>
<form class="space-y-4">
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1 rtl:text-right">Email</label>
<input type="email" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white rtl:text-right" placeholder="your@email.com">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1 rtl:text-right">Card Number</label>
<input type="text" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white rtl:text-right" placeholder="1234 5678 9012 3456">
</div>
<div class="grid grid-cols-2 gap-4">
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1 rtl:text-right">Expiry</label>
<input type="text" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white rtl:text-right" placeholder="MM/YY">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1 rtl:text-right">CVV</label>
<input type="text" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white rtl:text-right" placeholder="123">
</div>
</div>
<button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 text-white font-semibold py-3 rounded-lg transition">
Complete Purchase
</button>
</form>
</div>
</div>
</div>
</div>Coming Soon Page
A full-screen "Tailwind CSS Coming Soon" page featuring animated gradient backgrounds, a live countdown timer, and social media links, all with a smooth fade-in animation on load component.
LTR
RTL
<section class="relative overflow-hidden min-h-screen bg-white dark:bg-gray-900 flex items-center justify-center"
x-data="{
loaded: false,
countdown: { days: 0, hours: 0, minutes: 0, seconds: 0 }
}"
x-init="
setTimeout(() => loaded = true, 200);
const targetDate = new Date().getTime() + (30 * 24 * 60 * 60 * 1000);
setInterval(() => {
const now = new Date().getTime();
const distance = targetDate - now;
countdown.days = Math.floor(distance / (1000 * 60 * 60 * 24));
countdown.hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
countdown.minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
countdown.seconds = Math.floor((distance % (1000 * 60)) / 1000);
}, 1000);
">
<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 animate-pulse" style="animation-duration: 4s;"></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 animate-pulse" style="animation-duration: 6s; animation-delay: 2s;"></div>
<div class="absolute top-1/4 left-1/4 rtl:right-1/4 rtl:left-auto bg-pink-400/10 dark:bg-pink-600/10 blur-2xl w-[256px] h-[256px] rounded-full animate-pulse" style="animation-duration: 8s; animation-delay: 1s;"></div>
</div>
<div class="relative z-10 mx-auto px-4 py-20 sm:px-6 lg:px-8 max-w-6xl">
<div class="text-center space-y-8">
<div :class="{ 'opacity-100 translate-y-0': loaded, 'opacity-0 translate-y-8': !loaded }" class="transition-all duration-1000 ease-out">
<div class="inline-flex items-center space-x-2 rtl:space-x-reverse px-4 py-2 rounded-full bg-blue-100/80 dark:bg-blue-900/80 backdrop-blur-sm mb-6">
<div class="animate-pulse w-2 h-2 rounded-full bg-blue-500"></div>
<span class="text-sm font-medium text-blue-700 dark:text-blue-300">Coming Soon</span>
</div>
<h1 class="text-5xl font-bold text-gray-900 leading-tight sm:text-6xl lg:text-7xl dark:text-white mb-6">
Something <span class="bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">Amazing</span> is Coming
</h1>
<p class="text-xl text-gray-600 leading-relaxed dark:text-gray-300 max-w-3xl mx-auto">
We're crafting an extraordinary experience that will revolutionize the way you work. Get ready for innovation, creativity, and solutions beyond imagination.
</p>
</div>
<div :class="{ 'opacity-100 translate-y-0': loaded, 'opacity-0 translate-y-8': !loaded }" class="transition-all duration-1000 ease-out delay-300">
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 max-w-2xl mx-auto mb-8">
<div class="bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm rounded-2xl p-6 shadow-lg border border-gray-200/50 dark:border-gray-700/50">
<div class="text-3xl font-bold text-gray-900 dark:text-white" x-text="countdown.days.toString().padStart(2, '0')">00</div>
<div class="text-sm text-gray-600 dark:text-gray-400">Days</div>
</div>
<div class="bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm rounded-2xl p-6 shadow-lg border border-gray-200/50 dark:border-gray-700/50">
<div class="text-3xl font-bold text-gray-900 dark:text-white" x-text="countdown.hours.toString().padStart(2, '0')">00</div>
<div class="text-sm text-gray-600 dark:text-gray-400">Hours</div>
</div>
<div class="bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm rounded-2xl p-6 shadow-lg border border-gray-200/50 dark:border-gray-700/50">
<div class="text-3xl font-bold text-gray-900 dark:text-white" x-text="countdown.minutes.toString().padStart(2, '0')">00</div>
<div class="text-sm text-gray-600 dark:text-gray-400">Minutes</div>
</div>
<div class="bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm rounded-2xl p-6 shadow-lg border border-gray-200/50 dark:border-gray-700/50">
<div class="text-3xl font-bold text-gray-900 dark:text-white" x-text="countdown.seconds.toString().padStart(2, '0')">00</div>
<div class="text-sm text-gray-600 dark:text-gray-400">Seconds</div>
</div>
</div>
</div>
<div :class="{ 'opacity-100 translate-y-0': loaded, 'opacity-0 translate-y-8': !loaded }" class="transition-all duration-1000 ease-out delay-500">
<div class="flex justify-center space-x-6 rtl:space-x-reverse mt-12">
<a href="#" class="w-12 h-12 rounded-full bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm flex items-center justify-center text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 hover:scale-110 transition-all duration-300 border border-gray-200/50 dark:border-gray-700/50">
<i class="fab fa-twitter text-lg"></i>
</a>
<a href="#" class="w-12 h-12 rounded-full bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm flex items-center justify-center text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 hover:scale-110 transition-all duration-300 border border-gray-200/50 dark:border-gray-700/50">
<i class="fab fa-instagram text-lg"></i>
</a>
<a href="#" class="w-12 h-12 rounded-full bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm flex items-center justify-center text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 hover:scale-110 transition-all duration-300 border border-gray-200/50 dark:border-gray-700/50">
<i class="fab fa-linkedin text-lg"></i>
</a>
</div>
</div>
</div>
</div>
<div class="absolute top-20 left-10 rtl:right-10 rtl:left-auto opacity-60 animate-bounce w-4 h-4 rounded-full bg-yellow-400" style="animation-delay: 0s; animation-duration: 3s;"></div>
<div class="absolute top-40 right-20 rtl:left-20 rtl:right-auto opacity-40 animate-bounce w-6 h-6 rounded-full bg-pink-400" style="animation-delay: 1s; animation-duration: 4s;"></div>
<div class="absolute bottom-40 left-20 rtl:right-20 rtl:left-auto opacity-50 animate-bounce w-3 h-3 rounded-full bg-green-400" style="animation-delay: 2s; animation-duration: 5s;"></div>
<div class="absolute bottom-20 right-10 rtl:left-10 rtl:right-auto opacity-30 animate-bounce w-5 h-5 rounded-full bg-purple-400" style="animation-delay: 0.5s; animation-duration: 6s;"></div>
</section>Custom Audio Player
A stylish and modern custom Tailwind CSS Audio Player component. It features album art, track information, a seekable progress bar, play/pause controls, and a volume slider, all designed to be fully responsive component.
LTR
RTL
<div class="max-w-md w-full">
<h1 class="text-3xl font-bold text-gray-900 dark:text-white mb-6 text-center rtl:text-right">Custom Audio Player</h1>
<div
x-data="{
isPlaying: false,
isMuted: false,
volume: 0.7,
currentTime: 0,
duration: 0,
progress: 0,
currentTrack: {
title: 'Summer Vibes',
artist: 'Ocean Waves',
src: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3'
},
init() {
this.duration = this.$refs.audio.duration || 0;
},
togglePlay() {
if (this.$refs.audio.paused) {
this.$refs.audio.play();
this.isPlaying = true;
} else {
this.$refs.audio.pause();
this.isPlaying = false;
}
},
updateProgress() {
this.currentTime = this.$refs.audio.currentTime;
this.duration = this.$refs.audio.duration || 0;
this.progress = this.duration > 0 ? (this.currentTime / this.duration) * 100 : 0;
},
seek(event) {
const rect = this.$refs.progressBar.getBoundingClientRect();
const percent = (event.clientX - rect.left) / rect.width;
this.$refs.audio.currentTime = percent * this.duration;
},
toggleMute() {
this.isMuted = !this.isMuted;
this.$refs.audio.muted = this.isMuted;
if (this.isMuted) {
this.$refs.audio.volume = 0;
} else {
this.$refs.audio.volume = this.volume;
}
},
updateVolume() {
this.$refs.audio.volume = this.volume;
this.isMuted = this.volume === 0;
},
formatTime(seconds) {
if (isNaN(seconds)) return '0:00';
const mins = Math.floor(seconds / 60);
const secs = Math.floor(seconds % 60);
return `${mins}:${secs < 10 ? '0' : ''}${secs}`;
},
onAudioEnd() {
this.isPlaying = false;
this.$refs.audio.currentTime = 0; // Reset to start
}
}"
x-init="init"
@keydown.window.space.prevent="togglePlay"
class="bg-white dark:bg-gradient-to-br dark:from-slate-800 dark:to-slate-950 rounded-xl shadow-2xl p-6 overflow-hidden"
>
<!-- Hidden audio element -->
<audio
x-ref="audio"
@timeupdate="updateProgress"
@loadedmetadata="init"
@ended="onAudioEnd"
preload="metadata"
class="hidden"
>
<source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" type="audio/mp3">
Your browser does not support the audio element.
</audio>
<!-- Album Art & Title -->
<div class="flex items-center space-x-4 rtl:space-x-reverse mb-6">
<div class="w-16 h-16 bg-blue-500 rounded-lg overflow-hidden shadow-lg">
<img src="https://images.unsplash.com/photo-1493225457124-a3eb161ffa5f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80"
alt="Album Art" class="w-full h-full object-cover">
</div>
<div class="flex-1">
<h2 class="text-gray-900 dark:text-white font-semibold text-lg" x-text="currentTrack.title">Song Title</h2>
<p class="text-gray-500 dark:text-gray-400" x-text="currentTrack.artist">Artist Name</p>
</div>
</div>
<!-- Progress Bar -->
<div class="w-full mb-4">
<div
x-ref="progressBar"
@click="seek($event)"
class="relative w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden cursor-pointer group"
>
<div
class="absolute top-0 left-0 h-full bg-blue-500 rounded-full"
:style="`width: ${progress}%`"
></div>
<div
class="absolute top-1/2 w-4 h-4 bg-blue-500 rounded-full transform -translate-x-1/2 -translate-y-1/2 shadow-lg opacity-0 group-hover:opacity-100 transition-opacity"
:style="`left: ${progress}%`"
></div>
</div>
</div>
<!-- Time Display -->
<div class="flex justify-between text-gray-500 dark:text-gray-400 text-sm mb-6 rtl:flex-row-reverse">
<span x-text="formatTime(currentTime)">0:00</span>
<span x-text="formatTime(duration)">0:00</span>
</div>
<!-- Controls -->
<div class="flex items-center justify-between">
<!-- Play/Pause Button -->
<button
@click="togglePlay"
class="text-white bg-blue-600 hover:bg-blue-500 transition-colors rounded-full w-16 h-16 flex items-center justify-center shadow-lg"
>
<!-- Play Icon (Solid) -->
<svg x-show="!isPlaying" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
<path fill-rule="evenodd" d="M4.5 5.653c0-1.426 1.529-2.33 2.779-1.643l11.54 6.648c1.295.742 1.295 2.545 0 3.286L7.279 20.99c-1.25.717-2.779-.217-2.779-1.643V5.653z" clip-rule="evenodd" />
</svg>
<!-- Pause Icon (Solid) -->
<svg x-show="isPlaying" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6 ml-1" style="display: none;">
<path fill-rule="evenodd" d="M6.75 5.25a.75.75 0 00-.75.75v12a.75.75 0 00.75.75h.75a.75.75 0 00.75-.75V6a.75.75 0 00-.75-.75H6.75zm5.25 0a.75.75 0 00-.75.75v12a.75.75 0 00.75.75h.75a.75.75 0 00.75-.75V6a.75.75 0 00-.75-.75h-.75z" clip-rule="evenodd" />
</svg>
</button>
<!-- Volume Control -->
<div class="flex items-center space-x-2 rtl:space-x-reverse">
<button
@click="toggleMute"
class="text-gray-500 dark:text-gray-400 hover:text-blue-400 transition-colors"
:class="{ 'text-blue-400': isMuted }"
>
<!-- Volume On Icon -->
<svg x-show="!isMuted && volume > 0" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M19.114 5.636a9 9 0 010 12.728M16.463 8.288a5.25 5.25 0 010 7.424M6.75 8.25l4.72-4.72a.75.75 0 011.28.53v15.88a.75.75 0 01-1.28.53l-4.72-4.72H4.51c-.88 0-1.704-.507-1.938-1.354A9.01 9.01 0 012.25 12c0-.83.112-1.633.322-2.396C2.806 8.756 3.63 8.25 4.51 8.25H6.75z" />
</svg>
<!-- Volume Mute Icon -->
<svg x-show="isMuted || volume == 0" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6" style="display: none;">
<path stroke-linecap="round" stroke-linejoin="round" d="M17.25 9.75L19.5 12m0 0l2.25 2.25M19.5 12l2.25-2.25M19.5 12l-2.25 2.25m-10.5-6l4.72-4.72a.75.75 0 011.28.53v15.88a.75.75 0 01-1.28.53l-4.72-4.72H4.51c-.88 0-1.704-.507-1.938-1.354A9.01 9.01 0 012.25 12c0-.83.112-1.633.322-2.396C2.806 8.756 3.63 8.25 4.51 8.25H6.75z" />
</svg>
</button>
<div class="relative w-[100px] h-[6px] bg-gray-200 dark:bg-gray-700 rounded-full">
<div
class="absolute top-0 left-0 h-full bg-blue-500 rounded-full w-full origin-left"
:style="`transform: scaleX(${volume})`"
></div>
<div
class="absolute top-1/2 w-3 h-3 bg-blue-500 rounded-full transform -translate-x-1/2 -translate-y-1/2 shadow-lg z-10"
:style="`left: ${volume * 100}%`"
></div>
<input
type="range"
min="0"
max="1"
step="0.01"
x-model="volume"
@input="updateVolume"
class="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer"
>
</div>
</div>
</div>
</div>
<div class="mt-6 text-center text-gray-500 dark:text-gray-400">
<p>Click the play button to start audio. Use spacebar to toggle play/pause.</p>
<p class="mt-2">Click on the progress bar to seek to a specific time.</p>
<p class="mt-2">Audio: SoundHelix Song 1 (SoundHelix)</p>
</div>
</div>Customized Video Player
A fully-featured and accessible custom Tailwind CSS Video Player. It includes play/pause controls, a seekable progress bar, volume slider, fullscreen toggle, time display, and loading indicators, all wrapped in an auto-hiding interface component.
LTR
RTL
<div class="max-w-4xl w-full">
<style>
/* Custom styles for volume slider fill */
.volume-slider-fill {
position: absolute;
top: 0;
left: 0;
height: 100%;
background: #3b82f6;
border-radius: 3px;
width: 100%;
transform-origin: left;
transform: scaleX(1);
}
</style>
<h1 class="text-3xl font-bold text-gray-900 dark:text-white mb-6 text-center rtl:text-right">Custom Video Player</h1>
<div
x-data="{
isPlaying: false,
isMuted: false,
volume: 1,
currentTime: 0,
duration: 0,
progress: 0,
showControls: true,
isHovering: false,
showPlayPauseOverlay: false,
isLoading: true,
isFullscreen: false,
initPlayer() {
this.duration = this.$refs.video.duration;
this.isLoading = false;
this.$nextTick(() => {
setInterval(() => {
if (!this.isHovering && this.isPlaying) {
this.showControls = false;
}
}, 3000);
});
document.addEventListener('fullscreenchange', () => {
this.isFullscreen = !!document.fullscreenElement;
});
},
togglePlay() {
if (this.$refs.video.paused) {
this.$refs.video.play();
this.isPlaying = true;
} else {
this.$refs.video.pause();
this.isPlaying = false;
}
this.showPlayPauseOverlay = true;
setTimeout(() => {
this.showPlayPauseOverlay = false;
}, 500);
this.showControls = true;
},
updateProgress() {
this.currentTime = this.$refs.video.currentTime;
this.progress = (this.currentTime / this.duration) * 100;
},
seek(event) {
const rect = this.$refs.progressBar.getBoundingClientRect();
const percent = (event.clientX - rect.left) / rect.width;
this.$refs.video.currentTime = percent * this.duration;
},
toggleMute() {
this.isMuted = !this.isMuted;
this.$refs.video.muted = this.isMuted;
if (this.isMuted) {
this.$refs.video.volume = 0;
} else {
this.$refs.video.volume = this.volume;
}
},
updateVolume() {
this.$refs.video.volume = this.volume;
this.isMuted = this.volume === 0;
},
toggleFullscreen() {
if (!document.fullscreenElement) {
if (this.$refs.playerContainer.requestFullscreen) {
this.$refs.playerContainer.requestFullscreen();
} else if (this.$refs.playerContainer.webkitRequestFullscreen) {
this.$refs.playerContainer.webkitRequestFullscreen();
} else if (this.$refs.playerContainer.msRequestFullscreen) {
this.$refs.playerContainer.msRequestFullscreen();
}
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
}
},
formatTime(seconds) {
if (isNaN(seconds)) return '0:00';
const mins = Math.floor(seconds / 60);
const secs = Math.floor(seconds % 60);
return `${mins}:${secs < 10 ? '0' : ''}${secs}`;
},
onVideoEnd() {
this.isPlaying = false;
this.showControls = true;
}
}"
x-init="initPlayer"
@keydown.window.space.prevent="togglePlay"
class="relative bg-black rounded-lg overflow-hidden shadow-2xl"
x-ref="playerContainer"
>
<!-- Video Element -->
<video
x-ref="video"
@click="togglePlay"
@timeupdate="updateProgress"
@loadedmetadata="initPlayer"
@ended="onVideoEnd"
@waiting="isLoading = true"
@canplay="isLoading = false"
class="w-full h-auto cursor-pointer"
poster="https://wavykits.com/storage/poster.png"
>
<source src="https://wavykits.com/images/wavykits_presentation.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<!-- Controls Overlay -->
<div
x-show="showControls || isHovering"
x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="opacity-0"
x-transition:enter-end="opacity-100"
x-transition:leave="transition ease-in duration-300"
x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0"
@mouseenter="isHovering = true"
@mouseleave="isHovering = false"
class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex flex-col justify-end p-4"
>
<!-- Progress Bar -->
<div class="w-full mb-3">
<div
x-ref="progressBar"
@click="seek($event)"
class="relative w-full h-2 bg-gray-700 rounded-full overflow-hidden cursor-pointer group"
>
<div
class="absolute top-0 left-0 h-full bg-blue-500 rounded-full"
:style="`width: ${progress}%`"
></div>
<div
class="absolute top-1/2 right-0 w-3 h-3 bg-blue-500 rounded-full transform translate-x-1/2 -translate-y-1/2 shadow-md opacity-0 group-hover:opacity-100"
:style="`left: ${progress}%`"
></div>
</div>
</div>
<!-- Controls -->
<div class="flex items-center justify-between">
<div class="flex items-center space-x-4 rtl:space-x-reverse">
<!-- Play/Pause Button -->
<button
@click="togglePlay"
class="text-white hover:text-blue-400 transition-colors"
:class="{ 'text-blue-400': isPlaying }"
>
<!-- Play Icon -->
<svg x-show="!isPlaying" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.348a1.125 1.125 0 010 1.971l-11.54 6.347a1.125 1.125 0 01-1.667-.985V5.653z" />
</svg>
<!-- Pause Icon -->
<svg x-show="isPlaying" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6" style="display: none;">
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 5.25v13.5m-7.5-13.5v13.5" />
</svg>
</button>
<!-- Volume Control -->
<div class="flex items-center space-x-2 rtl:space-x-reverse">
<button
@click="toggleMute"
class="text-white hover:text-blue-400 transition-colors"
:class="{ 'text-blue-400': isMuted }"
>
<!-- Volume On Icon -->
<svg x-show="!isMuted && volume > 0" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M19.114 5.636a9 9 0 010 12.728M16.463 8.288a5.25 5.25 0 010 7.424M6.75 8.25l4.72-4.72a.75.75 0 011.28.53v15.88a.75.75 0 01-1.28.53l-4.72-4.72H4.51c-.88 0-1.704-.507-1.938-1.354A9.01 9.01 0 012.25 12c0-.83.112-1.633.322-2.396C2.806 8.756 3.63 8.25 4.51 8.25H6.75z" />
</svg>
<!-- Volume Mute Icon -->
<svg x-show="isMuted || volume == 0" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6" style="display: none;">
<path stroke-linecap="round" stroke-linejoin="round" d="M17.25 9.75L19.5 12m0 0l2.25 2.25M19.5 12l2.25-2.25M19.5 12l-2.25 2.25m-10.5-6l4.72-4.72a.75.75 0 011.28.53v15.88a.75.75 0 01-1.28.53l-4.72-4.72H4.51c-.88 0-1.704-.507-1.938-1.354A9.01 9.01 0 012.25 12c0-.83.112-1.633.322-2.396C2.806 8.756 3.63 8.25 4.51 8.25H6.75z" />
</svg>
</button>
<div class="relative w-[100px] h-[6px] bg-gray-700 rounded-full overflow-hidden">
<div
class="volume-slider-fill"
:style="`transform: scaleX(${volume})`"
></div>
<div
class="absolute top-1/2 right-0 w-3 h-3 bg-blue-500 rounded-full transform translate-x-1/2 -translate-y-1/2 shadow-md"
:style="`right: ${(1 - volume) * 100}%`"
></div>
<input
type="range"
min="0"
max="1"
step="0.01"
x-model="volume"
@input="updateVolume"
class="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer z-10"
>
</div>
</div>
<!-- Time Display -->
<div class="text-white text-sm">
<span x-text="formatTime(currentTime)"></span> /
<span x-text="formatTime(duration)"></span>
</div>
</div>
<!-- Fullscreen Button -->
<button
@click="toggleFullscreen"
class="text-white hover:text-blue-400 transition-colors"
>
<!-- Expand Icon -->
<svg x-show="!isFullscreen" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m5.25 11.25h-4.5m4.5 0v-4.5m0 4.5L15 15" />
</svg>
<!-- Compress Icon -->
<svg x-show="isFullscreen" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6" style="display: none;">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 9V4.5M9 9H4.5M9 9L3.75 3.75M9 15v4.5M9 15H4.5M9 15l-5.25 5.25M15 9h4.5M15 9V4.5M15 9l5.25-5.25M15 15h4.5M15 15v4.5M15 15l5.25 5.25" />
</svg>
</button>
</div>
</div>
<!-- Play/Pause Overlay -->
<div
x-show="showPlayPauseOverlay"
x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="opacity-0 scale-75"
x-transition:enter-end="opacity-100 scale-100"
x-transition:leave="transition ease-in duration-200"
x-transition:leave-start="opacity-100 scale-100"
x-transition:leave-end="opacity-0 scale-125"
class="absolute inset-0 flex items-center justify-center pointer-events-none"
>
<div class="bg-black/50 rounded-full w-28 h-28 flex items-center justify-center">
<!-- Play Icon (Solid) -->
<svg x-show="!isPlaying" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-12 h-12 text-white">
<path fill-rule="evenodd" d="M4.5 5.653c0-1.426 1.529-2.33 2.779-1.643l11.54 6.648c1.295.742 1.295 2.545 0 3.286L7.279 20.99c-1.25.717-2.779-.217-2.779-1.643V5.653z" clip-rule="evenodd" />
</svg>
<!-- Pause Icon (Solid) -->
<svg x-show="isPlaying" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-12 h-12 text-white" style="display: none;">
<path fill-rule="evenodd" d="M6.75 5.25a.75.75 0 00-.75.75v12a.75.75 0 00.75.75h.75a.75.75 0 00.75-.75V6a.75.75 0 00-.75-.75H6.75zm5.25 0a.75.75 0 00-.75.75v12a.75.75 0 00.75.75h.75a.75.75 0 00.75-.75V6a.75.75 0 00-.75-.75h-.75z" clip-rule="evenodd" />
</svg>
</div>
</div>
<!-- Loading Spinner -->
<div x-show="isLoading" class="absolute inset-0 flex items-center justify-center bg-black/50">
<div class="animate-spin rounded-full h-16 w-16 border-t-2 border-b-2 border-blue-500"></div>
</div>
</div>
<div class="mt-6 text-center text-gray-400 dark:text-gray-400">
<p>Click anywhere on the video to play/pause. Use spacebar to toggle play/pause.</p>
<p class="mt-2">Click on the progress bar to seek to a specific time.</p>
<p class="mt-2">Video: Wavykits Presentation</p>
</div>
</div>Drag-and-Drop File Input
A modern Tailwind CSS File Upload file input component that supports drag-and-drop, multiple file selection, and provides a clear list of selected files with options to remove them individually component.
LTR
RTL
<div class="max-w-md w-full mx-auto p-6 bg-white rounded-lg shadow-md" x-data="{
files: [],
handleFileChange(event) {
this.files = Array.from(event.target.files).map(file => ({
name: file.name,
size: (file.size / 1024).toFixed(2) + ' KB'
}));
},
removeFile(index) {
this.files.splice(index, 1);
document.getElementById('fileInput').value = '';
}
}">
<div class="mb-4">
<label class="block text-gray-700 text-sm font-medium mb-2" for="fileInput">
Upload Files
</label>
<div class="relative border-2 border-dashed border-gray-300 rounded-md p-4 text-center hover:border-gray-400 transition">
<input
type="file"
id="fileInput"
multiple
@change="handleFileChange"
class="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
>
<p class="text-gray-500">Drag and drop files here or click to browse</p>
</div>
</div>
<div x-show="files.length > 0" class="space-y-2">
<h3 class="text-gray-700 font-medium">Selected Files:</h3>
<ul class="border border-gray-200 rounded-md divide-y divide-gray-200">
<template x-for="(file, index) in files" :key="index">
<li class="flex items-center justify-between p-3 hover:bg-gray-50">
<div>
<p x-text="file.name" class="text-sm text-gray-700"></p>
<p x-text="file.size" class="text-xs text-gray-500"></p>
</div>
<button
@click="removeFile(index)"
class="text-red-500 hover:text-red-700 text-sm"
>
Remove
</button>
</li>
</template>
</ul>
</div>
</div>E-commerce Product Card
A modern Tailwind CSS Product Card for e-commerce sites, featuring a prominent product image with a "like" button, product title, description, price, and customer ratings. The card is designed to be visually appealing and includes a clear "Add to Cart" call-to-action button component.
LTR
RTL
<div class="space-y-4">
<div class="max-w-sm mx-auto">
<div x-data="{ liked: false }" class="bg-white rounded-lg shadow-md overflow-hidden">
<div class="relative">
<img src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=400&h=400&fit=crop"
alt="Product"
class="w-full h-64 object-cover">
<button @click="liked = !liked"
class="absolute top-4 right-4 p-2 bg-white rounded-full shadow">
<svg class="w-5 h-5" :class="liked ? 'fill-red-500' : 'fill-gray-300'"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
</svg>
</button>
</div>
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 mb-1">Wireless Headphones</h3>
<p class="text-sm text-gray-600 mb-3">Premium sound quality</p>
<div class="flex items-center justify-between mb-4">
<span class="text-2xl font-bold text-gray-900">$99.99</span>
<div class="flex items-center">
<span class="text-yellow-400 text-sm">★★★★★</span>
<span class="text-gray-600 text-sm ml-1">(128)</span>
</div>
</div>
<button class="w-full bg-blue-600 text-white py-2 rounded-lg hover:bg-blue-700 transition">
Add to Cart
</button>
</div>
</div>
</div>
</div>E-commerce Product Details Page
A comprehensive Tailwind CSS Product Detail product details component for an e-commerce site. It features a responsive two-column layout with an image gallery on the left and product information on the right. Key functionalities include thumbnail image selection, color and storage variant options, quantity controls, and add-to-cart functionality component.
LTR
RTL
<div
x-data="{
selectedImage: 'https://images.unsplash.com/photo-1592899677977-9c10ca588bbd?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80',
images: [
'https://images.unsplash.com/photo-1592899677977-9c10ca588bbd?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80',
'https://images.unsplash.com/photo-1589492477829-5e65395b66cc?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80',
'https://images.unsplash.com/photo-1565849904461-04a58ad377e0?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80',
'https://images.unsplash.com/photo-1605236453806-6ff36851218e?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80'
],
rating: 4.7,
colors: [
{ id: 1, name: 'Space Gray', value: '#4B5563' },
{ id: 2, name: 'Silver', value: '#E5E7EB' },
{ id: 3, name: 'Gold', value: '#FCD34D' },
{ id: 4, name: 'Blue', value: '#3B82F6' }
],
selectedColor: 1,
storageOptions: ['128GB', '256GB', '512GB'],
selectedStorage: '128GB',
quantity: 1,
activeTab: 'description',
addToCart() {
alert(`Added to cart: Smartphone X (${this.selectedStorage}) - Quantity: ${this.quantity}`);
}
}"
x-cloak
class="max-w-6xl mx-auto"
>
<!-- Breadcrumb -->
<nav class="mb-6 text-sm">
<ol class="flex items-center space-x-2 rtl:space-x-reverse">
<li><a href="#" class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300">Home</a></li>
<li class="flex items-center">
<span class="mx-2 text-gray-400 dark:text-gray-500">/</span>
<a href="#" class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300">Electronics</a>
</li>
<li class="flex items-center">
<span class="mx-2 text-gray-400 dark:text-gray-500">/</span>
<a href="#" class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300">Phones</a>
</li>
<li class="flex items-center">
<span class="mx-2 text-gray-400 dark:text-gray-500">/</span>
<span class="text-gray-700 dark:text-gray-300">Smartphone X</span>
</li>
</ol>
</nav>
<div class="equal-height-row grid grid-cols-1 md:grid-cols-2 md:gap-8">
<!-- Product Images -->
<div class="equal-height-col mb-6 md:mb-0">
<div class="equal-height-content bg-white dark:bg-gray-800 rounded-lg shadow-md p-4">
<div class="main-image-container mb-4">
<img
:src="selectedImage"
alt="Product Image"
class="max-h-[500px] w-full object-cover rounded-lg"
>
</div>
<div class="grid grid-cols-4 gap-2 w-full mt-auto">
<template x-for="(image, index) in images" :key="index">
<button
@click="selectedImage = image"
:class="selectedImage === image ? 'ring-2 ring-blue-500' : 'ring-1 ring-gray-300 dark:ring-gray-600'"
class="w-full h-20 rounded-md overflow-hidden focus:outline-none"
>
<img :src="image" :alt="'Thumbnail ' + (index + 1)" class="w-full h-full object-cover">
</button>
</template>
</div>
</div>
</div>
<!-- Product Info -->
<div class="equal-height-col">
<div class="equal-height-content bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
<h1 class="text-2xl font-bold mb-2 rtl:text-right">Smartphone X - 128GB</h1>
<div class="flex items-center mb-4">
<div class="flex text-yellow-400">
<template x-for="i in 5" :key="i">
<svg x-show="i <= rating" class="w-5 h-5 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/>
</svg>
<svg x-show="i > rating" class="w-5 h-5 fill-current text-gray-300 dark:text-gray-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/>
</svg>
</template>
</div>
<span class="ml-2 rtl:mr-2 text-sm text-gray-600 dark:text-gray-400">(142 reviews)</span>
</div>
<div class="mb-6">
<span class="text-3xl font-bold text-gray-900 dark:text-white">$599.99</span>
<span class="ml-2 rtl:mr-2 text-lg text-gray-500 dark:text-gray-400 line-through">$699.99</span>
<span class="ml-2 rtl:mr-2 text-sm bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-200 px-2 py-1 rounded">Save $100</span>
</div>
<div class="mb-6">
<h3 class="font-medium mb-2 rtl:text-right">Color</h3>
<div class="flex space-x-2 rtl:space-x-reverse">
<template x-for="color in colors" :key="color.id">
<button
@click="selectedColor = color.id"
:class="selectedColor === color.id
? 'ring-2 ring-blue-500'
: 'ring-1 ring-gray-300 dark:ring-gray-600'"
class="w-10 h-10 rounded-full focus:outline-none flex items-center justify-center"
:style="`background-color: ${color.value}`"
:title="color.name"
></button>
</template>
</div>
</div>
<div class="mb-6">
<h3 class="font-medium mb-2 rtl:text-right">Storage</h3>
<div class="flex flex-wrap gap-2">
<template x-for="storage in storageOptions" :key="storage">
<button
@click="selectedStorage = storage"
:class="selectedStorage === storage
? 'bg-blue-500 text-white'
: 'bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200'"
class="px-4 py-2 rounded-md focus:outline-none transition-colors"
>
<span x-text="storage"></span>
</button>
</template>
</div>
</div>
<div class="flex items-center mb-6">
<span class="mr-4 rtl:ml-4 font-medium rtl:text-right">Quantity:</span>
<div class="flex items-center border border-gray-300 dark:border-gray-600 rounded-md">
<button
@click="if(quantity > 1) quantity--"
class="px-3 py-1 text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 focus:outline-none"
>
-
</button>
<span class="px-4 py-1" x-text="quantity"></span>
<button
@click="quantity++"
class="px-3 py-1 text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 focus:outline-none"
>
+
</button>
</div>
</div>
<div class="flex flex-col sm:flex-row gap-3 mb-6">
<button
@click="addToCart()"
class="flex-1 bg-blue-500 hover:bg-blue-600 text-white py-3 px-6 rounded-md font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900"
>
Add to Cart
</button>
<button
class="flex-1 bg-gray-800 dark:bg-gray-700 hover:bg-gray-900 dark:hover:bg-gray-600 text-white py-3 px-6 rounded-md font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900"
>
Buy Now
</button>
</div>
<div class="text-sm text-gray-600 dark:text-gray-400 rtl:text-right mt-auto">
<p class="mb-1">✓ Free shipping on orders over $50</p>
<p class="mb-1">✓ 30-day money-back guarantee</p>
<p>✓ 2-year warranty included</p>
</div>
</div>
</div>
</div>
</div>