<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>UI/UX Elements Showcase</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <script src="https://unpkg.com/framer-motion/dist/framer-motion.umd.js"></script>
</head>
<body class="bg-gray-900 text-white p-6">
    <div class="max-w-4xl mx-auto">
        <h1 class="text-2xl font-bold mb-4">UI/UX Elements Showcase</h1>
        <p class="mb-4">Explore various UI/UX elements that enhance user interaction and engagement. Each element is designed to provide a seamless and intuitive experience.</p>
        
        <!-- Top Navigation Bar -->
        <div class="mb-6">
            <h2 class="text-xl font-semibold mb-2">Top Navigation Bar</h2>
            <div class="bg-gray-800 shadow-md rounded-lg p-4 flex justify-between items-center">
                <div class="text-lg font-semibold">App Name</div>
                <div class="flex space-x-4">
                    <button class="text-gray-300 hover:text-gray-100">Home</button>
                    <button class="text-gray-300 hover:text-gray-100">Profile</button>
                    <button class="text-gray-300 hover:text-gray-100">Settings</button>
                </div>
            </div>
        </div>

        <!-- Splash Screen -->
        <div class="mb-6">
            <h2 class="text-xl font-semibold mb-2">Splash Screen</h2>
            <div class="bg-blue-500 text-white p-4 rounded-lg">
                <h3 class="text-lg font-semibold mb-2">Welcome to Our App</h3>
                <p class="text-gray-200">Experience the best features and seamless interaction.</p>
            </div>
        </div>

        <!-- Walkthrough/Intro Slides -->
        <div class="mb-6">
            <h2 class="text-xl font-semibold mb-2">Walkthrough/Intro Slides</h2>
            <div class="bg-gray-800 shadow-md rounded-lg p-4">
                <h3 class="text-lg font-semibold mb-2">Get Started</h3>
                <p class="text-gray-300">Learn how to use our app with these simple steps.</p>
            </div>
        </div>

        <!-- Login/Sign-up Forms -->
        <div class="mb-6">
            <h2 class="text-xl font-semibold mb-2">Login/Sign-up Forms</h2>
            <form>
                <div class="mb-4">
                    <label class="block text-gray-300">Email</label>
                    <input type="email" class="w-full px-4 py-2 border rounded bg-gray-700 text-white" placeholder="Enter your email">
                </div>
                <div class="mb-4">
                    <label class="block text-gray-300">Password</label>
                    <input type="password" class="w-full px-4 py-2 border rounded bg-gray-700 text-white" placeholder="Enter your password">
                </div>
                <button type="submit" class="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-700">Login</button>
            </form>
        </div>

        <!-- Progress Indicators -->
        <div class="mb-6">
            <h2 class="text-xl font-semibold mb-2">Progress Indicators</h2>
            <div class="w-full bg-gray-700 rounded-full h-2.5 mb-4">
                <div class="bg-blue-500 h-2.5 rounded-full" style="width: 70%"></div>
            </div>
        </div>

        <!-- Bottom Navigation Bar -->
        <div class="mb-6">
            <h2 class="text-xl font-semibold mb-2">Bottom Navigation Bar</h2>
            <div class="bg-gray-800 shadow-md rounded-lg p-4 flex justify-around items-center">
                <button class="text-gray-300 hover:text-gray-100">Home</button>
                <button class="text-gray-300 hover:text-gray-100">Search</button>
                <button class="text-gray-300 hover:text-gray-100">Notifications</button>
                <button class="text-gray-300 hover:text-gray-100">Profile</button>
            </div>
        </div>

        <!-- Side/Sliding Drawer -->
        <div class="mb-6">
            <h2 class="text-xl font-semibold mb-2">Side/Sliding Drawer</h2>
            <div class="bg-gray-800 shadow-md rounded-lg p-4">
                <button class="text-gray-300 hover:text-gray-100">Menu Item 1</button>
                <button class="text-gray-300 hover:text-gray-100">Menu Item 2</button>
                <button class="text-gray-300 hover:text-gray-100">Menu Item 3</button>
            </div>
        </div>

        <!-- Tabs -->
        <div class="mb-6">
            <h2 class="text-xl font-semibold mb-2">Tabs</h2>
            <div class="bg-gray-800 shadow-md rounded-lg">
                <div class="flex border-b border-gray-700">
                    <button class="tab-button px-4 py-2 text-sm font-medium text-gray-300 hover:text-gray-100 focus:outline-none focus:text-blue-500" data-tab="tab1">Tab 1</button>
                    <button class="tab-button px-4 py-2 text-sm font-medium text-gray-300 hover:text-gray-100 focus:outline-none focus:text-blue-500" data-tab="tab2">Tab 2</button>
                    <button class="tab-button px-4 py-2 text-sm font-medium text-gray-300 hover:text-gray-100 focus:outline-none focus:text-blue-500" data-tab="tab3">Tab 3</button>
                </div>
                <div class="p-4">
                    <div class="tab-content" id="tab1">
                        <h3 class="text-lg font-semibold mb-2">Tab Content 1</h3>
                        <p class="text-gray-300">This is the content for Tab 1. It provides detailed information about the selected tab.</p>
                    </div>
                    <div class="tab-content hidden" id="tab2">
                        <h3 class="text-lg font-semibold mb-2">Tab Content 2</h3>
                        <p class="text-gray-300">This is the content for Tab 2. It provides detailed information about the selected tab.</p>
                    </div>
                    <div class="tab-content hidden" id="tab3">
                        <h3 class="text-lg font-semibold mb-2">Tab Content 3</h3>
                        <p class="text-gray-300">This is the content for Tab 3. It provides detailed information about the selected tab.</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Floating Action Button (FAB) -->
        <div class="mb-6">
            <h2 class="text-xl font-semibold mb-2">Floating Action Button (FAB)</h2>
            <button class="bg-blue-500 text-white p-4 rounded-full shadow-lg hover:bg-blue-700 fixed bottom-6 right-6">+</button>
        </div>

        <!-- Cards -->
        <div class="mb-6">
            <h2 class="text-xl font-semibold mb-2">Cards</h2>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div class="bg-gray-800 shadow-md rounded-lg p-4">
                    <h3 class="text-lg font-semibold mb-2">Card Title 1</h3>
                    <p class="text-gray-300">This is a description of the card. It provides additional information about the content.</p>
                </div>
                <div class="bg-gray-800 shadow-md rounded-lg p-4">
                    <h3 class="text-lg font-semibold mb-2">Card Title 2</h3>
                    <p class="text-gray-300">This is a description of the card. It provides additional information about the content.</p>
                </div>
                <div class="bg-gray-800 shadow-md rounded-lg p-4">
                    <h3 class="text-lg font-semibold mb-2">Card Title 3</h3>
                    <p class="text-gray-300">This is a description of the card. It provides additional information about the content.</p>
                </div>
            </div>
        </div>

        <!-- Lists -->
        <div class="mb-6">
            <h2 class="text-xl font-semibold mb-2">Lists</h2>
            <ul class="list-disc pl-5 text-gray-300">
                <li>List Item 1</li>
                <li>List Item 2</li>
                <li>List Item 3</li>
            </ul>
        </div>

        <!-- Grid Layouts -->
        <div class="mb-6">
            <h2 class="text-xl font-semibold mb-2">Grid Layouts</h2>
            <div class="grid grid-cols-2 gap-4">
                <div class="bg-gray-700 p-4 rounded-lg">Grid Item 1</div>
                <div class="bg-gray-700 p-4 rounded-lg">Grid Item 2</div>
                <div class="bg-gray-700 p-4 rounded-lg">Grid Item 3</div>
                <div class="bg-gray-700 p-4 rounded-lg">Grid Item 4</div>
            </div>
        </div>

        <!-- Accordion and Collapsible Panels -->
        <div class="mb-6">
            <h2 class="text-xl font-semibold mb-2">Accordion and Collapsible Panels</h2>
            <div class="bg-gray-800 shadow-md rounded-lg p-4">
                <button class="text-gray-300 hover:text-gray-100">Accordion Item 1</button>
                <div class="hidden">
                    <p class="text-gray-300">This is the content for Accordion Item 1.</p>
                </div>
            </div>
        </div>

        <!-- Table/Table Views -->
        <div class="mb-6">
            <h2 class="text-xl font-semibold mb-2">Table/Table Views</h2>
            <table class="min-w-full bg-gray-800 text-gray-300">
                <thead>
                    <tr>
                        <th class="py-2 px-4 border-b border-gray-700">Header 1</th>
                        <th class="py-2 px-4 border-b border-gray-700">Header 2</th>
                        <th class="py-2 px-4 border-b border-gray-700">Header 3</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="py-2 px-4 border-b border-gray-700">Data 1</td>
                        <td class="py-2 px-4 border-b border-gray-700">Data 2</td>
                        <td class="py-2 px-4 border-b border-gray-700">Data 3</td>
                    </tr>
                </tbody>
            </table>
        </div>

        <!-- Media Components -->
        <div class="mb-6">
            <h2 class="text-xl font-semibold mb-2">Media Components</h2>
            <div class="bg-gray-800 shadow-md rounded-lg p-4">
                <video controls class="w-full">
                    <source src="movie.mp4" type="video/mp4">
                    Your browser does not support the video tag.
                </video>
            </div>
        </div>

        <!-- Carousel/Sliders -->
        <div class="mb-6">
            <h2 class="text-xl font-semibold mb-2">Carousel/Sliders</h2>
            <div class="bg-gray-800 shadow-md rounded-lg p-4">
                <div class="flex overflow-x-scroll">
                    <div class="w-64 h-64 bg-gray-700 rounded-lg mr-4">Slide 1</div>
                    <div class="w-64 h-64 bg-gray-700 rounded-lg mr-4">Slide 2</div>
                    <div class="w-64 h-64 bg-gray-700 rounded-lg mr-4">Slide 3</div>
                </div>
            </div>
        </div>

        <!-- Buttons -->
        <div class="mb-6">
            <h2 class="text-xl font-semibold mb-2">Buttons</h2>
            <button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-700">Primary Button</button>
            <button class="bg-gray-500 text-white px-4 py-2 rounded hover:bg-gray-700">Secondary Button</button>
            <button class="bg-red-500 text-white px-4 py-2 rounded hover:bg-red-700">Danger Button</button>
        </div>

        <!-- Icons -->
        <div class="mb-6">
            <h2 class="text-xl font-semibold mb-2">Icons</h2>
            <div class="flex space-x-4">
                <i class="fas fa-home text-gray-300 hover:text-gray-100"></i>
                <i class="fas fa-user text-gray-300 hover:text-gray-100"></i>
                <i class="fas fa-cog text-gray-300 hover:text-gray-100"></i>
            </div>
        </div>

        <!-- Checkboxes and Radio Buttons -->
        <div class="mb-6">
            <h2 class="text-xl font-semibold mb-2">Checkboxes and Radio Buttons</h2>
            <div class="flex items-center mb-4">
                <input type="checkbox" class="mr-2 bg-gray-700 text-white">
                <label class="text-gray-300">Checkbox</label>
            </div>
            <div class="flex items-center">
                <input type="radio" name="radio" class="mr-2 bg-gray-700 text-white">
                <label class="text-gray-300">Radio Button</label>
            </div>
        </div>

        <!-- Dropdown Menus -->
        <div class="mb-6">
            <h2 class="text-xl font-semibold mb-2">Dropdown Menus</h2>
            <select class="w-full px-4 py-2 border rounded bg-gray-700 text-white">
                <option>Option 1</option>
                <option>Option 2</option>
                <option>Option 3</option>
            </select>
        </div>

        <!-- Toggle/Switch -->
        <div class="mb-6">
            <h2 class="text-xl font-semibold mb-2">Toggle/Switch</h2>
            <label class="flex items-center cursor-pointer">
                <div class="relative">
                    <input type="checkbox" class="sr-only">
                    <div class="block bg-gray-600 w-14 h-8 rounded-full"></div>
                    <div class="dot absolute left-1 top-1 bg-white w-6 h-6 rounded-full transition"></div>
                </div>
                <div class="ml-3 text-gray-300">Toggle Switch</div>
            </label>
        </div>

        <!-- Slider/Range -->
        <div class="mb-6">
            <h2 class="text-xl font-semibold mb-2">Slider/Range</h2>
            <input type="range" class="w-full bg-gray-700 text-white">
        </div>

        <!-- Rating System -->
        <div class="mb-6">
            <h2 class="text-xl font-semibold mb-2">Rating System</h2>
            <div class="flex space-x-2">
                <i class="fas fa-star text-yellow-500"></i>
                <i class="fas fa-star text-yellow-500"></i>
                <i class="fas fa-star text-yellow-500"></i>
                <i class="fas fa-star text-yellow-500"></i>
                <i class="fas fa-star text-gray-600"></i>
            </div>
        </div>

        <!-- Drag and Drop -->
        <div class="mb-6">
            <h2 class="text-xl font-semibold mb-2">Drag and Drop</h2>
            <div class="bg-gray-800 shadow-md rounded-lg p-4">
                <div class="draggable bg-gray-700 p-4 rounded-lg mb-4">Drag Item 1</div>
                <div class="draggable bg-gray-700 p-4 rounded-lg mb-4">Drag Item 2</div>
                <div class="draggable bg-gray-700 p-4 rounded-lg">Drag Item 3</div>
            </div>
        </div>

        <!-- Input Fields -->
        <div class="mb-6">
            <h2 class="text-xl font-semibold mb-2">Input Fields</h2>
            <input type="text" class="w-full px-4 py-2 border rounded bg-gray-700 text-white" placeholder="Enter text">
        </div>

        <!-- Date and Time Pickers -->
        <div class="mb-6">
            <h2 class="text-xl font-semibold mb-2">Date and Time Pickers</h2>
            <input type="date" class="w-full px-4 py-2 border rounded bg-gray-700 text-white">
        </div>

        <!-- Search Bars -->
        <div class="mb-6">
            <h2 class="text-xl font-semibold mb-2">Search Bars</h2>
            <input type="search" class="w-full px-4 py-2 border rounded bg-gray-700 text-white" placeholder="Search...">
        </div>

        <!-- File Uploads -->
        <div class="mb-6">
            <h2 class="text-xl font-semibold mb-2">File Uploads</h2>
            <input type="file" class="w-full px-4 py-2 border rounded bg-gray-700 text-white">
        </div>

        <!-- Steppers -->
        <div class="mb-6">
            <h2 class="text-xl font-semibold mb-2">Steppers</h2>
            <div class="flex items-center">
                <div class="bg-blue-500 text-white px-4 py-2 rounded-full">1</div>
                <div class="flex-1 h-1 bg-gray-600 mx-2"></div>
                <div class="bg-gray-600 text-gray-300 px-4 py-2 rounded-full">2</div>
                <div class="flex-1 h-1 bg-gray-600 mx-2"></div>
                <div class="bg-gray-600 text-gray-300 px-4 py-2 rounded-full">3</div>
            </div>
        </div>

        <!-- Validation Indicators -->
        <div class="mb-6">
            <h2 class="text-xl font-semibold mb-2">Validation Indicators</h2>
            <input type="password" class="w-full px-4 py-2 border rounded bg-gray-700 text-white" placeholder="Enter password">
            <p class="text-green-500 mt-2">Strong password</p>
        </div>

        <!-- Toast Notifications -->
        <div class="mb-6">
            <h2 class="text-xl font-semibold mb-2">Toast Notifications</h2>
            <div class="bg-green-500 text-white p-4 rounded-lg">
                <p>Changes saved successfully!</p>
            </div>
        </div>

        <!-- Snackbars -->
        <div class="mb-6">
            <h2 class="text-xl font-semibold mb-2">Snackbars</h2>
            <div class="bg-gray-800 text-white p-4 rounded-lg">
                <p>Undo Send</p>
            </div>
        </div>

        <!-- Modal Dialogs -->
        <div class="mb-6">
            <h2 class="text-xl font-semibold mb-2">Modal Dialogs</h2>
            <button class="bg-purple-500 text-white px-4 py-2 rounded hover:bg-purple-700" id="openModal">Open Modal</button>
            <div class="fixed inset-0 bg-gray-800 bg-opacity-50 flex items-center justify-center hidden" id="modal">
                <div class="bg-gray-800 p-6 rounded-lg shadow-lg">
                    <h3 class="text-lg font-semibold mb-2">Modal Title</h3>
                    <p class="text-gray-300 mb-4">This is the content of the modal. It provides additional information in a popup format.</p>
                    <button class="bg-red-500 text-white px-4 py-2 rounded hover:bg-red-700" id="closeModal">Close</button>
                </div>
            </div>
        </div>

        <!-- Tooltips -->
        <div class="mb-6">
            <h2 class="text-xl font-semibold mb-2">Tooltips</h2>
            <button class="relative group">
                Hover me
                <span class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 w-32 bg-black text-white text-xs rounded py-1 px-2 opacity-0 group-hover:opacity-100 transition-opacity">Tooltip text</span>
            </button>
        </div>

        <!-- Skeleton Loaders -->
        <div class="mb-6">
            <h2 class="text-xl font-semibold mb-2">Skeleton Loaders</h2>
            <div class="animate-pulse">
                <div class="h-4 bg-gray-700 rounded mb-4"></div>
                <div class="h-4 bg-gray-700 rounded mb-4"></div>
                <div class="h-4 bg-gray-700 rounded"></div>
            </div>
        </div>

        <!-- Error States -->
        <div class="mb-6">
            <h2 class="text-xl font-semibold mb-2">Error States</h2>
            <div class="bg-red-500 text-white p-4 rounded-lg">
                <p>Something went wrong. Please try again.</p>
            </div>
        </div>

        <!-- Charts (Line, Bar, Pie, etc.) -->
        <div class="mb-6">
            <h2 class="text-xl font-semibold mb-2">Charts (Line, Bar, Pie, etc.)</h2>
            <div class="bg-gray-800 shadow-md rounded-lg p-4">
                <canvas id="chart"></canvas>
            </div>
        </div>

        <!-- Graphs -->
        <div class="mb-6">
            <h2 class="text-xl font-semibold mb-2">Graphs</h2>
            <div class="bg-gray-800 shadow-md rounded-lg p-4">
                <canvas id="graph"></canvas>
            </div>
        </div>

        <!-- Progress Bars -->
        <div class="mb-6">
            <h2 class="text-xl font-semibold mb-2">Progress Bars</h2>
            <div class="w-full bg-gray-700 rounded-full h-2.5 mb-4">
                <div class="bg-blue-500 h-2.5 rounded-full" style="width: 50%"></div>
            </div>
        </div>

        <!-- Counters and KPIs -->
        <div class="mb-6">
            <h2 class="text-xl font-semibold mb-2">Counters and KPIs</h2>
            <div class="bg-gray-800 shadow-md rounded-lg p-4">
                <p class="text-lg font-semibold">Total Sales: <span class="text-blue-500">1,234</span></p>
            </div>
        </div>

        <!-- Map Integration -->
        <div class="mb-6">
            <h2 class="text-xl font-semibold mb-2">Map Integration</h2>
            <div class="bg-gray-800 shadow-md rounded-lg p-4">
                <div id="map" class="w-full h-64"></div>
            </div>
        </div>

        <!-- Heat Maps -->
        <div class="mb-6">
            <h2 class="text-xl font-semibold mb-2">Heat Maps</h2>
            <div class="bg-gray-800 shadow-md rounded-lg p-4">
                <div id="heatmap" class="w-full h-64"></div>
            </div>
        </div>

        <!-- Dark/Light Mode Toggle -->
        <div class="mb-6">
            <h2 class="text-xl font-semibold mb-2">Dark/Light Mode Toggle</h2>
            <label class="flex items-center cursor-pointer">
                <div class="relative">
                    <input type="checkbox" class="sr-only">
                    <div class="block bg-gray-600 w-14 h-8 rounded-full"></div>
                    <div class="dot absolute left-1 top-1 bg-white w-6 h-6 rounded-full transition"></div>
                </div>
                <div class="ml-3 text-gray-300">Dark Mode</div>
            </label>
        </div>

        <!-- Language Switcher -->
        <div class="mb-6">
            <h2 class="text-xl font-semibold mb-2">Language Switcher</h2>
            <select class="w-full px-4 py-2 border rounded bg-gray-700 text-white">
                <option>English</option>
                <option>Spanish</option>
                <option>French</option>
            </select>
        </div>

        <!-- Accessibility Controls -->
        <div class="mb-6">
            <h2 class="text-xl font-semibold mb-2">Accessibility Controls</h2>
            <div class="flex space-x-4">
                <button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-700">Increase Font Size</button>
                <button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-700">Decrease Font Size</button>
            </div>
        </div>

        <!-- Print/Export Options -->
        <div class="mb-6">
            <h2 class="text-xl font-semibold mb-2">Print/Export Options</h2>
            <button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-700">Export as PDF</button>
        </div>

        <!-- Search Functionality -->
        <div class="mb-6">
            <h2 class="text-xl font-semibold mb-2">Search Functionality</h2>
            <input type="search" class="w-full px-4 py-2 border rounded bg-gray-700 text-white" placeholder="Search...">
        </div>

        <!-- User Profiles -->
        <div class="mb-6">
            <h2 class="text-xl font-semibold mb-2">User Profiles</h2>
            <div class="bg-gray-800 shadow-md rounded-lg p-4">
                <h3 class="text-lg font-semibold mb-2">User Name</h3>
                <p class="text-gray-300">This is the user profile description.</p>
            </div>
        </div>

        <!-- Color Picker -->
        <div class="mb-6">
            <h2 class="text-xl font-semibold mb-2">Color Picker</h2>
            <input type="color" class="w-full px-4 py-2 border rounded bg-gray-700 text-white">
        </div>

        <!-- Font Resizer -->
        <div class="mb-6">
            <h2 class="text-xl font-semibold mb-2">Font Resizer</h2>
            <div class="flex space-x-4">
                <button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-700">A+</button>
                <button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-700">A-</button>
            </div>
        </div>

        <!-- Notifications Center -->
        <div class="mb-6">
            <h2 class="text-xl font-semibold mb-2">Notifications Center</h2>
            <div class="bg-gray-800 shadow-md rounded-lg p-4">
                <h3 class="text-lg font-semibold mb-2">Notifications</h3>
                <p class="text-gray-300">You have 3 new notifications.</p>
            </div>
        </div>
    </div>

    <script>
        document.querySelectorAll('.tab-button').forEach(button => {
            button.addEventListener('click', () => {
                const tabContent = document.querySelectorAll('.tab-content');
                tabContent.forEach(content => content.classList.add('hidden'));

                const target = button.getAttribute('data-tab');
                document.getElementById(target).classList.remove('hidden');

                document.querySelectorAll('.tab-button').forEach(btn => btn.classList.remove('text-blue-500'));
                button.classList.add('text-blue-500');
            });
        });

        document.getElementById('openModal').addEventListener('click', () => {
            document.getElementById('modal').classList.remove('hidden');
        });

        document.getElementById('closeModal').addEventListener('click', () => {
            document.getElementById('modal').classList.add('hidden');
        });
    </script>
</body>
</html>


------------

rearrange, number, and label ui elements to maek functional ui ux animated artwork using tailwind and framer motion