Search Components

All Components

Browse all available Tailwind CSS components

Brutalist Forms Component

A simple brutalist-styled forms component for social media. It features a high contrast, raw design using grayscale colors and is responsive with dark mode support.

Open Preview

                <div class="max-w-md mx-auto p-5 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg shadow-lg">
    <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">Sign Up</h2>
    <form>
        <label class="block mb-2 text-sm font-medium text-gray-700 dark:text-gray-300">Name</label>
        <input type="text" class="block w-full p-2 border border-gray-300 dark:border-gray-600 rounded mb-4 focus:outline-none focus:ring focus:ring-gray-300 dark:focus:ring-gray-600" placeholder="Your Name" required>
        
        <label class="block mb-2 text-sm font-medium text-gray-700 dark:text-gray-300">Email</label>
        <input type="email" class="block w-full p-2 border border-gray-300 dark:border-gray-600 rounded mb-4 focus:outline-none focus:ring focus:ring-gray-300 dark:focus:ring-gray-600" placeholder="Your Email" required>
        
        <label class="block mb-2 text-sm font-medium text-gray-700 dark:text-gray-300">Profile Picture</label>
        <div class="flex items-center mb-4">
            <img src="https://picsum.photos/50" alt="Profile Picture" class="rounded-full border border-gray-300 dark:border-gray-600 mr-3">
            <input type="file" class="block w-full p-2 border border-gray-300 dark:border-gray-600 rounded"> 
        </div>
        
        <button type="submit" class="w-full py-2 bg-gray-900 dark:bg-gray-200 text-white dark:text-gray-900 hover:bg-gray-700 dark:hover:bg-gray-300 rounded">Submit</button>
    </form>
</div>

Notifications Component

Brutalist Notifications Component with Earth tones for Portfolio

