Search Components

All Components

Browse all available Tailwind CSS components

Site Map Component

A Site Map Component designed in a Brutalism style with a dark theme, ideal for professional business websites. It features a bold layout with high contrast and interactive elements.

Open Preview

                <div class="bg-gray-800 text-white p-6 rounded-lg shadow-lg transition duration-300 ease-in-out">
    <h2 class="text-3xl font-bold mb-4">Site Map</h2>
    <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
        <div class="bg-gray-700 p-4 rounded-lg">
            <h3 class="text-xl font-semibold mb-2">About Us</h3>
            <p class="text-gray-300">Learn more about our company and values.</p>
        </div>
        <div class="bg-gray-700 p-4 rounded-lg">
            <h3 class="text-xl font-semibold mb-2">Services</h3>
            <p class="text-gray-300">Explore the services we offer to our clients.</p>
        </div>
        <div class="bg-gray-700 p-4 rounded-lg">
            <h3 class="text-xl font-semibold mb-2">Contact</h3>
            <p class="text-gray-300">Get in touch with us for inquiries.</p>
        </div>
        <div class="bg-gray-700 p-4 rounded-lg">
            <h3 class="text-xl font-semibold mb-2">Blog</h3>
            <p class="text-gray-300">Read our latest articles and updates.</p>
        </div>
        <div class="bg-gray-700 p-4 rounded-lg">
            <h3 class="text-xl font-semibold mb-2">FAQ</h3>
            <p class="text-gray-300">Find answers to common questions.</p>
        </div>
        <div class="bg-gray-700 p-4 rounded-lg">
            <h3 class="text-xl font-semibold mb-2">Careers</h3>
            <p class="text-gray-300">Join our team and grow your career with us.</p>
        </div>
    </div>
    <div class="mt-6 border-t border-gray-600 pt-4">
        <h3 class="text-xl font-bold mb-2">Team</h3>
        <div class="grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-4">
            <div class="flex items-center">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" class="w-12 h-12 rounded-full mr-3">
                <div>
                    <p class="font-semibold">John Doe</p>
                    <p class="text-gray-400">CEO</p>
                </div>
            </div>
            <div class="flex items-center">
                <img src="https://randomuser.me/api/portraits/women/2.jpg" class="w-12 h-12 rounded-full mr-3">
                <div>
                    <p class="font-semibold">Jane Smith</p>
                    <p class="text-gray-400">CTO</p>
                </div>
            </div>
            <div class="flex items-center">
                <img src="https://randomuser.me/api/portraits/men/3.jpg" class="w-12 h-12 rounded-full mr-3">
                <div>
                    <p class="font-semibold">Mike Johnson</p>
                    <p class="text-gray-400">CFO</p>
                </div>
            </div>
            <div class="flex items-center">
                <img src="https://randomuser.me/api/portraits/women/4.jpg" class="w-12 h-12 rounded-full mr-3">
                <div>
                    <p class="font-semibold">Emily Davis</p>
                    <p class="text-gray-400">CMO</p>
                </div>
            </div>
        </div>
    </div>
    <div class="mt-6 border-t border-gray-600 pt-4">
        <h3 class="text-xl font-bold mb-2">Resources</h3>
        <a href="#" class="text-blue-400 hover:underline">Documentation</a><br>
        <a href="#" class="text-blue-400 hover:underline">Sitemap</a><br>
        <a href="#" class="text-blue-400 hover:underline">Support</a>
    </div>
</div>

A simple responsive navigation bar component designed for a dashboard, featuring a monochromatic color scheme and microinteractions. It includes a dark mode support with hover effects for engaging animations.

Open Preview

                <nav class="bg-gray-800 dark:bg-gray-900 shadow-lg">
    <div class="max-w-7xl mx-auto px-4">
        <div class="flex justify-between items-center h-16">
            <div class="flex-shrink-0">
                <h1 class="text-white text-2xl">Dashboard</h1>
            </div>
            <div class="hidden md:block">
                <div class="flex items-center space-x-4">
                    <a href="#" class="text-gray-300 hover:text-white transition duration-200 ease-in-out">Home</a>
                    <a href="#" class="text-gray-300 hover:text-white transition duration-200 ease-in-out">Profile</a>
                    <a href="#" class="text-gray-300 hover:text-white transition duration-200 ease-in-out">Settings</a>
                    <a href="#" class="text-gray-300 hover:text-white transition duration-200 ease-in-out">Logout</a>
                </div>
            </div>
            <div class="flex md:hidden">
                <button class="text-gray-300 hover:text-white focus:outline-none">
                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" class="w-6 h-6">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
                    </svg>
                </button>
            </div>
        </div>
    </div>
