Modal Components
Beautiful, responsive modal components built with TailwindCSS and AlpineJS. Perfect for dialogs, confirmations, and overlay content.
1. Basic Modal
A simple, clean modal with backdrop blur, close on escape, and click outside to close.
Delete Account
Are you sure you want to delete your account? All of your data will be permanently removed. This action cannot be undone.
<!-- Trigger Button -->
<button @click="showModal = true" class="bg-purple-600 text-white px-6 py-3 rounded-lg font-semibold hover:bg-purple-500 transition-colors">
Open Modal
</button>
<!-- Modal -->
<div x-show="showModal" class="fixed inset-0 z-50 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
<!-- Backdrop -->
<div x-show="showModal" x-transition:enter="ease-out duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="ease-in duration-200" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" @click="showModal = false"></div>
<!-- Modal panel -->
<div class="flex min-h-full items-center justify-center p-4 text-center sm:items-center sm:p-0">
<div x-show="showModal" x-transition:enter="ease-out duration-300" x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100" x-transition:leave="ease-in duration-200" x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100" x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" class="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg">
<div class="bg-white px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
<div class="sm:flex sm:items-start">
<div class="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center 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" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
</svg>
</div>
<div class="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
<h3 class="text-base font-semibold leading-6 text-gray-900" id="modal-title">Delete Account</h3>
<div class="mt-2">
<p class="text-sm text-gray-500">Are you sure you want to delete your account? All of your data will be permanently removed. This action cannot be undone.</p>
</div>
</div>
</div>
</div>
<div class="bg-gray-50 px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6">
<button type="button" class="inline-flex w-full justify-center rounded-md bg-red-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-500 sm:ml-3 sm:w-auto" @click="showModal = false">Delete</button>
<button type="button" class="mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:mt-0 sm:w-auto" @click="showModal = false">Cancel</button>
</div>
</div>
</div>
</div><template>
<!-- Trigger Button -->
<button @click="showModal = true" class="bg-purple-600 text-white px-6 py-3 rounded-lg font-semibold hover:bg-purple-500 transition-colors">
Open Modal
</button>
<!-- Modal -->
<div v-show="showModal" class="fixed inset-0 z-50 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
<!-- Backdrop -->
<div v-show="showModal" class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" @click="showModal = false"></div>
<!-- Modal panel -->
<div class="flex min-h-full items-center justify-center p-4 text-center sm:items-center sm:p-0">
<div v-show="showModal" class="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg">
<div class="bg-white px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
<div class="sm:flex sm:items-start">
<div class="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center 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" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
</svg>
</div>
<div class="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
<h3 class="text-base font-semibold leading-6 text-gray-900" id="modal-title">Delete Account</h3>
<div class="mt-2">
<p class="text-sm text-gray-500">Are you sure you want to delete your account? All of your data will be permanently removed. This action cannot be undone.</p>
</div>
</div>
</div>
</div>
<div class="bg-gray-50 px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6">
<button type="button" class="inline-flex w-full justify-center rounded-md bg-red-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-500 sm:ml-3 sm:w-auto" @click="showModal = false">Delete</button>
<button type="button" class="mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:mt-0 sm:w-auto" @click="showModal = false">Cancel</button>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref } from 'vue';
const showModal = ref(false);
</script>import React, { useState } from 'react';
export default function BasicModal() {
const [showModal, setShowModal] = useState(false);
return (
<>
<!-- Trigger Button -->
<button onClick={() => setShowModal(true)} className="bg-purple-600 text-white px-6 py-3 rounded-lg font-semibold hover:bg-purple-500 transition-colors">
Open Modal
</button>
<!-- Modal -->
{showModal && (
<div className="fixed inset-0 z-50 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
<!-- Backdrop -->
<div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" onClick={() => setShowModal(false)}></div>
<!-- Modal panel -->
<div className="flex min-h-full items-center justify-center p-4 text-center sm:items-center sm:p-0">
<div className="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg">
<div className="bg-white px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
<div className="sm:flex sm:items-start">
<div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
<svg className="h-6 w-6 text-red-600" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" aria-hidden="true">
<path strokeLinecap="round" strokeLinejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
</svg>
</div>
<div className="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
<h3 className="text-base font-semibold leading-6 text-gray-900" id="modal-title">Delete Account</h3>
<div className="mt-2">
<p className="text-sm text-gray-500">Are you sure you want to delete your account? All of your data will be permanently removed. This action cannot be undone.</p>
</div>
</div>
</div>
</div>
<div className="bg-gray-50 px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6">
<button type="button" className="inline-flex w-full justify-center rounded-md bg-red-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-500 sm:ml-3 sm:w-auto" onClick={() => setShowModal(false)}>Delete</button>
<button type="button" className="mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:mt-0 sm:w-auto" onClick={() => setShowModal(false)}>Cancel</button>
</div>
</div>
</div>
</div>
)}
</>
);
}2. Full Page Modal
A full-screen modal overlay that covers the entire viewport, ideal for immersive content or forms.
Welcome to Templateight
Explore our premium components and templates
Discover Amazing Components
Our collection of beautifully designed, responsive components built with TailwindCSS and AlpineJS.
50+ Components
Ready-to-use UI components for modern web development.
Fully Responsive
Optimized for all screen sizes and devices.
Lightning Fast
Built with performance in mind for optimal user experience.
<!-- Trigger Button -->
<button @click="showModal = true" class="bg-purple-600 text-white px-6 py-3 rounded-lg font-semibold hover:bg-purple-500 transition-colors">
Open Full Page Modal
</button>
<!-- Modal -->
<div x-show="showModal" class="fixed inset-0 z-50 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
<!-- Backdrop -->
<div x-show="showModal" x-transition:enter="ease-out duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="ease-in duration-200" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="fixed inset-0 bg-gray-900 bg-opacity-75 transition-opacity" @click="showModal = false"></div>
<!-- Modal panel -->
<div class="flex min-h-full items-center justify-center p-4 text-center sm:p-0">
<div x-show="showModal" x-transition:enter="ease-out duration-300" x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100" x-transition:leave="ease-in duration-200" x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100" x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" class="relative transform overflow-hidden bg-white text-left shadow-xl transition-all w-full h-full max-w-none max-h-none">
<!-- Header -->
<div class="bg-white px-4 py-5 sm:px-6 border-b border-gray-200">
<div class="flex items-center justify-between">
<div class="flex items-center">
<div class="flex-shrink-0">
<svg class="h-8 w-8 text-purple-600" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9s-2.015-9-4.5-9m0 18c-2.485 0-4.5-4.03-4.5-9s2.015-9 4.5-9m0 0a8.997 8.997 0 017.843 4.582M12 3a8.997 8.997 0 00-7.843 4.582m15.686 2.84A9.004 9.004 0 0121 12c0 2.485-.464 4.82-1.284 6.916M6.728 6.422A8.997 8.997 0 004.5 12c0 2.485.464 4.82 1.284 6.916" />
</svg>
</div>
<div class="ml-4">
<h3 class="text-lg font-medium leading-6 text-gray-900" id="modal-title">Welcome to Templateight</h3>
<p class="text-sm text-gray-500">Explore our premium components and templates</p>
</div>
</div>
<div class="flex items-center">
<button type="button" class="bg-white rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500" @click="showModal = false">
<span class="sr-only">Close</span>
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
</div>
<!-- Content -->
<div class="flex-1 overflow-y-auto">
<div class="px-4 py-6 sm:px-6">
<div class="max-w-4xl mx-auto">
<div class="text-center mb-8">
<h2 class="text-3xl font-bold text-gray-900 mb-4">Discover Amazing Components</h2>
<p class="text-lg text-gray-600">Our collection of beautifully designed, responsive components built with TailwindCSS and AlpineJS.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
<div class="bg-gradient-to-br from-purple-50 to-purple-100 p-6 rounded-lg border border-purple-200">
<div class="w-12 h-12 bg-purple-600 rounded-lg flex items-center justify-center mb-4">
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
</svg>
</div>
<h3 class="text-lg font-semibold text-gray-900 mb-2">50+ Components</h3>
<p class="text-gray-600">Ready-to-use UI components for modern web development.</p>
</div>
<div class="bg-gradient-to-br from-blue-50 to-blue-100 p-6 rounded-lg border border-blue-200">
<div class="w-12 h-12 bg-blue-600 rounded-lg flex items-center justify-center mb-4">
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
</svg>
</div>
<h3 class="text-lg font-semibold text-gray-900 mb-2">Fully Responsive</h3>
<p class="text-gray-600">Optimized for all screen sizes and devices.</p>
</div>
<div class="bg-gradient-to-br from-green-50 to-green-100 p-6 rounded-lg border border-green-200">
<div class="w-12 h-12 bg-green-600 rounded-lg flex items-center justify-center mb-4">
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
</svg>
</div>
<h3 class="text-lg font-semibold text-gray-900 mb-2">Lightning Fast</h3>
<p class="text-gray-600">Built with performance in mind for optimal user experience.</p>
</div>
</div>
<div class="text-center">
<button class="bg-purple-600 text-white px-8 py-3 rounded-lg font-semibold hover:bg-purple-500 transition-colors">
Get Started
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div><template>
<!-- Trigger Button -->
<button @click="showModal = true" class="bg-purple-600 text-white px-6 py-3 rounded-lg font-semibold hover:bg-purple-500 transition-colors">
Open Full Page Modal
</button>
<!-- Modal -->
<div v-show="showModal" class="fixed inset-0 z-50 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
<!-- Backdrop -->
<div v-show="showModal" class="fixed inset-0 bg-gray-900 bg-opacity-75 transition-opacity" @click="showModal = false"></div>
<!-- Modal panel -->
<div class="flex min-h-full items-center justify-center p-4 text-center sm:p-0">
<div v-show="showModal" class="relative transform overflow-hidden bg-white text-left shadow-xl transition-all w-full h-full max-w-none max-h-none">
<!-- Header -->
<div class="bg-white px-4 py-5 sm:px-6 border-b border-gray-200">
<div class="flex items-center justify-between">
<div class="flex items-center">
<div class="flex-shrink-0">
<svg class="h-8 w-8 text-purple-600" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9s-2.015-9-4.5-9m0 18c-2.485 0-4.5-4.03-4.5-9s2.015-9 4.5-9m0 0a8.997 8.997 0 017.843 4.582M12 3a8.997 8.997 0 00-7.843 4.582m15.686 2.84A9.004 9.004 0 0121 12c0 2.485-.464 4.82-1.284 6.916M6.728 6.422A8.997 8.997 0 004.5 12c0 2.485.464 4.82 1.284 6.916" />
</svg>
</div>
<div class="ml-4">
<h3 class="text-lg font-medium leading-6 text-gray-900" id="modal-title">Welcome to Templateight</h3>
<p class="text-sm text-gray-500">Explore our premium components and templates</p>
</div>
</div>
<div class="flex items-center">
<button type="button" class="bg-white rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500" @click="showModal = false">
<span class="sr-only">Close</span>
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
</div>
<!-- Content -->
<div class="flex-1 overflow-y-auto">
<div class="px-4 py-6 sm:px-6">
<div class="max-w-4xl mx-auto">
<div class="text-center mb-8">
<h2 class="text-3xl font-bold text-gray-900 mb-4">Discover Amazing Components</h2>
<p class="text-lg text-gray-600">Our collection of beautifully designed, responsive components built with TailwindCSS and AlpineJS.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
<div class="bg-gradient-to-br from-purple-50 to-purple-100 p-6 rounded-lg border border-purple-200">
<div class="w-12 h-12 bg-purple-600 rounded-lg flex items-center justify-center mb-4">
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
</svg>
</div>
<h3 class="text-lg font-semibold text-gray-900 mb-2">50+ Components</h3>
<p class="text-gray-600">Ready-to-use UI components for modern web development.</p>
</div>
<div class="bg-gradient-to-br from-blue-50 to-blue-100 p-6 rounded-lg border border-blue-200">
<div class="w-12 h-12 bg-blue-600 rounded-lg flex items-center justify-center mb-4">
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
</svg>
</div>
<h3 class="text-lg font-semibold text-gray-900 mb-2">Fully Responsive</h3>
<p class="text-gray-600">Optimized for all screen sizes and devices.</p>
</div>
<div class="bg-gradient-to-br from-green-50 to-green-100 p-6 rounded-lg border border-green-200">
<div class="w-12 h-12 bg-green-600 rounded-lg flex items-center justify-center mb-4">
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
</svg>
</div>
<h3 class="text-lg font-semibold text-gray-900 mb-2">Lightning Fast</h3>
<p class="text-gray-600">Built with performance in mind for optimal user experience.</p>
</div>
</div>
<div class="text-center">
<button class="bg-purple-600 text-white px-8 py-3 rounded-lg font-semibold hover:bg-purple-500 transition-colors">
Get Started
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref } from 'vue';
const showModal = ref(false);
</script>import React, { useState } from 'react';
export default function FullPageModal() {
const [showModal, setShowModal] = useState(false);
return (
<>
<!-- Trigger Button -->
<button onClick={() => setShowModal(true)} className="bg-purple-600 text-white px-6 py-3 rounded-lg font-semibold hover:bg-purple-500 transition-colors">
Open Full Page Modal
</button>
<!-- Modal -->
{showModal && (
<div className="fixed inset-0 z-50 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
<!-- Backdrop -->
<div className="fixed inset-0 bg-gray-900 bg-opacity-75 transition-opacity" onClick={() => setShowModal(false)}></div>
<!-- Modal panel -->
<div className="flex min-h-full items-center justify-center p-4 text-center sm:p-0">
<div className="relative transform overflow-hidden bg-white text-left shadow-xl transition-all w-full h-full max-w-none max-h-none">
<!-- Header -->
<div className="bg-white px-4 py-5 sm:px-6 border-b border-gray-200">
<div className="flex items-center justify-between">
<div className="flex items-center">
<div className="flex-shrink-0">
<svg className="h-8 w-8 text-purple-600" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" d="M12 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9s-2.015-9-4.5-9m0 18c-2.485 0-4.5-4.03-4.5-9s2.015-9 4.5-9m0 0a8.997 8.997 0 017.843 4.582M12 3a8.997 8.997 0 00-7.843 4.582m15.686 2.84A9.004 9.004 0 0121 12c0 2.485-.464 4.82-1.284 6.916M6.728 6.422A8.997 8.997 0 004.5 12c0 2.485.464 4.82 1.284 6.916" />
</svg>
</div>
<div className="ml-4">
<h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-title">Welcome to Templateight</h3>
<p className="text-sm text-gray-500">Explore our premium components and templates</p>
</div>
</div>
<div className="flex items-center">
<button type="button" className="bg-white rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500" onClick={() => setShowModal(false)}>
<span className="sr-only">Close</span>
<svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" aria-hidden="true">
<path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
</div>
<!-- Content -->
<div className="flex-1 overflow-y-auto">
<div className="px-4 py-6 sm:px-6">
<div className="max-w-4xl mx-auto">
<div className="text-center mb-8">
<h2 className="text-3xl font-bold text-gray-900 mb-4">Discover Amazing Components</h2>
<p className="text-lg text-gray-600">Our collection of beautifully designed, responsive components built with TailwindCSS and AlpineJS.</p>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
<div className="bg-gradient-to-br from-purple-50 to-purple-100 p-6 rounded-lg border border-purple-200">
<div className="w-12 h-12 bg-purple-600 rounded-lg flex items-center justify-center mb-4">
<svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
</svg>
</div>
<h3 className="text-lg font-semibold text-gray-900 mb-2">50+ Components</h3>
<p className="text-gray-600">Ready-to-use UI components for modern web development.</p>
</div>
<div className="bg-gradient-to-br from-blue-50 to-blue-100 p-6 rounded-lg border border-blue-200">
<div className="w-12 h-12 bg-blue-600 rounded-lg flex items-center justify-center mb-4">
<svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
</svg>
</div>
<h3 className="text-lg font-semibold text-gray-900 mb-2">Fully Responsive</h3>
<p className="text-gray-600">Optimized for all screen sizes and devices.</p>
</div>
<div className="bg-gradient-to-br from-green-50 to-green-100 p-6 rounded-lg border border-green-200">
<div class="w-12 h-12 bg-green-600 rounded-lg flex items-center justify-center mb-4">
<svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
</svg>
</div>
<h3 className="text-lg font-semibold text-gray-900 mb-2">Lightning Fast</h3>
<p className="text-gray-600">Built with performance in mind for optimal user experience.</p>
</div>
</div>
<div className="text-center">
<button className="bg-purple-600 text-white px-8 py-3 rounded-lg font-semibold hover:bg-purple-500 transition-colors">
Get Started
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
)}
</>
);
}3. Form Modal
A modal containing a form for creating or editing data, with proper form validation and submission.
Create New User
<!-- Trigger Button -->
<button @click="showModal = true" class="bg-purple-600 text-white px-6 py-3 rounded-lg font-semibold hover:bg-purple-500 transition-colors">
Create New User
</button>
<!-- Modal -->
<div x-show="showModal" class="fixed inset-0 z-50 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
<!-- Backdrop -->
<div x-show="showModal" x-transition:enter="ease-out duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="ease-in duration-200" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" @click="showModal = false"></div>
<!-- Modal panel -->
<div class="flex min-h-full items-center justify-center p-4 text-center sm:items-center sm:p-0">
<div x-show="showModal" x-transition:enter="ease-out duration-300" x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100" x-transition:leave="ease-in duration-200" x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100" x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" class="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg">
<div class="bg-white px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
<div class="sm:flex sm:items-start">
<div class="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-green-100 sm:mx-0 sm:h-10 sm:w-10">
<svg class="h-6 w-6 text-green-600" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
</svg>
</div>
<div class="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left w-full">
<h3 class="text-base font-semibold leading-6 text-gray-900" id="modal-title">Create New User</h3>
<div class="mt-2">
<form class="space-y-4">
<div>
<label for="name" class="block text-sm font-medium text-gray-700">Full Name</label>
<input type="text" id="name" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-purple-500 focus:ring-purple-500 sm:text-sm" placeholder="John Doe">
</div>
<div>
<label for="email" class="block text-sm font-medium text-gray-700">Email Address</label>
<input type="email" id="email" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-purple-500 focus:ring-purple-500 sm:text-sm" placeholder="john@example.com">
</div>
<div>
<label for="role" class="block text-sm font-medium text-gray-700">Role</label>
<select id="role" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-purple-500 focus:ring-purple-500 sm:text-sm">
<option value="">Select a role</option>
<option value="admin">Admin</option>
<option value="user">User</option>
<option value="moderator">Moderator</option>
</select>
</div>
<div>
<label for="bio" class="block text-sm font-medium text-gray-700">Bio</label>
<textarea id="bio" rows="3" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-purple-500 focus:ring-purple-500 sm:text-sm" placeholder="Tell us about yourself..."></textarea>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="bg-gray-50 px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6">
<button type="button" class="inline-flex w-full justify-center rounded-md bg-purple-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-purple-500 sm:ml-3 sm:w-auto" @click="showModal = false">Create User</button>
<button type="button" class="mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:mt-0 sm:w-auto" @click="showModal = false">Cancel</button>
</div>
</div>
</div>
</div><template>
<!-- Trigger Button -->
<button @click="showModal = true" class="bg-purple-600 text-white px-6 py-3 rounded-lg font-semibold hover:bg-purple-500 transition-colors">
Create New User
</button>
<!-- Modal -->
<div v-show="showModal" class="fixed inset-0 z-50 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
<!-- Backdrop -->
<div v-show="showModal" class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" @click="showModal = false"></div>
<!-- Modal panel -->
<div class="flex min-h-full items-center justify-center p-4 text-center sm:items-center sm:p-0">
<div v-show="showModal" class="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg">
<div class="bg-white px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
<div class="sm:flex sm:items-start">
<div class="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-green-100 sm:mx-0 sm:h-10 sm:w-10">
<svg class="h-6 w-6 text-green-600" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
</svg>
</div>
<div class="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left w-full">
<h3 class="text-base font-semibold leading-6 text-gray-900" id="modal-title">Create New User</h3>
<div class="mt-2">
<form class="space-y-4">
<div>
<label for="name" class="block text-sm font-medium text-gray-700">Full Name</label>
<input v-model="name" type="text" id="name" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-purple-500 focus:ring-purple-500 sm:text-sm" placeholder="John Doe">
</div>
<div>
<label for="email" class="block text-sm font-medium text-gray-700">Email Address</label>
<input v-model="email" type="email" id="email" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-purple-500 focus:ring-purple-500 sm:text-sm" placeholder="john@example.com">
</div>
<div>
<label for="role" class="block text-sm font-medium text-gray-700">Role</label>
<select v-model="role" id="role" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-purple-500 focus:ring-purple-500 sm:text-sm">
<option value="">Select a role</option>
<option value="admin">Admin</option>
<option value="user">User</option>
<option value="moderator">Moderator</option>
</select>
</div>
<div>
<label for="bio" class="block text-sm font-medium text-gray-700">Bio</label>
<textarea v-model="bio" id="bio" rows="3" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-purple-500 focus:ring-purple-500 sm:text-sm" placeholder="Tell us about yourself..."></textarea>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="bg-gray-50 px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6">
<button type="button" class="inline-flex w-full justify-center rounded-md bg-purple-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-purple-500 sm:ml-3 sm:w-auto" @click="showModal = false">Create User</button>
<button type="button" class="mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:mt-0 sm:w-auto" @click="showModal = false">Cancel</button>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref } from 'vue';
const showModal = ref(false);
const name = ref('');
const email = ref('');
const role = ref('');
const bio = ref('');
</script>import React, { useState } from 'react';
export default function FormModal() {
const [showModal, setShowModal] = useState(false);
const [formData, setFormData] = useState({
name: '',
email: '',
role: '',
bio: ''
});
const handleInputChange = (e) => {
const { name, value } = e.target;
setFormData(prev => ({
...prev,
[name]: value
}));
};
return (
<>
<!-- Trigger Button -->
<button onClick={() => setShowModal(true)} className="bg-purple-600 text-white px-6 py-3 rounded-lg font-semibold hover:bg-purple-500 transition-colors">
Create New User
</button>
<!-- Modal -->
{showModal && (
<div className="fixed inset-0 z-50 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
<!-- Backdrop -->
<div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" onClick={() => setShowModal(false)}></div>
<!-- Modal panel -->
<div className="flex min-h-full items-center justify-center p-4 text-center sm:items-center sm:p-0">
<div className="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg">
<div className="bg-white px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
<div className="sm:flex sm:items-start">
<div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-green-100 sm:mx-0 sm:h-10 sm:w-10">
<svg className="h-6 w-6 text-green-600" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" aria-hidden="true">
<path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
</svg>
</div>
<div className="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left w-full">
<h3 className="text-base font-semibold leading-6 text-gray-900" id="modal-title">Create New User</h3>
<div className="mt-2">
<form className="space-y-4">
<div>
<label htmlFor="name" className="block text-sm font-medium text-gray-700">Full Name</label>
<input
type="text"
id="name"
name="name"
value={formData.name}
onChange={handleInputChange}
className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-purple-500 focus:ring-purple-500 sm:text-sm"
placeholder="John Doe"
/>
</div>
<div>
<label htmlFor="email" className="block text-sm font-medium text-gray-700">Email Address</label>
<input
type="email"
id="email"
name="email"
value={formData.email}
onChange={handleInputChange}
className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-purple-500 focus:ring-purple-500 sm:text-sm"
placeholder="john@example.com"
/>
</div>
<div>
<label htmlFor="role" className="block text-sm font-medium text-gray-700">Role</label>
<select
id="role"
name="role"
value={formData.role}
onChange={handleInputChange}
className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-purple-500 focus:ring-purple-500 sm:text-sm"
>
<option value="">Select a role</option>
<option value="admin">Admin</option>
<option value="user">User</option>
<option value="moderator">Moderator</option>
</select>
</div>
<div>
<label htmlFor="bio" className="block text-sm font-medium text-gray-700">Bio</label>
<textarea
id="bio"
name="bio"
rows="3"
value={formData.bio}
onChange={handleInputChange}
className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-purple-500 focus:ring-purple-500 sm:text-sm"
placeholder="Tell us about yourself..."
/></textarea>
</div>
</form>
</div>
</div>
</div>
</div>
<div className="bg-gray-50 px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6">
<button type="button" className="inline-flex w-full justify-center rounded-md bg-purple-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-purple-500 sm:ml-3 sm:w-auto" onClick={() => setShowModal(false)}>Create User</button>
<button type="button" className="mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:mt-0 sm:w-auto" onClick={() => setShowModal(false)}>Cancel</button>
</div>
</div>
</div>
</div>
)}
</>
);
}4. Slide-out Modal
A modal that slides in from the side, perfect for navigation menus, settings panels, or additional content without covering the full screen.
Settings Panel
Profile Settings
Preferences
<!-- Trigger Button -->
<button @click="showModal = true" class="bg-purple-600 text-white px-6 py-3 rounded-lg font-semibold hover:bg-purple-500 transition-colors">
Open Slide-out Modal
</button>
<!-- Modal -->
<div x-show="showModal" class="fixed inset-0 z-50 overflow-hidden" aria-labelledby="slideout-title" role="dialog" aria-modal="true">
<!-- Backdrop -->
<div x-show="showModal" x-transition:enter="ease-in-out duration-500" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="ease-in-out duration-500" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="absolute inset-0 bg-gray-600 bg-opacity-75 transition-opacity" @click="showModal = false"></div>
<!-- Panel -->
<div class="absolute inset-y-0 right-0 max-w-full flex">
<div x-show="showModal" x-transition:enter="transform transition ease-in-out duration-500 sm:duration-700" x-transition:enter-start="translate-x-full" x-transition:enter-end="translate-x-0" x-transition:leave="transform transition ease-in-out duration-500 sm:duration-700" x-transition:leave-start="translate-x-0" x-transition:leave-end="translate-x-full" class="w-screen max-w-md">
<div class="h-full flex flex-col bg-white shadow-xl overflow-y-scroll">
<!-- Header -->
<div class="px-4 py-6 bg-purple-600 sm:px-6">
<div class="flex items-center justify-between">
<h2 class="text-lg font-medium text-white" id="slideout-title">Settings Panel</h2>
<div class="ml-3 h-7 flex items-center">
<button type="button" class="bg-purple-600 rounded-md text-white hover:text-gray-200 focus:outline-none focus:ring-2 focus:ring-white" @click="showModal = false">
<span class="sr-only">Close panel</span>
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
</div>
<!-- Content -->
<div class="relative flex-1 py-6 px-4 sm:px-6">
<div class="space-y-6">
<!-- Profile Section -->
<div>
<h3 class="text-lg font-medium text-gray-900 mb-4">Profile Settings</h3>
<div class="space-y-4">
<div>
<label for="slideout-name" class="block text-sm font-medium text-gray-700">Full Name</label>
<input type="text" id="slideout-name" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-purple-500 focus:ring-purple-500 sm:text-sm" placeholder="John Doe">
</div>
<div>
<label for="slideout-email" class="block text-sm font-medium text-gray-700">Email</label>
<input type="email" id="slideout-email" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-purple-500 focus:ring-purple-500 sm:text-sm" placeholder="john@example.com">
</div>
</div>
</div>
<!-- Preferences -->
<div>
<h3 class="text-lg font-medium text-gray-900 mb-4">Preferences</h3>
<div class="space-y-4">
<div class="flex items-center">
<input id="slideout-notifications" type="checkbox" class="h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-300 rounded">
<label for="slideout-notifications" class="ml-2 block text-sm text-gray-900">Email notifications</label>
</div>
<div class="flex items-center">
<input id="slideout-marketing" type="checkbox" class="h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-300 rounded">
<label for="slideout-marketing" class="ml-2 block text-sm text-gray-900">Marketing emails</label>
</div>
</div>
</div>
<!-- Actions -->
<div class="pt-4">
<button type="button" class="w-full bg-purple-600 border border-transparent rounded-md py-2 px-4 text-sm font-medium text-white shadow-sm hover:bg-purple-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500">
Save Changes
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div><template>
<!-- Trigger Button -->
<button @click="showModal = true" class="bg-purple-600 text-white px-6 py-3 rounded-lg font-semibold hover:bg-purple-500 transition-colors">
Open Slide-out Modal
</button>
<!-- Modal -->
<div v-show="showModal" class="fixed inset-0 z-50 overflow-hidden" aria-labelledby="slideout-title" role="dialog" aria-modal="true">
<!-- Backdrop -->
<div v-show="showModal" class="absolute inset-0 bg-gray-600 bg-opacity-75 transition-opacity" @click="showModal = false"></div>
<!-- Panel -->
<div class="absolute inset-y-0 right-0 max-w-full flex">
<div v-show="showModal" class="w-screen max-w-md">
<div class="h-full flex flex-col bg-white shadow-xl overflow-y-scroll">
<!-- Header -->
<div class="px-4 py-6 bg-purple-600 sm:px-6">
<div class="flex items-center justify-between">
<h2 class="text-lg font-medium text-white" id="slideout-title">Settings Panel</h2>
<div class="ml-3 h-7 flex items-center">
<button type="button" class="bg-purple-600 rounded-md text-white hover:text-gray-200 focus:outline-none focus:ring-2 focus:ring-white" @click="showModal = false">
<span class="sr-only">Close panel</span>
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
</div>
<!-- Content -->
<div class="relative flex-1 py-6 px-4 sm:px-6">
<div class="space-y-6">
<!-- Profile Section -->
<div>
<h3 class="text-lg font-medium text-gray-900 mb-4">Profile Settings</h3>
<div class="space-y-4">
<div>
<label for="slideout-name" class="block text-sm font-medium text-gray-700">Full Name</label>
<input v-model="name" type="text" id="slideout-name" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-purple-500 focus:ring-purple-500 sm:text-sm" placeholder="John Doe">
</div>
<div>
<label for="slideout-email" class="block text-sm font-medium text-gray-700">Email</label>
<input v-model="email" type="email" id="slideout-email" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-purple-500 focus:ring-purple-500 sm:text-sm" placeholder="john@example.com">
</div>
</div>
</div>
<!-- Preferences -->
<div>
<h3 class="text-lg font-medium text-gray-900 mb-4">Preferences</h3>
<div class="space-y-4">
<div class="flex items-center">
<input v-model="notifications" id="slideout-notifications" type="checkbox" class="h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-300 rounded">
<label for="slideout-notifications" class="ml-2 block text-sm text-gray-900">Email notifications</label>
</div>
<div class="flex items-center">
<input v-model="marketing" id="slideout-marketing" type="checkbox" class="h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-300 rounded">
<label for="slideout-marketing" class="ml-2 block text-sm text-gray-900">Marketing emails</label>
</div>
</div>
</div>
<!-- Actions -->
<div class="pt-4">
<button type="button" class="w-full bg-purple-600 border border-transparent rounded-md py-2 px-4 text-sm font-medium text-white shadow-sm hover:bg-purple-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500">
Save Changes
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref } from 'vue';
const showModal = ref(false);
const name = ref('');
const email = ref('');
const notifications = ref(false);
const marketing = ref(false);
</script>import React, { useState } from 'react';
export default function SlideOutModal() {
const [showModal, setShowModal] = useState(false);
const [formData, setFormData] = useState({
name: '',
email: '',
notifications: false,
marketing: false
});
const handleInputChange = (e) => {
const { name, value, type, checked } = e.target;
setFormData(prev => ({
...prev,
[name]: type === 'checkbox' ? checked : value
}));
};
return (
<>
<!-- Trigger Button -->
<button onClick={() => setShowModal(true)} className="bg-purple-600 text-white px-6 py-3 rounded-lg font-semibold hover:bg-purple-500 transition-colors">
Open Slide-out Modal
</button>
<!-- Modal -->
{showModal && (
<div className="fixed inset-0 z-50 overflow-hidden" aria-labelledby="slideout-title" role="dialog" aria-modal="true">
<!-- Backdrop -->
<div className="absolute inset-0 bg-gray-600 bg-opacity-75 transition-opacity" onClick={() => setShowModal(false)}></div>
<!-- Panel -->
<div className="absolute inset-y-0 right-0 max-w-full flex">
<div className="w-screen max-w-md">
<div className="h-full flex flex-col bg-white shadow-xl overflow-y-scroll">
<!-- Header -->
<div className="px-4 py-6 bg-purple-600 sm:px-6">
<div className="flex items-center justify-between">
<h2 className="text-lg font-medium text-white" id="slideout-title">Settings Panel</h2>
<div className="ml-3 h-7 flex items-center">
<button type="button" className="bg-purple-600 rounded-md text-white hover:text-gray-200 focus:outline-none focus:ring-2 focus:ring-white" onClick={() => setShowModal(false)}>
<span className="sr-only">Close panel</span>
<svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" aria-hidden="true">
<path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
</div>
<!-- Content -->
<div className="relative flex-1 py-6 px-4 sm:px-6">
<div className="space-y-6">
<!-- Profile Section -->
<div>
<h3 className="text-lg font-medium text-gray-900 mb-4">Profile Settings</h3>
<div className="space-y-4">
<div>
<label htmlFor="slideout-name" className="block text-sm font-medium text-gray-700">Full Name</label>
<input
type="text"
id="slideout-name"
name="name"
value={formData.name}
onChange={handleInputChange}
className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-purple-500 focus:ring-purple-500 sm:text-sm"
placeholder="John Doe"
/>
</div>
<div>
<label htmlFor="slideout-email" className="block text-sm font-medium text-gray-700">Email</label>
<input
type="email"
id="slideout-email"
name="email"
value={formData.email}
onChange={handleInputChange}
className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-purple-500 focus:ring-purple-500 sm:text-sm"
placeholder="john@example.com"
/>
</div>
</div>
</div>
<!-- Preferences -->
<div>
<h3 className="text-lg font-medium text-gray-900 mb-4">Preferences</h3>
<div className="space-y-4">
<div className="flex items-center">
<input
id="slideout-notifications"
name="notifications"
type="checkbox"
checked={formData.notifications}
onChange={handleInputChange}
className="h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-300 rounded"
/>
<label htmlFor="slideout-notifications" className="ml-2 block text-sm text-gray-900">Email notifications</label>
</div>
<div className="flex items-center">
<input
id="slideout-marketing"
name="marketing"
type="checkbox"
checked={formData.marketing}
onChange={handleInputChange}
className="h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-300 rounded"
/>
<label htmlFor="slideout-marketing" className="ml-2 block text-sm text-gray-900">Marketing emails</label>
</div>
</div>
</div>
<!-- Actions -->
<div className="pt-4">
<button type="button" className="w-full bg-purple-600 border border-transparent rounded-md py-2 px-4 text-sm font-medium text-white shadow-sm hover:bg-purple-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500">
Save Changes
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
)}
</>
);
}