Open Preview

                
    <div class="relative min-h-screen bg-stone-100 dark:bg-stone-900 font-mono p-8">

        <!-- Notifications Container -->
        <div class="max-w-4xl mx-auto border-4 border-stone-900 dark:border-stone-100 bg-stone-300 dark:bg-stone-800 shadow-[10px_10px_0_0_#000] dark:shadow-[10px_10px_0_0_#E0E0E0] p-6 md:p-10">

            <div class="flex justify-between items-center mb-8 pb-4 border-b-4 border-stone-900 dark:border-stone-100">
                <h1 class="text-3xl md:text-5xl font-extrabold text-stone-900 dark:text-stone-100 uppercase tracking-tighter">
                    Inbox (4)
                </h1>
                <div class="relative">
                    <select class="block appearance-none bg-stone-900 dark:bg-stone-100 text-stone-100 dark:text-stone-900 py-3 px-6 pr-8 rounded-none leading-tight focus:outline-none focus:bg-stone-700 dark:focus:bg-stone-300 focus:border-stone-700 dark:focus:border-stone-300 border-2 border-stone-900 dark:border-stone-100 shadow-[4px_4px_0_0_#5D4037] dark:shadow-[4px_4px_0_0_#A1887F]">
                        <option>Filter By</option>
                        <option>All</option>
                        <option>Unread</option>
                        <option>Archived</option>
                    </select>
                    <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-stone-100 dark:text-stone-900">
                        <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/></svg>
                    </div>
                </div>
            </div>

            <!-- Notification Item 1 -->
            <div class="mb-6 p-6 border-4 border-stone-900 dark:border-stone-100 bg-stone-200 dark:bg-stone-700 shadow-[8px_8px_0_0_#9E9D24] dark:shadow-[8px_8px_0_0_#DCE775] transition-all duration-300 hover:shadow-[12px_12px_0_0_#9E9D24] dark:hover:shadow-[12px_12px_0_0_#DCE775] relative">
                <div class="absolute -top-3 -right-3 bg-red-600 dark:bg-red-400 text-white dark:text-stone-900 text-xs px-3 py-1 font-bold">NEW</div>
                <div class="flex items-start mb-4">
                    <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-16 h-16 rounded-full border-4 border-stone-900 dark:border-stone-100 mr-4 shadow-[4px_4px_0_0_#5D4037] dark:shadow-[4px_4px_0_0_#A1887F]">
                    <div>
                        <h3 class="text-xl md:text-2xl font-bold text-stone-800 dark:text-stone-200 mb-1">Project Updates - Critical!</h3>
                        <p class="text-stone-600 dark:text-stone-400 text-sm">From: John Doe <span class="ml-2 text-stone-500 dark:text-stone-500 text-xs">2 hours ago</span></p>
                    </div>
                </div>
                <p class="text-stone-700 dark:text-stone-300 leading-relaxed mb-4">
                    Hey team, urgent update on the

Skeuomorphic Audio Player

An audio player component designed with a Skeuomorphic style, pastel color scheme, and complex interface. It supports dark mode and is responsive, suitable for e-commerce sites.

Open Preview

                <div class="flex items-center justify-center min-h-screen bg-gray-50 dark:bg-gray-900 p-4">
  <div class="w-full max-w-md bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 rounded-2xl shadow-xl p-6 relative overflow-hidden transform transition-all duration-300 hover:scale-[1.02] active:scale-[0.98] focus:scale-[1.01] outline-none"
    tabindex="0" aria-label="Audio Player with complex controls">

    <!-- Top Controls and Display -->
    <div class="flex items-center justify-between mb-6">

      <div class="text-gray-600 dark:text-gray-300">
        <i class="fas fa-bars text-xl"></i>
      </div>

      <div class="text-center flex-grow">
        <h3 class="text-sm font-semibold text-gray-700 dark:text-gray-200 uppercase tracking-wide">Now Playing</h3>
        <p class="text-xs text-gray-500 dark:text-gray-400">Pastel Vibes</p>
      </div>

      <div class="text-gray-600 dark:text-gray-300">
        <i class="fas fa-heart text-xl"></i>
      </div>
    </div>

    <!-- Album Art / Display Area -->
    <div class="relative w-48 h-48 mx-auto mb-8 rounded-full shadow-inner-lg transform transition-transform duration-300 group hover:rotate-3 active:rotate-[-3deg] focus:rotate-2">
      <img src="https://picsum.photos/300/300?random=1" alt="Album Art" class="w-full h-full rounded-full object-cover shadow-md border-4 border-gray-400 dark:border-gray-600 transform transition-transform duration-300 group-hover:scale-105" />
      <div class="absolute inset-0 rounded-full border-2 border-dashed border-gray-400 dark:border-gray-500 animate-spin-slow"></div>
    </div>

    <!-- Song Info -->
    <div class="text-center mb-6">
      <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-1">Dreamy Horizon</h2>
      <p class="text-md text-gray-600 dark:text-gray-300">Acoustic Serenity</p>
    </div>

    <!-- Progress Bar (Skeuomorphic) -->
    <div class="mb-8">
      <div class="h-3 bg-gray-300 dark:bg-gray-700 rounded-full shadow-inner-sm relative">
        <div class="absolute inset-y-0 left-0 bg-gradient-to-r from-pink-300 to-purple-400 dark:from-pink-500 dark:to-purple-600 rounded-full w-2/3 shadow-md"></div>
        <div class="absolute -right-2 top-1/2 -translate-y-1/2 w-5 h-5 bg-white border-2 border-gray-400 dark:border-gray-600 rounded-full shadow-lg cursor-pointer transform hover:scale-110 transition-transform duration-200" role="slider" aria-valuenow="66" aria-valuemin="0" aria-valuemax="100" aria-label="Playback progress"></div>
      </div>
      <div class="flex justify-between text-xs text-gray-500 dark:text-gray-400 mt-2">
        <span>2:30</span>
        <span>4:15</span>
      </div>
    </div>

    <!-- Main Controls -->
    <div class="flex items-center justify-around mb-8">

      <button class="w-12 h-12 flex items-center justify-center rounded-full bg-gray-100 dark:bg-gray-800 shadow-md hover:shadow-lg transition-all duration-200 transform hover:scale-110 active:scale-95 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-opacity-75" aria-label="Previous track">
        <i class="fas fa-backward text-xl text-gray-600 dark:text-gray-300"></i>
      </button>

      <button class="w-16 h-16 flex items-center justify-center rounded-full bg-gradient-to-br from-pink-300 to-purple-400 dark:from-pink-500 dark:to-purple-600 shadow-xl hover:shadow-2xl transition-all duration-200 transform hover:scale-110 active:scale-95 focus:outline-none focus:ring-2 focus:ring-purple-400 focus:ring-opacity-75" aria-label="Play/Pause">
        <i class="fas fa-play text-2xl text-white"></i>
      </button>

      <button class="w-12 h-12 flex items-center justify-center rounded-full bg-gray-100 dark:bg-gray-800 shadow-md hover:shadow-lg transition-all duration-200 transform hover:scale-110 active:scale-95 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-opacity-75" aria-label="Next track">
        <i class="fas fa-forward text-xl text-gray-600 dark:text-gray-300"></i>
      </button>
    </div>

    <!-- Additional Controls -->
    <div class="flex items-center justify-around text-gray-500 dark:text-gray-400 text-lg">
      <button class="hover:text-gray-700 dark:hover:text-gray-200 transition-colors duration-200 transform hover:scale-110 active:scale-95 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-opacity-75" aria-label="Repeat">
        <i class="fas fa-redo-alt"></i>
      </button>
      <button class="hover:text-gray-700 dark:hover:text-gray-200 transition-colors duration-200 transform hover:scale-110 active:scale-95 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-opacity-75" aria-label="Shuffle">
        <i class="fas fa-random"></i>
      </button>
      <button class="hover:text-gray-700 dark:hover:text-gray-200 transition-colors duration-200 transform hover:scale-110 active:scale-95 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-opacity-75" aria-label="Volume">
        <i class="fas fa-volume-up"></i>
      </button>
      <button class="hover:text-gray-700 dark:hover:text-gray-200 transition-colors duration-200 transform hover:scale-110 active:scale-95 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-opacity-75" aria-label="Playlist">
        <i class="fas fa-list"></i>
      </button>
    </div>

  </div>
</div>

<!-- To ensure icons are displayed, include Font Awesome via CDN in your project's HTML head -->
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" /> -->

Product Reviews Component

A simple product reviews component designed in Material Design style with a grayscale color scheme.

Open Preview

                <div class="max-w-md mx-auto my-10 bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
    <div class="p-5">
        <h2 class="text-lg font-bold text-gray-800 dark:text-gray-100">Product Reviews</h2>
        <div class="mt-4">
            <div class="flex items-center mb-4">
                <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" />
                <div class="ml-3">
                    <h3 class="text-gray-800 dark:text-gray-100 font-semibold">John Doe</h3>
                    <p class="text-gray-600 dark:text-gray-400">5 stars</p>
                    <p class="text-gray-600 dark:text-gray-400">This product is amazing! Highly recommend.</p>
                </div>
            </div>
            <div class="flex items-center mb-4">
                <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" />
                <div class="ml-3">
                    <h3 class="text-gray-800 dark:text-gray-100 font-semibold">Jane Smith</h3>
                    <p class="text-gray-600 dark:text-gray-400">4 stars</p>
                    <p class="text-gray-600 dark:text-gray-400">Great quality but could be a bit cheaper.</p>
                </div>
            </div>
            <div class="flex items-center mb-4">
                <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar" />
                <div class="ml-3">
                    <h3 class="text-gray-800 dark:text-gray-100 font-semibold">Michael Johnson</h3>
                    <p class="text-gray-600 dark:text-gray-400">3 stars</p>
                    <p class="text-gray-600 dark:text-gray-400">Average experience, nothing special.</p>
                </div>
            </div>
        </div>
    </div>
</div>

Brutalist Search Box

A brutalist search box component with vibrant colors and dark theme support.

Open Preview

                <div class="min-h-screen bg-stone-100 dark:bg-stone-900 p-8 flex flex-col items-center justify-center font-mono"><div class="w-full max-w-md bg-white dark:bg-stone-800 shadow-[8px_8px_0_black] dark:shadow-[8px_8px_0_cyan] border-4 border-black dark:border-cyan-400 rounded-none overflow-hidden"><div class="bg-red-500 dark:bg-purple-600 p-4 border-b-4 border-black dark:border-cyan-400"><h2 class="text-xl text-black dark:text-white uppercase font-bold text-center">Search the Void</h2></div><div class="p-6"><div class="flex"><input type="text" placeholder="Enter query..." class="flex-grow p-4 border-4 border-black dark:border-cyan-400 bg-yellow-300 dark:bg-teal-300 text-black placeholder-gray-800 dark:placeholder-gray-900 focus:outline-none focus:bg-yellow-400 dark:focus:bg-teal-400 rounded-none text-lg"><button class="ml-4 px-6 py-4 bg-lime-500 dark:bg-fuchsia-600 text-black dark:text-white uppercase font-bold border-4 border-black dark:border-cyan-400 shadow-[4px_4px_0_black] dark:shadow-[4px_4px_0_cyan] hover:shadow-[2px_2px_0_black] dark:hover:shadow-[2px_2px_0_cyan] hover:translate-x-0.5 hover:translate-y-0.5 transition-all duration-150 rounded-none">GO</button></div><div class="mt-6 text-sm text-gray-700 dark:text-gray-300 border-t-2 border-dashed border-gray-400 dark:border-gray-600 pt-4"><p>Explore the depths of information. Beware of lurking data. Access granted.</p></div></div></div><div class="mt-8 text-center"><label for="dark-mode-toggle" class="inline-flex items-center cursor-pointer"><input type="checkbox" id="dark-mode-toggle" class="sr-only peer" onchange="document.documentElement.classList.toggle('dark')"><div class="relative w-11 h-6 bg-gray-400 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-black dark:peer-focus:ring-cyan-300 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-black dark:peer-checked:bg-cyan-500"></div><span class="ml-3 text-sm font-medium text-black dark:text-white uppercase">Dark Mode</span></label></div></div>

Authentication Components Component

A simple and responsive authentication component designed with Material Design principles, featuring earth tones and dark mode support. Suitable for a portfolio site.

Open Preview

                <div class="min-h-screen flex items-center justify-center bg-stone-100 dark:bg-stone-900 p-4"><div class="bg-white dark:bg-stone-800 p-8 rounded-lg shadow-md w-full max-w-md"><div class="flex justify-center mb-6"><svg class="h-12 w-12 text-stone-700 dark:text-stone-300" 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="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 13a2 2 0 11-4 0 2 2 0 014 0z"></path></svg></div><h2 class="text-2xl font-bold text-center text-stone-800 dark:text-white mb-6">Welcome Back!</h2><form><div class="mb-4"><label for="email" class="block text-stone-700 dark:text-stone-300 text-sm font-medium mb-2">Email</label><input type="email" id="email" class="shadow-sm appearance-none border border-stone-300 dark:border-stone-600 rounded w-full py-2 px-3 text-stone-700 dark:text-white leading-tight focus:outline-none focus:ring-2 focus:ring-stone-500 bg-stone-50 dark:bg-stone-700" placeholder="[email protected]"></div><div class="mb-6"><label for="password" class="block text-stone-700 dark:text-stone-300 text-sm font-medium mb-2">Password</label><input type="password" id="password" class="shadow-sm appearance-none border border-stone-300 dark:border-stone-600 rounded w-full py-2 px-3 text-stone-700 dark:text-white leading-tight focus:outline-none focus:ring-2 focus:ring-stone-500 bg-stone-50 dark:bg-stone-700" placeholder="••••••••"></div><button type="submit" class="w-full bg-amber-700 hover:bg-amber-800 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline transition duration-300 ease-in-out">Sign In</button></form><div class="mt-6 text-center"><a href="#" class="inline-block align-baseline font-bold text-sm text-amber-700 hover:text-amber-800">Forgot Password?</a></div></div></div>

Navigation Enhancement Components

A Retro/Vintage navigation bar with a complex design for professional websites, featuring triadic color scheme and responsive dark theme support.

Open Preview

                <nav class="bg-pink-700 dark:bg-pink-800 p-4">
    <div class="max-w-7xl mx-auto flex justify-between items-center">
        <div class="flex items-center space-x-4">
            <img src="https://picsum.photos/50/50" alt="Logo" class="rounded-full">
            <span class="text-yellow-300 dark:text-yellow-200 text-2xl font-bold">MyCompany</span>
        </div>
        <div class="hidden md:flex space-x-6 text-white dark:text-gray-300">
            <a href="#" class="hover:text-yellow-300 dark:hover:text-yellow-200 transition">Home</a>
            <a href="#" class="hover:text-yellow-300 dark:hover:text-yellow-200 transition">About</a>
            <a href="#" class="hover:text-yellow-300 dark:hover:text-yellow-200 transition">Services</a>
            <a href="#" class="hover:text-yellow-300 dark:hover:text-yellow-200 transition">Contact</a>
        </div>
        <div class="relative">
            <button class="bg-yellow-300 dark:bg-yellow-200 text-black dark:text-black px-4 py-2 rounded-md hover:shadow-lg transition">Login</button>
            <div class="absolute right-0 mt-2 w-48 bg-white dark:bg-gray-800 rounded-md shadow-lg hidden group-hover:block">
                <a href="#" class="block px-4 py-2 text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">Profile</a>
                <a href="#" class="block px-4 py-2 text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">Settings</a>
                <a href="#" class="block px-4 py-2 text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">Logout</a>
            </div>
        </div>
        <div class="md:hidden">
            <button class="text-white dark:text-gray-300 focus:outline-none">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h16m-7 6h7" /></svg>
            </button>
        </div>
    </div>
</nav>

<section class="bg-gray-100 dark:bg-gray-900 py-10">
    <div class="max-w-7xl mx-auto text-center">
        <h1 class="text-4xl font-bold text-green-500 dark:text-green-400">Welcome to our Retro Business</h1>
        <p class="mt-2 text-gray-700 dark:text-gray-400">Bringing you the best services with a touch of nostalgia.</p>
        <div class="mt-6 grid grid-cols-1 md:grid-cols-3 gap-4">
            <div class="p-4 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
                <img src="https://picsum.photos/200/200?random=1" alt="Service 1" class="rounded-lg mb-4">
                <h2 class="text-xl font-semibold">Service One</h2>
                <p class="text-gray-600 dark:text-gray-300">Description of service 1.</p>
            </div>
            <div class="p-4 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
                <img src="https://picsum.photos/200/200?random=2" alt="Service 2" class="rounded-lg mb-4">
                <h2 class="text-xl font-semibold">Service Two</h2>
                <p class="text-gray-600 dark:text-gray-300">Description of service 2.</p>
            </div>
            <div class="p-4 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
                <img src="https://picsum.photos/200/200?random=3" alt="Service 3" class="rounded-lg mb-4">
                <h2 class="text-xl font-semibold">Service Three</h2>
                <p class="text-gray-600 dark:text-gray-300">Description of service 3.</p>
            </div>
        </div>
    </div>
</section>

Layout Components Component

A responsive dashboard layout component with a dark theme, featuring a sidebar and a main content area. It uses a triadic color scheme for visual appeal.

Open Preview

                <div class="min-h-screen flex flex-col bg-gray-900 text-gray-200">
  <!-- Header -->
  <header class="flex items-center justify-between p-4 bg-gray-800 shadow-md">
    <h1 class="text-2xl font-bold text-cyan-400">Dashboard</h1>
    <nav>
      <ul class="flex space-x-4">
        <li><a href="#" class="text-orange-400 hover:text-orange-300">Home</a></li>
        <li><a href="#" class="text-orange-400 hover:text-orange-300">Settings</a></li>
        <li><a href="#" class="text-orange-400 hover:text-orange-300">Profile</a></li>
      </ul>
    </nav>
  </header>

  <!-- Main Content Area -->
  <div class="flex flex-1 flex-col md:flex-row">
    <!-- Sidebar -->
    <aside class="w-full md:w-64 bg-gray-800 p-4 shadow-lg">
      <nav>
        <ul class="space-y-4">
          <li><a href="#" class="block text-lime-400 hover:text-lime-300">Overview</a></li>
          <li><a href="#" class="block text-lime-400 hover:text-lime-300">Analytics</a></li>
          <li><a href="#" class="block text-lime-400 hover:text-lime-300">Reports</a></li>
          <li><a href="#" class="block text-lime-400 hover:text-lime-300">Users</a></li>
        </ul>
      </nav>
    </aside>

    <!-- Content -->
    <main class="flex-1 p-6">
      <h2 class="text-3xl font-semibold mb-6 text-cyan-400">Welcome to your Dashboard</h2>
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <!-- Card 1 -->
        <div class="bg-gray-800 dark:bg-gray-700 p-6 rounded-lg shadow-md">
          <h3 class="text-xl font-bold mb-2 text-orange-400">Total Sales</h3>
          <p class="text-3xl font-bold text-gray-100">$12,345</p>
        </div>
        <!-- Card 2 -->
        <div class="bg-gray-800 dark:bg-gray-700 p-6 rounded-lg shadow-md">
          <h3 class="text-xl font-bold mb-2 text-lime-400">New Customers</h3>
          <p class="text-3xl font-bold text-gray-100">256</p>
        </div>
        <!-- Card 3 -->
        <div class="bg-gray-800 dark:bg-gray-700 p-6 rounded-lg shadow-md">
          <h3 class="text-xl font-bold mb-2 text-cyan-400">Page Views</h3>
          <p class="text-3xl font-bold text-gray-100">8,765</p>
        </div>
      </div>

      <!-- Example Data Table -->
      <div class="mt-8 bg-gray-800 dark:bg-gray-700 p-6 rounded-lg shadow-md">
        <h3 class="text-xl font-bold mb-4 text-cyan-400">Recent Orders</h3>
        <div class="overflow-x-auto">
          <table class="min-w-full leading-normal">
            <thead>
              <tr>
                <th class="px-5 py-3 border-b-2 border-gray-700 bg-gray-700 text-left text-xs font-semibold text-gray-300 uppercase tracking-wider">Order ID</th>
                <th class="px-5 py-3 border-b-2 border-gray-700 bg-gray-700 text-left text-xs font-semibold text-gray-300 uppercase tracking-wider">Product</th>
                <th class="px-5 py-3 border-b-2 border-gray-700 bg-gray-700 text-left text-xs font-semibold text-gray-300 uppercase tracking-wider">Amount</th>
                <th class="px-5 py-3 border-b-2 border-gray-700 bg-gray-700 text-left text-xs font-semibold text-gray-300 uppercase tracking-wider">Status</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td class="px-5 py-5 border-b border-gray-700 bg-gray-800 text-sm text-gray-200">#1001</td>
                <td class="px-5 py-5 border-b border-gray-700 bg-gray-800 text-sm text-lime-400">Laptop Pro</td>
                <td class="px-5 py-5 border-b border-gray-700 bg-gray-800 text-sm text-gray-200">$999</td>
                <td class="px-5 py-5 border-b border-gray-700 bg-gray-800 text-sm text-green-400">Completed</td>
              </tr>
              <tr>
                <td class="px-5 py-5 border-b border-gray-700 bg-gray-800 text-sm text-gray-200">#1002</td>
                <td class="px-5 py-5 border-b border-gray-700 bg-gray-800 text-sm text-orange-400">Mechanical Keyboard</td>
                <td class="px-5 py-5 border-b border-gray-700 bg-gray-800 text-sm text-gray-200">$120</td>
                <td class="px-5 py-5 border-b border-gray-700 bg-gray-800 text-sm text-amber-400">Pending</td>
              </tr>
              <tr>
                <td class="px-5 py-5 border-b border-gray-700 bg-gray-800 text-sm text-gray-200">#1003</td>
                <td class="px-5 py-5 border-b border-gray-700 bg-gray-800 text-sm text-cyan-400">Wireless Mouse</td>
                <td class="px-5 py-5 border-b border-gray-700 bg-gray-800 text-sm text-gray-200">$50</td>
                <td class="px-5 py-5 border-b border-gray-700 bg-gray-800 text-sm text-green-400">Completed</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </main>
  </div>
</div>

A responsive dropdown menu component for social media interfaces, with a dark theme and pastel color scheme. It's a complex component with multiple interactive elements, designed to reduce eye strain.

Open Preview

                <div class="dark:bg-gray-900 min-h-screen p-8">
  <div class="relative inline-block text-left">
    <div>
      <button type="button" class="inline-flex justify-center w-full rounded-md border border-gray-300 dark:border-gray-700 shadow-sm px-4 py-2 bg-white dark:bg-gray-800 text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-900" id="options-menu" aria-haspopup="true" aria-expanded="true">
        Options
        <svg class="-mr-1 ml-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
        </svg>
      </button>
    </div>

    <div class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5 divide-y divide-gray-100 dark:divide-gray-700" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
      <div class="py-1">
        <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-indigo-100 dark:hover:bg-indigo-600 hover:text-indigo-900 dark:hover:text-white" role="menuitem">
          <div class="flex items-center">
            <img class="h-6 w-6 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/1.jpg" alt="">
            <span>Profile</span>
          </div>
        </a>
        <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-indigo-100 dark:hover:bg-indigo-600 hover:text-indigo-900 dark:hover:text-white" role="menuitem">
          <div class="flex items-center">
            <img class="h-6 w-6 rounded-full mr-2" src="https://randomuser.me/api/portraits/women/1.jpg" alt="">
            <span>Friends</span>
          </div>
        </a>
      </div>
      <div class="py-1">
        <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-indigo-100 dark:hover:bg-indigo-600 hover:text-indigo-900 dark:hover:text-white" role="menuitem">Settings</a>
        <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-indigo-100 dark:hover:bg-indigo-600 hover:text-indigo-900 dark:hover:text-white" role="menuitem">Notifications
          <span class="inline-flex items-center justify-center px-2 py-0.5 ml-2 text-xs font-semibold leading-none text-red-100 dark:text-red-800 bg-red-600 dark:bg-red-200 rounded-full">3</span>
        </a>
      </div>
      <div class="py-1">
        <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-indigo-100 dark:hover:bg-indigo-600 hover:text-indigo-900 dark:hover:text-white" role="menuitem">Share Post</a>
        <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-indigo-100 dark:hover:bg-indigo-600 hover:text-indigo-900 dark:hover:text-white" role="menuitem">Logout</a>
      </div>
    </div>
  </div>
</div>

File Viewer Component

A responsive file viewer component designed for e-commerce websites in dark mode with a monochromatic color scheme. It includes interactive features like file upload and preview.

Open Preview

                <div class="bg-gray-800 text-gray-200 p-6 rounded-lg shadow-lg max-w-lg mx-auto">
    <h2 class="text-2xl font-semibold mb-4">File Viewer</h2>
    <div class="mb-4">
        <label class="block mb-2">Upload File:</label>
        <input type="file" class="bg-gray-900 text-gray-200 p-2 border border-gray-600 rounded w-full" />
    </div>
    <div class="mt-4">
        <h3 class="text-xl mb-2">File Preview:</h3>
        <div class="bg-gray-700 p-4 rounded">
            <img src="https://picsum.photos/300/200" alt="Preview" class="w-full rounded" />
        </div>
        <div class="flex items-center mt-2">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2" />
            <div>
                <span class="font-bold">Uploaded by:</span> John Doe
            </div>
        </div>
    </div>
    <div class="mt-4">
        <button class="bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded">
            Confirm Upload
        </button>
    </div>
</div>

1 ... 155 156 157 158 159 ... 335

Search Components

Categories

All Components

Brutalist Forms Component

Notifications Component

Skeuomorphic Audio Player

Product Reviews Component

Brutalist Search Box

Authentication Components Component

Navigation Enhancement Components

Layout Components Component

Dropdown Menu Component

File Viewer Component