</nav>
<div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
    <h2 class="text-white text-xl mb-4">Welcome to your Dashboard</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div class="bg-gray-700 dark:bg-gray-800 p-4 rounded shadow">
            <h3 class="text-white text-lg">Data Visualization</h3>
            <img src="https://picsum.photos/300/200" alt="Visualization" class="mt-2 rounded" />
        </div>
        <div class="bg-gray-700 dark:bg-gray-800 p-4 rounded shadow">
            <h3 class="text-white text-lg">Control Panel</h3>
            <img src="https://picsum.photos/300/201" alt="Control" class="mt-2 rounded" />
        </div>
        <div class="bg-gray-700 dark:bg-gray-800 p-4 rounded shadow">
            <h3 class="text-white text-lg">User Insights</h3>
            <img src="https://picsum.photos/300/202" alt="Insights" class="mt-2 rounded" />
        </div>
    </div>
</div>

Data Visualization Components Component

A responsive, dark-mode compatible data visualization component for blogs, featuring a retro/vintage design with a complementary color scheme and complex interactive elements.

Open Preview

                <div class="bg-gray-200 text-gray-800 dark:bg-gray-800 dark:text-gray-200 p-8 font-sans">
  <div class="container mx-auto">

    <!-- Header -->
    <header class="flex justify-between items-center mb-8">
      <h1 class="text-3xl font-bold text-indigo-700 dark:text-teal-400">Data Insights</h1>
      <div class="flex items-center">
        <span class="mr-4">Theme:</span>
        <button class="px-3 py-1 rounded bg-indigo-700 text-white dark:bg-teal-400 dark:text-gray-900" onclick="document.documentElement.classList.toggle('dark')">Toggle Dark Mode</button>
      </div>
    </header>

    <!-- Main Content -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">

      <!-- Chart Area -->
      <section class="bg-white dark:bg-gray-700 p-6 rounded-lg shadow-lg">
        <h2 class="text-xl font-semibold mb-4 text-indigo-700 dark:text-teal-400">Sales Performance</h2>
        <!-- Placeholder for a complex chart - In a real scenario, this would be an SVG or canvas element -->
        <div class="h-64 bg-gray-300 dark:bg-gray-600 rounded-md flex items-center justify-center text-gray-500 dark:text-gray-400">
          [ Complex Chart Placeholder ]
        </div>
        <div class="mt-4 text-sm text-gray-600 dark:text-gray-400">
          <p>Detailed sales data visualization would appear here.</p>
        </div>
      </section>

      <!-- Metrics and Details -->
      <section class="grid grid-cols-1 sm:grid-cols-2 gap-6">

        <!-- Metric Card 1 -->
        <div class="bg-white dark:bg-gray-700 p-6 rounded-lg shadow-lg">
          <h3 class="text-lg font-semibold mb-2 text-indigo-700 dark:text-teal-400">Total Revenue</h3>
          <p class="text-2xl font-bold text-gray-800 dark:text-gray-200">$150,000</p>
          <p class="text-sm text-gray-600 dark:text-gray-400">+12% from last month</p>
        </div>

        <!-- Metric Card 2 -->
        <div class="bg-white dark:bg-gray-700 p-6 rounded-lg shadow-lg">
          <h3 class="text-lg font-semibold mb-2 text-indigo-700 dark:text-teal-400">New Users</h3>
          <p class="text-2xl font-bold text-gray-800 dark:text-gray-200">3,500</p>
          <p class="text-sm text-gray-600 dark:text-gray-400">-5% from last month</p>
        </div>

        <!-- Details Card -->
        <div class="bg-white dark:bg-gray-700 p-6 rounded-lg shadow-lg col-span-full">
          <h3 class="text-lg font-semibold mb-4 text-indigo-700 dark:text-teal-400">Recent Activity</h3>
          <ul class="text-sm text-gray-700 dark:text-gray-300">
            <li class="mb-2">New order #1012 placed</li>
            <li class="mb-2">User

Pagination Component

A responsive pagination component designed in a brutalist style, suitable for business/corporate websites, featuring a triadic color scheme and dark mode support.

