All Components
Browse our entire library of ready-to-use components. Copy the code, paste into your project, and customize to fit your needs.
Simple Blog Post
A detailed Tailwind CSS Blog Post article component that explores the concept of mindful coding. It includes a structured layout with a featured image, rich text content with headings, paragraphs, lists, and a stylized code block. The component is designed for readability and includes article metadata like author and date, along with topic tags component.
LTR
RTL
<article class="max-w-3xl mx-auto px-4 py-12 bg-white shadow-sm min-h-screen">
<!-- Article Header -->
<div class="mb-10 text-center">
<div class="mb-4">
<span class="text-blue-600 font-semibold text-sm uppercase tracking-wide">Mindfulness</span>
</div>
<h1 class="text-4xl font-bold text-gray-900 mb-4">The Art of Mindful Coding: Finding Flow in Programming</h1>
<div class="text-gray-600 flex justify-center items-center space-x-4">
<span>Sarah Chen</span>
<span class="text-gray-300">•</span>
<span>April 2, 2024</span>
<span class="text-gray-300">•</span>
<span>8 min read</span>
</div>
</div>
<!-- Featured Image -->
<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="article-image">
<!-- Article Content -->
<div class="content text-gray-800 dark:text-white">
<p class="text-lg text-gray-700 mb-6">
In the fast-paced world of software development, it's easy to get caught up in deadlines, complex problems, and the constant pressure to deliver. But what if there was a way to approach coding that not only improves the quality of your work but also enhances your well-being? Enter mindful coding—the practice of bringing full awareness and presence to the act of programming.
</p>
<h2 class="text-2xl font-bold text-gray-900">What is Mindful Coding?</h2>
<p>
Mindful coding is the application of mindfulness principles to software development. It's about being fully present with your code, your tools, and your thought processes without judgment. Rather than rushing through tasks or multitasking, mindful coding encourages developers to focus on one thing at a time with complete attention.
</p>
<p>
This approach transforms coding from a purely technical exercise into a meditative practice. When you code mindfully, you're not just writing instructions for a computer—you're engaging in a creative process that requires clarity, patience, and awareness.
</p>
<h2 class="text-2xl font-bold text-gray-900">The Benefits of a Mindful Approach</h2>
<p>
Adopting a mindful approach to programming offers numerous benefits that extend beyond just writing better code:
</p>
<ul class="list-disc">
<li><strong>Reduced errors:</strong> When you're fully focused, you're less likely to make careless mistakes that lead to bugs.</li>
<li><strong>Enhanced problem-solving:</strong> Mindfulness clears mental clutter, allowing you to see solutions more clearly.</li>
<li><strong>Improved learning:</strong> Being present helps you absorb new concepts and technologies more effectively.</li>
<li><strong>Greater job satisfaction:</strong> Mindful coding can transform frustrating challenges into engaging puzzles.</li>
<li><strong>Reduced burnout:</strong> By staying present, you avoid the anxiety that comes from worrying about future deadlines or past mistakes.</li>
</ul>
<h2 class="text-2xl font-bold text-gray-900">Practical Techniques for Mindful Coding</h2>
<p>
Incorporating mindfulness into your coding practice doesn't require meditation cushions or hours of practice. Here are simple techniques you can start using today:
</p>
<h3 class="text-xl font-semibold text-gray-900 mt-6 mb-3">1. The Pre-Coding Ritual</h3>
<p>
Before you start coding, take just 60 seconds to center yourself. Close your eyes, take three deep breaths, and set an intention for your coding session. This simple practice creates a mental boundary between other activities and focused coding time.
</p>
<h3 class="text-xl font-semibold text-gray-900 mt-6 mb-3">2. Single-Tasking</h3>
<p>
In our multitasking culture, single-tasking feels radical. Yet, it's one of the most powerful mindfulness practices. When coding, close unnecessary tabs, silence notifications, and commit to working on one task until it's complete or you reach a natural stopping point.
</p>
<h3 class="text-xl font-semibold text-gray-900 mt-6 mb-3">3. The Pomodoro Technique with Awareness</h3>
<p>
The Pomodoro Technique—working in focused 25-minute intervals—is even more effective when combined with mindfulness. During your 5-minute breaks, instead of checking social media, try stretching, looking out a window, or simply noticing your breath.
</p>
<h3 class="text-xl font-semibold text-gray-900 mt-6 mb-3">4. Mindful Debugging</h3>
<p>
When you encounter a bug, instead of reacting with frustration, approach it with curiosity. Ask yourself: "What can this error teach me?" This shift in perspective transforms debugging from a stressful task into an interesting investigation.
</p>
<div class="code-block">
// Example of mindful coding in practice:<br>
// Instead of rushing to fix an error...<br>
<br>
// 1. Pause and observe what's happening<br>
// 2. Breathe deeply before investigating<br>
// 3. Approach the problem with curiosity<br>
// 4. Appreciate the learning opportunity<br>
</div>
<h2 class="text-2xl font-bold text-gray-900">Cultivating a Mindful Coding Mindset</h2>
<p>
Beyond specific techniques, mindful coding is ultimately about cultivating a particular mindset—one of curiosity, patience, and presence. This mindset transforms how you approach challenges and interact with your code.
</p>
<p>
When you encounter a difficult problem, instead of immediately searching for solutions online, try sitting with the problem for a few minutes. Observe your thought process without rushing to judgment. Often, the space created by this pause allows creative solutions to emerge naturally.
</p>
<h2 class="text-2xl font-bold text-gray-900">Conclusion</h2>
<p>
Mindful coding isn't about adding another item to your already-full plate. It's about changing your relationship with the work you're already doing. By bringing awareness and presence to your coding practice, you can transform it from a source of stress into a fulfilling, meditative activity.
</p>
<p>
The next time you sit down to code, try incorporating just one mindful practice. Notice how it affects your focus, your code quality, and your overall experience. With consistent practice, you may find that mindful coding becomes not just a technique, but a way of being with technology that serves both your work and your well-being.
</p>
</div>
<!-- Article Footer -->
<div class="mt-12 pt-8 border-t border-gray-200">
<div class="flex flex-wrap gap-2 mb-6">
<span class="bg-blue-50 text-blue-700 px-3 py-1 rounded-full text-sm">Mindfulness</span>
<span class="bg-blue-50 text-blue-700 px-3 py-1 rounded-full text-sm">Productivity</span>
<span class="bg-blue-50 text-blue-700 px-3 py-1 rounded-full text-sm">Software Development</span>
<span class="bg-blue-50 text-blue-700 px-3 py-1 rounded-full text-sm">Wellbeing</span>
</div>
</div>
</article>Simple Contact Form Section
A clean and modern Tailwind CSS Contact Form section with a clear headline, descriptive text, and standard input fields for name, email, subject, and message, all housed within a styled card component.
LTR
RTL
<section class="py-20 bg-gray-50 dark:bg-gray-800">
<div class="mx-auto px-4 sm:px-6 lg:px-8">
<div class="mb-16 text-center">
<h2 class="mb-4 text-4xl font-bold text-gray-900 sm:text-5xl dark:text-white">
Get in Touch
</h2>
<p class="mx-auto text-xl text-gray-600 dark:text-gray-300">
Have questions or ready to start your project? Reach out to us, and our team will respond promptly.
</p>
</div>
<div class="max-w-2xl mx-auto p-8 rounded-2xl bg-white shadow-lg dark:bg-gray-900">
<form action="#" method="POST" class="space-y-6">
<div>
<label for="name" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Full Name</label>
<input type="text" id="name" name="name" required class="focus:ring-blue-600 block w-full mt-1 p-3 border border-gray-300 rounded-lg bg-gray-50 text-gray-900 dark:border-gray-600 dark:bg-gray-800 dark:text-white" />
</div>
<div>
<label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Email Address</label>
<input type="email" id="email" name="email" required class="focus:ring-blue-600 block w-full mt-1 p-3 border border-gray-300 rounded-lg bg-gray-50 text-gray-900 dark:border-gray-600 dark:bg-gray-800 dark:text-white" />
</div>
<div>
<label for="subject" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Subject</label>
<input type="text" id="subject" name="subject" class="focus:ring-blue-600 block w-full mt-1 p-3 border border-gray-300 rounded-lg bg-gray-50 text-gray-900 dark:border-gray-600 dark:bg-gray-800 dark:text-white" />
</div>
<div>
<label for="message" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Message</label>
<textarea id="message" name="message" rows="5" required class="focus:ring-blue-600 block w-full mt-1 p-3 border border-gray-300 rounded-lg bg-gray-50 text-gray-900 dark:border-gray-600 dark:bg-gray-800 dark:text-white"></textarea>
</div>
<button type="submit" class="transition-all duration-200 w-full px-6 py-3 rounded-lg bg-blue-600 font-semibold text-white shadow-lg">Send Message</button>
</form>
</div>
</div>
</section>Simple Footer
A comprehensive Tailwind CSS Footer block featuring organized link columns for company information, resources, and legal pages. Includes a bottom section with copyright notice and social media icons, all arranged in a clean grid layout that adapts to different screen sizes component.
LTR
RTL
<footer class="bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 transition-colors duration-300" x-data="{ currentYear: new Date().getFullYear() }">
<div class="max-w-6xl mx-auto px-4 py-8">
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="space-y-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">Company</h3>
<ul class="space-y-2">
<li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">About Us</a></li>
<li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">Careers</a></li>
<li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">Contact</a></li>
</ul>
</div>
<div class="space-y-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">Resources</h3>
<ul class="space-y-2">
<li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">Documentation</a></li>
<li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">Support</a></li>
<li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">Blog</a></li>
</ul>
</div>
<div class="space-y-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">Legal</h3>
<ul class="space-y-2">
<li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">Privacy Policy</a></li>
<li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">Terms of Service</a></li>
<li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">Cookies</a></li>
</ul>
</div>
</div>
<div class="mt-8 pt-6 border-t border-gray-200 dark:border-gray-700">
<div class="flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0">
<div class="flex items-center space-x-4 rtl:space-x-reverse">
<span class="text-gray-600 dark:text-gray-300">© <span x-text="currentYear"></span> Your Company. All rights reserved.</span>
</div>
<div class="flex space-x-4 rtl:space-x-reverse">
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
<path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
</svg>
</a>
</div>
</div>
</div>
</div>
</footer>Simple Header Navigation
A professional responsive Tailwind CSS Header Navigation block featuring a brand logo, horizontal menu items, and a prominent call-to-action button. Includes a collapsible mobile menu with hamburger icon that smoothly transitions between open and closed states component.
LTR
RTL
<header class="bg-white dark:bg-gray-800 shadow-lg dark:border-b dark:border-gray-700" x-data="{ mobileMenuOpen: false }">
<nav class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between items-center h-16">
<div class="flex-shrink-0">
<a href="#" class="text-2xl font-bold text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition-colors">
Logo
</a>
</div>
<div class="hidden md:block">
<div class="ml-10 flex items-baseline space-x-4 rtl:space-x-reverse">
<a href="#" class="text-gray-900 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 px-3 py-2 rounded-md text-sm font-medium transition-colors">Home</a>
<a href="#" class="text-gray-900 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 px-3 py-2 rounded-md text-sm font-medium transition-colors">About</a>
<a href="#" class="text-gray-900 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 px-3 py-2 rounded-md text-sm font-medium transition-colors">Services</a>
<a href="#" class="text-gray-900 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 px-3 py-2 rounded-md text-sm font-medium transition-colors">Contact</a>
</div>
</div>
<div class="hidden md:block">
<a href="#" class="bg-blue-600 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 transition-colors">
Get Started
</a>
</div>
<div class="md:hidden">
<button @click="mobileMenuOpen = !mobileMenuOpen" class="text-gray-900 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 p-2 rounded-md transition-colors">
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path x-show="!mobileMenuOpen" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
<path x-show="mobileMenuOpen" style="display: none;" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
<div x-show="mobileMenuOpen" x-transition class="md:hidden">
<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3 border-t border-gray-200 dark:border-gray-700">
<a href="#" class="text-gray-900 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 block px-3 py-2 rounded-md text-base font-medium transition-colors">Home</a>
<a href="#" class="text-gray-900 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 block px-3 py-2 rounded-md text-base font-medium transition-colors">About</a>
<a href="#" class="text-gray-900 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 block px-3 py-2 rounded-md text-base font-medium transition-colors">Services</a>
<a href="#" class="text-gray-900 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 block px-3 py-2 rounded-md text-base font-medium transition-colors">Contact</a>
<a href="#" class="bg-blue-600 text-white block px-3 py-2 rounded-md text-base font-medium hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 transition-colors mt-4">Get Started</a>
</div>
</div>
</nav>
</header>Simple Image Carousel
A sleek and responsive Tailwind CSS Image Carousel component with previous/next controls and dot indicators for easy navigation. It supports touch gestures, keyboard navigation, and auto-rotation for a seamless user experience component.
LTR
RTL
<div class="bg-gray-100 dark:bg-gray-900 py-16 px-4">
<div x-data="{
rtl: false,
activeSlide: 0,
slidesEn: [
{ image: 'https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?auto=format&fit=crop&w=1000', title: 'E-commerce Platform', description: 'A modern online store with robust features.' },
{ image: 'https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?auto=format&fit=crop&w=1000', title: 'Fitness Application', description: 'Workout tracking with personalized plans.' },
{ image: 'https://images.unsplash.com/photo-1447933601403-0c6688de566e?auto=format&fit=crop&w=1000', title: 'Coffee Branding', description: 'Complete branding for a local coffee shop.' }
],
next() { this.activeSlide = (this.activeSlide + 1) % this.slidesEn.length; },
prev() { this.activeSlide = (this.activeSlide - 1 + this.slidesEn.length) % this.slidesEn.length; }
}"
x-init="
const handleDirectionChange = (event) => { rtl = event.detail.isRtl; };
window.addEventListener('set-direction', handleDirectionChange);
if (document.documentElement.dir === 'rtl') { rtl = true; }
"
:dir="rtl ? 'rtl' : 'ltr'">
<div class="max-w-4xl mx-auto">
<h1 class="text-3xl font-bold text-center text-gray-900 dark:text-white mb-2">Image Carousel</h1>
<p class="text-gray-600 dark:text-gray-300 text-center mb-8">Browse our latest work</p>
<div class="relative bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden">
<div class="relative h-96">
<template x-for="(slide, index) in slidesEn" :key="index">
<div x-show="activeSlide === index" x-transition:enter="transition ease-out duration-500" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition ease-in duration-500" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="absolute inset-0">
<img :src="slide.image" :alt="slide.title" class="w-full h-full object-cover">
<div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
<div class="absolute bottom-0 left-0 p-6 ltr:text-left rtl:text-right"><h2 class="text-2xl font-bold text-white" x-text="slide.title"></h2><p class="text-gray-200" x-text="slide.description"></p></div>
</div>
</template>
</div>
<button @click="prev()" class="absolute top-1/2 left-4 rtl:right-4 rtl:left-auto transform -translate-y-1/2 bg-white/50 hover:bg-white/80 rounded-full p-2 transition-colors"><svg class="w-6 h-6 text-gray-800 rtl:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg></button>
<button @click="next()" class="absolute top-1/2 right-4 rtl:left-4 rtl:right-auto transform -translate-y-1/2 bg-white/50 hover:bg-white/80 rounded-full p-2 transition-colors"><svg class="w-6 h-6 text-gray-800 rtl:rotate-180" 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 class="absolute bottom-4 left-1/2 transform -translate-x-1/2 flex space-x-2 rtl:space-x-reverse">
<template x-for="(slide, index) in slidesEn" :key="index">
<button @click="activeSlide = index" class="w-3 h-3 rounded-full transition-colors" :class="{'bg-white': activeSlide === index, 'bg-white/50 hover:bg-white': activeSlide !== index}"></button>
</template>
</div>
</div>
</div>
</div>
</section>Simple Numeric Pagination
A clean, minimalistic Tailwind CSS Pagination component with numbered buttons and basic navigation controls, designed for straightforward page selection in a user-friendly, responsive layout component.
LTR
RTL
<section x-data="{
rtl: false,
title: 'Dynamic Pagination',
description: 'A pagination component with full RTL support.'
}"
x-init="
const handleDirectionChange = (event) => { rtl = event.detail.isRtl; };
window.addEventListener('set-direction', handleDirectionChange);
if (document.documentElement.dir === 'rtl') { rtl = true; }
">
<div class="max-w-4xl mx-auto my-16 bg-white dark:bg-gray-800 p-6 rounded-lg shadow-sm">
<div x-data="{ currentPage: 5, totalPages: 10 }" class="flex items-center justify-center space-x-2 rtl:space-x-reverse">
<button @click="currentPage = Math.max(1, currentPage - 1)" :disabled="currentPage === 1" class="px-3 py-2 bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 rounded hover:bg-gray-200 dark:hover:bg-gray-600 disabled:opacity-50 disabled:cursor-not-allowed transition-colors" x-text="rtl ? 'السابق' : 'Previous'"></button>
<template x-for="page in Array.from({length: Math.min(5, totalPages)}, (_, i) => Math.max(1, Math.min(totalPages - 4, currentPage - 2)) + i)">
<button @click="currentPage = page" :class="page === currentPage ? 'bg-blue-600 text-white' : 'bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-600'" class="px-4 py-2 rounded transition-colors font-medium" x-text="page"></button>
</template>
<button @click="currentPage = Math.min(totalPages, currentPage + 1)" :disabled="currentPage === totalPages" class="px-3 py-2 bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 rounded hover:bg-gray-200 dark:hover:bg-gray-600 disabled:opacity-50 disabled:cursor-not-allowed transition-colors" x-text="rtl ? 'التالي' : 'Next'"></button>
</div>
</div>
</section>Simple Tab
A clean and minimal tabbed interface block featuring horizontal navigation with smooth color transitions and active state indicators. Each Tailwind CSS Tab reveals its corresponding content panel with proper contrast for readability component.
LTR
RTL
<section class="py-20 bg-white dark:bg-gray-900" x-data="{ inView: false, activeTab: 0 }" x-init="setTimeout(() => inView = true, 500)">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<!-- Section Header -->
<div class="text-center mb-16">
<div :class="{ 'opacity-100 translate-y-0': inView, 'opacity-0 translate-y-8': !inView }" class="transition-all duration-1000 ease-out">
<h2 class="text-4xl sm:text-5xl font-bold text-gray-900 dark:text-white mb-4">
WavyKits Platform
</h2>
<p class="text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">
Discover how WavyKits empowers you to create stunning websites with its versatile templates, reusable components, and powerful page builder.
</p>
</div>
</div>
<!-- Product Tabs -->
<div :class="{ 'opacity-100 translate-y-0': inView, 'opacity-0 translate-y-8': !inView }" class="transition-all duration-1000 ease-out delay-200">
<!-- Tab Navigation -->
<div class="flex flex-wrap border-b border-gray-200 dark:border-gray-700 mb-6">
<button
@click="activeTab = 0"
:class="{
'border-b-2 border-blue-500 text-blue-500': activeTab === 0,
'text-gray-600 dark:text-gray-300': activeTab !== 0
}"
class="px-4 py-2 font-semibold text-lg hover:text-blue-500 dark:hover:text-blue-400 transition-colors duration-200"
>
Templates & Components
</button>
<button
@click="activeTab = 1"
:class="{
'border-b-2 border-blue-500 text-blue-500': activeTab === 1,
'text-gray-600 dark:text-gray-300': activeTab !== 1
}"
class="px-4 py-2 font-semibold text-lg hover:text-blue-500 dark:hover:text-blue-400 transition-colors duration-200"
>
Page Builder
</button>
<button
@click="activeTab = 2"
:class="{
'border-b-2 border-blue-500 text-blue-500': activeTab === 2,
'text-gray-600 dark:text-gray-300': activeTab !== 2
}"
class="px-4 py-2 font-semibold text-lg hover:text-blue-500 dark:hover:text-blue-400 transition-colors duration-200"
>
SEO Generator
</button>
</div>
<!-- Tab Content -->
<div class="bg-gray-50 dark:bg-gray-800 rounded-2xl p-6 text-gray-600 dark:text-gray-300">
<div x-show="activeTab === 0" x-transition>
<p>WavyKits offers a rich library of responsive templates and reusable components, available in multiple frameworks like React, Vue, Angular, Alpine.js, and Livewire. Whether you're building a landing page, portfolio, or e-commerce site, our templates and components are fully customizable and exportable as clean HTML, Alpine.js, or Tailwind CSS code, ensuring flexibility for any project.</p>
</div>
<div x-show="activeTab === 1" x-transition>
<p>Our intuitive drag-and-drop page builder lets you create stunning, responsive websites without coding. With real-time previews, customizable elements, and seamless integration with our templates and components, WavyKits’s page builder streamlines your workflow, saving time while delivering pixel-perfect designs.</p>
</div>
<div x-show="activeTab === 2" x-transition>
<p>The built-in SEO generator optimizes your website for search engines with automated meta tags, keywords. Enhance visibility and drive traffic effortlessly with tools designed to improve your site’s ranking and performance across all devices.</p>
</div>
</div>
</div>
</div>
</section>Simple WYSIWYG Text Editor
A lightweight, browser-native WYSIWYG Tailwind CSS Text Editor component. It leverages the contenteditable attribute and document.execCommand for basic formatting like bold and italic, along with text alignment. The component includes a clean toolbar, word count functionality component.
LTR
RTL
<div class="max-w-4xl mx-auto">
<h1 class="text-3xl font-bold text-gray-800 dark:text-white mb-2">Custom Text Editor</h1>
<p class="text-gray-600 dark:text-gray-300 mb-8">A simple text editor with dark mode and RTL support</p>
<!-- Text Editor Component -->
<div
x-data="{
darkMode: false,
rtl: false,
wordCount: 0,
init() {
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
this.darkMode = true;
document.documentElement.classList.add('dark');
}
this.updateWordCount();
this.$refs.editor.addEventListener('input', () => { this.updateWordCount(); });
},
formatText(command) {
document.execCommand(command, false, null);
this.$refs.editor.focus();
},
setAlignment(align) {
document.execCommand('justifyLeft', false, null);
document.execCommand('justifyCenter', false, null);
document.execCommand('justifyRight', false, null);
document.execCommand('justifyFull', false, null);
if (align === 'center') {
document.execCommand('justifyCenter', false, null);
} else if (align === 'right') {
document.execCommand('justifyRight', false, null);
} else if (align === 'justify') {
document.execCommand('justifyFull', false, null);
} else {
document.execCommand('justifyLeft', false, null);
}
this.$refs.editor.focus();
},
updateWordCount() {
const text = this.$refs.editor.innerText || '';
const words = text.trim() ? text.trim().split(/\s+/).length : 0;
this.wordCount = words;
}
}"
x-init="init()"
class="bg-white dark:bg-gray-700 rounded-lg shadow-md overflow-hidden transition-colors duration-200">
<!-- Toolbar -->
<div class="flex flex-wrap items-center gap-2 p-3 border-b border-gray-200 dark:border-gray-600 bg-gray-50 dark:bg-gray-800">
<!-- Formatting buttons -->
<button @click="formatText('bold')" type="button"
class="p-2 rounded hover:bg-gray-200 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-200 transition-colors"
title="Bold">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path d="M6 12H12.5C14.9853 12 17 9.98528 17 7.5C17 5.01472 14.9853 3 12.5 3H6V12ZM6 12H13.5C15.9853 12 18 14.0147 18 16.5C18 18.9853 15.9853 21 13.5 21H6V12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
<button @click="formatText('italic')" type="button"
class="p-2 rounded hover:bg-gray-200 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-200 transition-colors"
title="Italic">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path d="M10 3H20M4 21H14M15 3L9 21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
<div class="h-6 border-l border-gray-300 dark:border-gray-600 mx-1"></div>
<!-- Text alignment -->
<button @click="setAlignment('left')" type="button"
class="p-2 rounded hover:bg-gray-200 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-200 transition-colors"
title="Align Left">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M3 14h18M3 18h10M3 6h18"></path>
</svg>
</button>
<button @click="setAlignment('center')" type="button"
class="p-2 rounded hover:bg-gray-200 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-200 transition-colors"
title="Align Center">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 14h10M9 18h6M5 6h14"></path>
</svg>
</button>
<button @click="setAlignment('right')" type="button"
class="p-2 rounded hover:bg-gray-200 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-200 transition-colors"
title="Align Right">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M9 14h10M5 18h14M3 6h18"></path>
</svg>
</button>
<button @click="setAlignment('justify')" type="button"
class="p-2 rounded hover:bg-gray-200 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-200 transition-colors"
title="Justify">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M3 14h18M3 18h18M3 6h18"></path>
</svg>
</button>
<div class="flex-1"></div>
</div>
<!-- Editor content -->
<div
x-ref="editor"
:dir="rtl ? 'rtl' : 'ltr'"
:class="rtl ? 'rtl:text-right' : 'text-left'"
class="p-4 min-h-[200px] max-h-[400px] overflow-y-auto text-gray-800 dark:text-gray-200 bg-white dark:bg-gray-700 transition-colors duration-200"
contenteditable="true">
<p>Start typing your content here...</p>
</div>
<!-- Word count -->
<div class="px-4 py-2 text-xs text-gray-500 dark:text-gray-400 border-t border-gray-200 dark:border-gray-600 bg-gray-50 dark:bg-gray-800 transition-colors duration-200">
<span x-text="wordCount"></span> words
</div>
</div>
<!-- Instructions -->
<div class="mt-8 p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800">
<h3 class="font-semibold text-blue-800 dark:text-blue-300 mb-2">How to use this editor:</h3>
<ul class="text-blue-700 dark:text-blue-400 text-sm list-disc pl-5 space-y-1">
<li>Select text and use the toolbar buttons to format it</li>
<li>Use the alignment buttons to change text alignment</li>
</ul>
</div>
</div>Testimonials Grid Component
A clean, Tailwind CSS Testimonial grid-based section displaying client testimonials. Each card features the client's photo, name, title, and quote, with a subtle fade-in animation on load 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">
What Our Clients Say
</h2>
<p class="mx-auto text-xl text-gray-600 dark:text-gray-300">
Discover how our solutions have transformed businesses worldwide, as told by our valued clients.
</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="transition-shadow duration-300 flex-col flex h-full p-8 rounded-2xl bg-white shadow-lg dark:bg-gray-900">
<div class="items-center flex mb-6">
<div class="overflow-hidden flex-shrink-0 w-[48px] h-[48px] mr-4 rtl:ml-4 rtl:mr-0 rounded-full">
<img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-4.0.3&auto=format&fit=crop&w=100&q=80" alt="Client 1" class="object-cover w-full h-full" />
</div>
<div>
<h4 class="text-lg font-semibold text-gray-900 dark:text-white">
Sarah Johnson
</h4>
<p class="text-sm text-gray-600 dark:text-gray-400">
CEO, TechTrend Innovations
</p>
</div>
</div>
<p class="flex-grow mb-4 text-gray-600 dark:text-gray-300">
"Brand's web development team transformed our outdated website into a modern, user-friendly platform that significantly boosted our online engagement."
</p>
</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="transition-shadow duration-300 flex-col flex h-full p-8 rounded-2xl bg-white shadow-lg dark:bg-gray-900">
<div class="items-center flex mb-6">
<div class="overflow-hidden flex-shrink-0 w-[48px] h-[48px] mr-4 rtl:ml-4 rtl:mr-0 rounded-full">
<img src="https://images.unsplash.com/photo-1519085360753-af0119f7cbe7?ixlib=rb-4.0.3&auto=format&fit=crop&w=100&q=80" alt="Client 2" class="object-cover w-full h-full" />
</div>
<div>
<h4 class="text-lg font-semibold text-gray-900 dark:text-white">
Michael Chen
</h4>
<p class="text-sm text-gray-600 dark:text-gray-400">
Founder, CloudSync Solutions
</p>
</div>
</div>
<p class="flex-grow mb-4 text-gray-600 dark:text-gray-300">
"The cloud solutions provided by Brand scaled our infrastructure seamlessly, allowing us to handle rapid growth without any hiccups."
</p>
</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="transition-shadow duration-300 flex-col flex h-full p-8 rounded-2xl bg-white shadow-lg dark:bg-gray-900">
<div class="items-center flex mb-6">
<div class="overflow-hidden flex-shrink-0 w-[48px] h-[48px] mr-4 rtl:ml-4 rtl:mr-0 rounded-full">
<img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&auto=format&fit=crop&w=100&q=80" alt="Client 3" class="object-cover w-full h-full" />
</div>
<div>
<h4 class="text-lg font-semibold text-gray-900 dark:text-white">
Alex Rodriguez
</h4>
<p class="text-sm text-gray-600 dark:text-gray-400">
Marketing Director, GrowthPeak
</p>
</div>
</div>
<p class="flex-grow mb-4 text-gray-600 dark:text-gray-300">
"Brand's digital marketing strategies skyrocketed our online presence, doubling our leads in just three months."
</p>
</div>
</div>
</div>
</div>
</section>User Management Table Layout
A comprehensive user management interface featuring a responsive Tailwind CSS Table to display user data. It includes fully integrated and interactive "Edit" and "Delete" modals for CRUD operations, with dynamic status and role badges component.
LTR
RTL
<div class="container mx-auto px-4 py-8" x-data="{
darkMode: false,
rtlMode: false,
showEditModal: false,
showDeleteModal: false,
editingIndex: -1,
deletingIndex: -1,
editingUser: {},
deletingUser: {},
users: [
{
id: 1,
name: 'Jane Cooper',
email: 'jane.cooper@example.com',
role: 'Admin',
status: 'Active',
avatar: 'https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=4&w=256&h=256&q=60'
},
{
id: 3,
name: 'Esther Howard',
email: 'esther.howard@example.com',
role: 'User',
status: 'Inactive',
avatar: 'https://images.unsplash.com/photo-1520813792240-56fc4a3765a7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=4&w=256&h=256&q=60'
},
{
id: 4,
name: 'Jenny Wilson',
email: 'jenny.wilson@example.com',
role: 'User',
status: 'Pending',
avatar: 'https://images.unsplash.com/photo-1498551172505-8ee7ad69f235?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=4&w=256&h=256&q=60'
},
{
id: 5,
name: 'Robert Fox',
email: 'robert.fox@example.com',
role: 'Editor',
status: 'Active',
avatar: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=4&w=256&h=256&q=60'
}
],
init() {
this.darkMode = localStorage.getItem('darkMode') === 'true';
this.rtlMode = localStorage.getItem('rtlMode') === 'true';
},
toggleDarkMode() {
this.darkMode = !this.darkMode;
localStorage.setItem('darkMode', this.darkMode);
},
toggleRtlMode() {
this.rtlMode = !this.rtlMode;
localStorage.setItem('rtlMode', this.rtlMode);
},
getRoleClass(role) {
return role === 'Admin' ? 'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200' :
role === 'Editor' ? 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200' :
'bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200';
},
getStatusClass(status) {
return status === 'Active' ? 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200' :
status === 'Inactive' ? 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200' :
'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200';
},
editUser(index) {
this.editingIndex = index;
this.editingUser = {...this.users[index]};
this.showEditModal = true;
},
saveEdit() {
if (this.editingIndex !== -1) {
this.users[this.editingIndex] = {...this.editingUser};
}
this.showEditModal = false;
this.editingIndex = -1;
this.editingUser = {};
},
deleteUser(index) {
this.deletingIndex = index;
this.deletingUser = {...this.users[index]};
this.showDeleteModal = true;
},
confirmDelete() {
if (this.deletingIndex !== -1) {
this.users.splice(this.deletingIndex, 1);
}
this.showDeleteModal = false;
this.deletingIndex = -1;
this.deletingUser = {};
}
}">
<!-- Header with Controls -->
<div class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-6 gap-4">
<div>
<h1 class="text-2xl font-bold text-gray-900 dark:text-white">User Management</h1>
<p class="text-gray-600 dark:text-gray-400">Manage your users with edit and delete actions</p>
</div>
</div>
<!-- Table Container -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow overflow-hidden transition-colors duration-300">
<!-- Table -->
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
<thead class="bg-gray-50 dark:bg-gray-700">
<tr>
<th scope="col" class="px-6 py-3 text-left rtl:text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Name</th>
<th scope="col" class="px-6 py-3 text-left rtl:text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Email</th>
<th scope="col" class="px-6 py-3 text-left rtl:text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Role</th>
<th scope="col" class="px-6 py-3 text-left rtl:text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Status</th>
<th scope="col" class="px-6 py-3 text-left rtl:text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Actions</th>
</tr>
</thead>
<tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
<template x-for="(user, index) in users" :key="user.id">
<tr>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-10 w-10">
<img class="h-10 w-10 rounded-full" :src="user.avatar" alt="">
</div>
<div class="ml-4 rtl:ml-0 rtl:mr-4">
<div class="text-sm font-medium text-gray-900 dark:text-white" x-text="user.name"></div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-gray-900 dark:text-white" x-text="user.email"></div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full"
x-bind:class="getRoleClass(user.role)" x-text="user.role"></span>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full"
x-bind:class="getStatusClass(user.status)" x-text="user.status"></span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
<div class="flex space-x-2 rtl:space-x-reverse">
<button x-on:click="editUser(index)"
class="text-blue-600 dark:text-blue-400 hover:text-blue-900 dark:hover:text-blue-300 transition-colors">
Edit
</button>
<button x-on:click="deleteUser(index)"
class="text-red-600 dark:text-red-400 hover:text-red-900 dark:hover:text-red-300 transition-colors">
Delete
</button>
</div>
</td>
</tr>
</template>
</tbody>
</table>
</div>
</div>
<!-- Edit Modal -->
<div x-show="showEditModal" class="fixed inset-0 overflow-y-auto z-50" style="display: none;">
<div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
<div class="fixed inset-0 transition-opacity" aria-hidden="true">
<div class="absolute inset-0 bg-gray-500 dark:bg-gray-900 opacity-75"></div>
</div>
<span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">​</span>
<div class="inline-block align-bottom bg-white dark:bg-gray-800 rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6">
<div>
<h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white mb-4">
Edit User
</h3>
<div class="mb-4">
<label for="name" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Name</label>
<input type="text" id="name" x-model="editingUser.name" class="mt-1 block w-full border border-gray-300 dark:border-gray-600 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white">
</div>
<div class="mb-4">
<label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Email</label>
<input type="email" id="email" x-model="editingUser.email" class="mt-1 block w-full border border-gray-300 dark:border-gray-600 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white">
</div>
<div class="mb-4">
<label for="role" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Role</label>
<select id="role" x-model="editingUser.role" class="mt-1 block w-full border border-gray-300 dark:border-gray-600 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white">
<option value="Admin">Admin</option>
<option value="User">User</option>
<option value="Editor">Editor</option>
</select>
</div>
<div class="mb-4">
<label for="status" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Status</label>
<select id="status" x-model="editingUser.status" class="mt-1 block w-full border border-gray-300 dark:border-gray-600 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white">
<option value="Active">Active</option>
<option value="Inactive">Inactive</option>
<option value="Pending">Pending</option>
</select>
</div>
</div>
<div class="mt-5 sm:mt-6 sm:grid sm:grid-cols-2 sm:gap-3 sm:grid-flow-row-dense">
<button type="button" x-on:click="saveEdit" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:col-start-2 sm:text-sm">
Save
</button>
<button type="button" x-on:click="showEditModal = false" class="mt-3 sm:mt-0 w-full inline-flex justify-center rounded-md border border-gray-300 dark:border-gray-600 shadow-sm px-4 py-2 bg-white dark:bg-gray-700 text-base font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:col-start-1 sm:text-sm">
Cancel
</button>
</div>
</div>
</div>
</div>
<!-- Delete Confirmation Modal -->
<div x-show="showDeleteModal" class="fixed inset-0 overflow-y-auto z-50" style="display: none;">
<div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
<div class="fixed inset-0 transition-opacity" aria-hidden="true">
<div class="absolute inset-0 bg-gray-500 dark:bg-gray-900 opacity-75"></div>
</div>
<span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">​</span>
<div class="inline-block align-bottom bg-white dark:bg-gray-800 rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6">
<div class="sm:flex sm:items-start">
<div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
<svg class="h-6 w-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<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-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
</svg>
</div>
<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left rtl:sm:ml-0 rtl:sm:mr-4">
<h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white">
Delete User
</h3>
<div class="mt-2">
<p class="text-sm text-gray-500 dark:text-gray-400">
Are you sure you want to delete <span x-text="deletingUser.name" class="font-medium"></span>? This action cannot be undone.
</p>
</div>
</div>
</div>
<div class="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
<button type="button" x-on:click="confirmDelete" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm">
Delete
</button>
<button type="button" x-on:click="showDeleteModal = false" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 dark:border-gray-600 shadow-sm px-4 py-2 bg-white dark:bg-gray-700 text-base font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:mt-0 sm:w-auto sm:text-sm">
Cancel
</button>
</div>
</div>
</div>
</div>
</div>