Open Preview

                <div class="flex justify-center items-center space-x-4 py-8">
    <a href="#" class="px-4 py-2 text-white bg-yellow-400 dark:bg-yellow-600 rounded-lg font-bold uppercase tracking-wide hover:bg-yellow-500 dark:hover:bg-yellow-700">Prev</a>
    <span class="text-white dark:text-gray-300">Page 1 of 10</span>
    <a href="#" class="px-4 py-2 text-white bg-yellow-400 dark:bg-yellow-600 rounded-lg font-bold uppercase tracking-wide hover:bg-yellow-500 dark:hover:bg-yellow-700">Next</a>
</div>

<div class="flex justify-center items-center space-x-2">
    <a href="#" class="px-3 py-1 text-gray-800 bg-blue-300 dark:bg-blue-700 rounded-lg font-bold hover:bg-blue-400 dark:hover:bg-blue-800">1</a>
    <a href="#" class="px-3 py-1 text-gray-800 bg-white dark:bg-gray-800 rounded-lg font-bold hover:bg-gray-300 dark:hover:bg-gray-700">2</a>
    <a href="#" class="px-3 py-1 text-gray-800 bg-white dark:bg-gray-800 rounded-lg font-bold hover:bg-gray-300 dark:hover:bg-gray-700">3</a>
    <a href="#" class="px-3 py-1 text-gray-800 bg-white dark:bg-gray-800 rounded-lg font-bold hover:bg-gray-300 dark:hover:bg-gray-700">4</a>
    <a href="#" class="px-3 py-1 text-gray-800 bg-white dark:bg-gray-800 rounded-lg font-bold hover:bg-gray-300 dark:hover:bg-gray-700">5</a>
</div>

<div class="flex justify-center items-center space-x-4 mt-4">
    <a href="#" class="px-4 py-2 text-white bg-yellow-400 dark:bg-yellow-600 rounded-lg font-bold uppercase tracking-wide hover:bg-yellow-500 dark:hover:bg-yellow-700">Last</a>
</div>

Video Player Component

A simple video player component designed with a 3D style and pastel color scheme, suitable for dashboards.

Open Preview

                <div class="flex flex-col items-center bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4 w-full max-w-md mx-auto">
    <div class="bg-gray-200 dark:bg-gray-700 rounded-lg shadow-md overflow-hidden">
        <iframe class="w-full h-64" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>
    <div class="flex flex-col items-start mt-4 w-full">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-100">Video Title</h2>
        <p class="text-gray-600 dark:text-gray-300">This is a brief description of the video content.</p>
        <div class="flex items-center mt-2">
            <img src="https://i.pravatar.cc/150?img=3" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-white dark:border-gray-600 shadow-sm">
            <span class="ml-2 text-gray-800 dark:text-gray-100">Uploader Name</span>
        </div>
    </div>
</div>

Neumorphism Audio Player

A Neumorphism-styled audio player component with play, pause, skip, and volume controls, designed for business websites. Features a progress bar, song title, artist, and album art. Includes responsive design and dark mode support using Tailwind CSS.

Open Preview

                <div class="flex items-center justify-center min-h-screen bg-gray-200 dark:bg-gray-900 p-4">
  <div class="w-full max-w-md bg-gray-200 dark:bg-gray-800 rounded-xl p-6 shadow-xl dark:shadow-xl-dark">
    <div class="flex flex-col items-center">
      <div class="w-32 h-32 bg-gray-300 dark:bg-gray-700 rounded-full shadow-inner dark:shadow-inner-dark flex items-center justify-center">
        <img src="https://picsum.photos/128" alt="Album Artwork" class="rounded-full w-full h-full object-cover">
      </div>
      <h3 class="mt-4 text-lg font-semibold text-gray-800 dark:text-gray-200">Song Title</h3>
      <p class="text-sm text-gray-600 dark:text-gray-400">Artist Name - Album Name</p>
    </div>

    <div class="w-full mt-6">
      <div class="flex items-center justify-between text-gray-600 dark:text-gray-400 text-xs">
        <span>0:00</span>
        <span>3:45</span>
      </div>
      <div class="w-full bg-gray-300 dark:bg-gray-700 rounded-full h-2 mt-1 shadow-inner dark:shadow-inner-dark">
        <div class="bg-blue-500 h-2 rounded-full" style="width: 30%;"></div>
      </div>
    </div>

    <div class="flex items-center justify-around mt-8">
      <button class="w-12 h-12 bg-gray-200 dark:bg-gray-800 rounded-full flex items-center justify-center shadow-neumorphic dark:shadow-neumorphic-dark">
        <svg class="w-6 h-6 text-gray-700 dark:text-gray-300" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z" clip-rule="evenodd"></path>
        </svg>
      </button>
      <button class="w-16 h-16 bg-gray-200 dark:bg-gray-800 rounded-full flex items-center justify-center shadow-neumorphic-lg dark:shadow-neumorphic-lg-dark">
        <svg class="w-8 h-8 text-blue-600 dark:text-blue-400" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path>
        </svg>
      </button>
      <button class="w-12 h-12 bg-gray-200 dark:bg-gray-800 rounded-full flex items-center justify-center shadow-neumorphic dark:shadow-neumorphic-dark">
        <svg class="w-6 h-6 text-gray-700 dark:text-gray-300" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
        </svg>
      </button>
    </div>

    <div class="flex items-center mt-6">
      <svg class="w-5 h-5 text-gray-600 dark:text-gray-400 mr-2" fill="currentColor" viewBox="0 0 20 20">
        <path fill-rule="evenodd" d="M9.384 4.464A1 1 0 0110 4v12a1 1 0 01-1.707.707L6 14H3a1 1 0 01-1-1V7a1 1 0 011-1h3l2.293-2.293a1 1 0 011.091-.243zM14.003 7.77a.75.75 0 01.412 1.367l-3.495 1.896-.943-.943 3.496-1.897z" clip-rule="evenodd"></path>
      </svg>
      <div class="w-full bg-gray-300 dark:bg-gray-700 rounded-full h-2 shadow-inner dark:shadow-inner-dark">
        <div class="bg-blue-500 h-2 rounded-full" style="width: 60%;"></div>
      </div>
      <svg class="w-5 h-5 text-gray-600 dark:text-gray-400 ml-2" fill="currentColor" viewBox="0 0 20 20">
        <path fill-rule="evenodd" d="M17.707 9.293a1 1 0 010 1.414l-b b a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414zm-1.414 4.242a1 1 0 10-1.414 1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
        <path d="M1.723 13.863a1 1 0 00-.723.451l-1 1.5A1 1 0 001 18.122V19a1 1 0 001 1h1a1 1 0 001-1v-.878A1 1 0 003.723 18L3 16.863a1 1 0 00-.723-.451zM4 5a1 1 0 00-1 1v8a1 1 0 001 1h2a1 1 0 001-1V6a1 1 0 00-1-1H4z" clip-rule="evenodd"></path>
      </svg>
    </div>
  </div>
</div>

<style>
  .shadow-xl-dark {
    box-shadow: 7px 7px 15px #1f1f1f, -7px -7px 15px #2d2d2d;
  }
  .shadow-inner-dark {
    box-shadow: inset 5px 5px 10px #1f1f1f, inset -5px -5px 10px #2d2d2d;
  }
  .shadow-neumorphic {
    box-shadow: 5px 5px 10px #b0b0b0, -5px -5px 10px #ffffff;
  }
  .shadow-neumorphic-dark {
    box-shadow: 5px 5px 10px #1f1f1f, -5px -5px 10px #2d2d2d;
  }
  .shadow-neumorphic-lg {
     box-shadow: 8px 8px 15px #b0b0b0, -8px -8px 15px #ffffff;
  }
  .shadow-neumorphic-lg-dark {
     box-shadow: 8px 8px 15px #1f1f1f, -8px -8px 15px #2d2d2d;
  }
</style>

Navigation Bar Component

A responsive Navigation Bar Component designed in Material Design style with triadic color scheme, suitable for social media interfaces, and includes dark theme support.

Open Preview

                <nav class="bg-blue-600 dark:bg-gray-800 shadow-md">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between h-16">
            <div class="flex">
                <div class="flex items-center">
                    <img src="https://picsum.photos/50" alt="Logo" class="h-8 w-8 rounded-full">
                </div>
                <div class="hidden md:flex items-center space-x-4 ml-6">
                    <a href="#" class="text-white dark:text-gray-300 hover:bg-blue-500 dark:hover:bg-gray-700 px-3 py-2 rounded-md text-sm font-medium">Home</a>
                    <a href="#" class="text-white dark:text-gray-300 hover:bg-blue-500 dark:hover:bg-gray-700 px-3 py-2 rounded-md text-sm font-medium">About</a>
                    <a href="#" class="text-white dark:text-gray-300 hover:bg-blue-500 dark:hover:bg-gray-700 px-3 py-2 rounded-md text-sm font-medium">Services</a>
                    <a href="#" class="text-white dark:text-gray-300 hover:bg-blue-500 dark:hover:bg-gray-700 px-3 py-2 rounded-md text-sm font-medium">Contact</a>
                </div>
            </div>
            <div class="hidden md:flex items-center">
                <a href="#" class="flex items-center text-gray-900 dark:text-gray-300 hover:bg-blue-500 dark:hover:bg-gray-700 px-3 py-2 rounded-md text-sm font-medium">
                    <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User avatar" class="h-8 w-8 rounded-full mr-2">
                    Profile
                </a>
            </div>
            <div class="-mr-2 flex md:hidden">
                <button class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-blue-500 dark:bg-gray-700 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white" aria-controls="mobile-menu" aria-expanded="false">
                    <span class="sr-only">Open main menu</span>
                    <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
                    </svg>
                </button>
            </div>
        </div>
    </div>
    <div class="md:hidden" id="mobile-menu">
        <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
            <a href="#" class="text-white dark:text-gray-300 hover:bg-blue-500 dark:hover:bg-gray-700 block px-3 py-2 rounded-md text-base font-medium">Home</a>
            <a href="#" class="text-white dark:text-gray-300 hover:bg-blue-500 dark:hover:bg-gray-700 block px-3 py-2 rounded-md text-base font-medium">About</a>
            <a href="#" class="text-white dark:text-gray-300 hover:bg-blue-500 dark:hover:bg-gray-700 block px-3 py-2 rounded-md text-base font-medium">Services</a>
            <a href="#" class="text-white dark:text-gray-300 hover:bg-blue-500 dark:hover:bg-gray-700 block px-3 py-2 rounded-md text-base font-medium">Contact</a>
        </div>
    </div>
</nav>

Video Player Component

Material Design Video Player Component with Dark Mode

Open Preview

                <div class="container mx-auto p-4 dark:bg-gray-900">
  <div class="bg-white shadow-md rounded-lg overflow-hidden dark:bg-gray-800">
    <div class="relative pb-9/16">
      <iframe class="absolute w-full h-full" src="https://www.youtube.com/embed/your-video-id" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>
    <div class="p-4">
      <h3 class="text-xl font-semibold text-gray-800 dark:text-white">Video Title</h3>
      <p class="text-gray-600 dark:text-gray-300 mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      <div class="flex items-center mt-4">
        <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
        <div class="text-sm">
          <p class="text-gray-900 leading-none dark:text-white">Author Name</p>
          <p class="text-gray-600 dark:text-gray-400">Posted on October 26, 2023</p>
        </div>
      </div>
      <div class="flex justify-between items-center mt-4">
        <div class="flex space-x-4">
          <button class="text-gray-500 hover:text-blue-500 dark:text-gray-400 dark:hover:text-blue-400">
            <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 10h4.764a2 2 0 011.789 2.894l-3.5 7A2 2 0 0115.382 22H12v-7H4v-7H3a2 2 0 01-2-2V5a2 2 0 012-2h1a2 2 0 012 2v2h0a2 2 0 002 2v1h2a2 2 0 002-2zm0 0v6m0-6a2 2 0 100-4 2 2 0 000 4z"></path></svg>
          </button>
          <button class="text-gray-500 hover:text-red-500 dark:text-gray-400 dark:hover:text-red-400">
            <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14H5.236a2 2 0 01-1.789-2.894l3.5-7A2 2 0 018.618 2H12v7h8v7h1a2 2 0 012 2v1a2 2 0 01-2 2h-1a2 2 0 01-2-2v-2h0a2 2 0 00-2-2v-1h-2a2 2 0 00-2 2zm0 0v6m0-6a2 2 0 100-4 2 2 0 000 4z"></path></svg>
          </button>
        </div>
        <button class="text-gray-500 hover:text-green-500 dark:text-gray-400 dark:hover:text-green-400">
          <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.882 13.07 9.283 13 9.683 13h9.634c.399 0 .701.232.8.519l7.273 17.209c.1.287-.08.609-.407.609H18.54l-5.007-12.623z"></path></svg>
        </button>
      </div>
    </div>
  </div>
</div>

OAuth Buttons Component

A simple, responsive OAuth buttons component designed in skeuomorphic style with a vibrant color scheme, tailored for e-commerce platforms, and supporting dark mode.

Open Preview

                <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg max-w-sm mx-auto">
    <h2 class="text-2xl font-bold text-center text-blue-600 dark:text-blue-300 mb-4">Sign in with:</h2>
    <div class="flex flex-col space-y-4">
        <a href="#" class="flex items-center justify-center bg-gradient-to-r from-yellow-400 to-red-500 p-4 rounded-lg shadow-md hover:shadow-lg transition duration-300 ease-in-out">
            <img src="https://picsum.photos/20?1" alt="Google Logo" class="mr-3 rounded-full">
            <span class="text-white font-semibold">Google</span>
        </a>
        <a href="#" class="flex items-center justify-center bg-gradient-to-r from-blue-500 to-indigo-600 p-4 rounded-lg shadow-md hover:shadow-lg transition duration-300 ease-in-out">
            <img src="https://picsum.photos/20?2" alt="Facebook Logo" class="mr-3 rounded-full">
            <span class="text-white font-semibold">Facebook</span>
        </a>
        <a href="#" class="flex items-center justify-center bg-gradient-to-r from-purple-500 to-pink-500 p-4 rounded-lg shadow-md hover:shadow-lg transition duration-300 ease-in-out">
            <img src="https://picsum.photos/20?3" alt="Twitter Logo" class="mr-3 rounded-full">
            <span class="text-white font-semibold">Twitter</span>
        </a>
    </div>
</div>

<style>
    /* Adding dark mode support */
    @media (prefers-color-scheme: dark) {
        .rounded-lg {
            background-color: #1f2937; /* Gray-800 */
        }
        .text-white {
            color: #f9fafb; /* Gray-50 */
        }
    }
</style>

Sidebar Navigation Component

A responsive sidebar navigation component with 3D design elements, an analogous color scheme, and medium complexity with interactive features. Suitable for blog or content websites.

Open Preview

                <!-- Responsive Sidebar Navigation Component -->
<div class="flex h-screen bg-gray-100 dark:bg-gray-900">

    <!-- Sidebar -->
    <div class="bg-gradient-to-br from-blue-500 to-purple-600 dark:from-blue-700 dark:to-purple-900 text-white w-64 space-y-6 py-7 px-2 absolute inset-y-0 left-0 transform -translate-x-full md:relative md:translate-x-0 transition duration-200 ease-in-out shadow-lg">
        <div class="text-white flex items-center justify-between px-4">
            <span class="text-2xl font-extrabold italic">Blog Menu</span>
            <!-- Mobile menu button -->
            <button class="text-white focus:outline-none md:hidden" onclick="document.querySelector('.translate-x-full').classList.toggle('translate-x-full');">
                <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
                </svg>
            </button>
        </div>

        <!-- Nav Links -->
        <nav>
            <a href="#" class="block py-2.5 px-4 rounded transition duration-200 hover:bg-blue-700 dark:hover:bg-blue-900 hover:text-white transform hover:scale-105 shadow-md mb-2">
                <i class="fas fa-home mr-3"></i> Home
            </a>
            <a href="#" class="block py-2.5 px-4 rounded transition duration-200 hover:bg-purple-700 dark:hover:bg-purple-900 hover:text-white transform hover:scale-105 shadow-md mb-2">
                <i class="fas fa-th-large mr-3"></i> Categories
            </a>
            <a href="#" class="block py-2.5 px-4 rounded transition duration-200 hover:bg-blue-700 dark:hover:bg-blue-900 hover:text-white transform hover:scale-105 shadow-md mb-2">
                <i class="fas fa-bookmark mr-3"></i> Bookmarks
            </a>
            <a href="#" class="block py-2.5 px-4 rounded transition duration-200 hover:bg-purple-700 dark:hover:bg-purple-900 hover:text-white transform hover:scale-105 shadow-md mb-2">
                <i class="fas fa-user mr-3"></i> Profile
            </a>
            <a href="#" class="block py-2.5 px-4 rounded transition duration-200 hover:bg-blue-700 dark:hover:bg-blue-900 hover:text-white transform hover:scale-105 shadow-md">
                <i class="fas fa-cog mr-3"></i> Settings
            </a>
        </nav>

        <!-- Footer/User Info (Optional) -->
        <div class="absolute inset-x-0 bottom-0 p-4">
            <div class="flex items-center">
                <img src="https://randomuser.me/api/portraits/lego/1.jpg" alt="User Avatar" class="h-10 w-10 rounded-full border-2 border-white mr-3">
                <div class="text-sm">
                    <p class="font-semibold">John Doe</p>
                    <p class="text-gray-200 dark:text-gray-400">View Profile</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Main Content Area -->
    <div class="flex-1 p-10 text-2xl font-bold">
        <!-- Your main content goes here -->
        Main Content
    </div>
    
</div>

1 ... 197 198 199 200 201 ... 335