Components Filters Forum Filters Component
Forum Filters Component

A responsive forum filters component with a 3D design aesthetic, autumn color scheme, and dark mode support, suitable for community platforms.
Preview

HTML Code

<div class="p-4 sm:p-6 lg:p-8 bg-gradient-to-br from-orange-100 to-amber-200 dark:from-gray-800 dark:to-gray-900 min-h-screen font-sans antialiased text-gray-800 dark:text-gray-200">

  <!-- Component Container with 3D Card Effect -->
  <div class="max-w-4xl mx-auto bg-white dark:bg-gray-700 rounded-3xl shadow-xl border-t border-r border-orange-200 dark:border-gray-600
              transform perspective-1000 rotate-x-3 rotate-y-2 translate-z-10
              transition-all duration-500 hover:rotate-x-0 hover:rotate-y-0 hover:translate-z-0
              p-6 sm:p-8 lg:p-10 relative overflow-hidden">

    <!-- Background Grain/Texture Overlay -->
    <div class="absolute inset-0 z-0 opacity-10 dark:opacity-5 bg-[url('https://www.transparenttextures.com/patterns/lined-paper.png')] dark:bg-[url('https://www.transparenttextures.com/patterns/stardust.png')] pointer-events-none"></div>

    <div class="relative z-10">
      <h2 class="text-3xl sm:text-4xl font-extrabold text-brown-800 dark:text-orange-300 mb-6 sm:mb-8 text-center
                 drop-shadow-lg [text-shadow:_2px_2px_4px_rgb(0_0_0_/_0.2)] dark:[text-shadow:_2px_2px_4px_rgb(255_165_0_/_0.2)]">
        Forum Discussions
      </h2>

      <!-- Search Bar -->
      <div class="mb-6 sm:mb-8 relative">
        <input type="text" placeholder="Search discussions..." class="w-full p-3 sm:p-4 pr-12 rounded-xl bg-orange-50 dark:bg-gray-600 border border-orange-200 dark:border-gray-500 text-gray-800 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400
                      focus:outline-none focus:ring-4 focus:ring-orange-300 dark:focus:ring-orange-500 focus:border-transparent
                      shadow-inner transition-all duration-300 transform translate-z-5 hover:scale-100.5">
        <svg class="absolute right-4 top-1/2 -translate-y-1/2 w-6 h-6 text-orange-500 dark:text-orange-400" 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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
        </svg>
      </div>

      <!-- Filter Section -->
      <div class="grid grid-cols-1 md:grid-cols-2 gap-6 sm:gap-8">

        <!-- Category Filter -->
        <div class="bg-orange-100 dark:bg-gray-600 p-4 rounded-xl shadow-md border border-orange-200 dark:border-gray-500
                    transform translate-z-8 transition-all duration-300 hover:shadow-lg hover:transform hover:translate-z-10">
          <label for="category" class="block text-lg font-semibold text-brown-700 dark:text-orange-200 mb-2
                        [text-shadow:_1px_1px_2px_rgb(0_0_0_/_0.1)]">Category</label>
          <select id="category" class="w-full p-3 rounded-lg bg-white dark:bg-gray-700 border border-orange-200 dark:border-gray-500 text-gray-800 dark:text-gray-100
                        focus:outline-none focus:ring-2 focus:ring-orange-400 dark:focus:ring-orange-600 focus:border-transparent
                        shadow-sm appearance-none transition-all duration-200 transform translate-z-2">
            <option value="all">All Categories</option>
            <option value="general">General Discussion</option>
            <option value="announcements">Announcements</option>
            <option value="support">Support</option>
            <option value="feedback">Feedback</option>
            <option value="suggestions">Suggestions</option>
          </select>
        </div>

        <!-- Sort By Filter -->
        <div class="bg-orange-100 dark:bg-gray-600 p-4 rounded-xl shadow-md border border-orange-200 dark:border-gray-500
                    transform translate-z-8 transition-all duration-300 hover:shadow-lg hover:transform hover:translate-z-10">
          <label for="sort-by" class="block text-lg font-semibold text-brown-700 dark:text-orange-200 mb-2
                        [text-shadow:_1px_1px_2px_rgb(0_0_0_/_0.1)]">Sort By</label>
          <select id="sort-by" class="w-full p-3 rounded-lg bg-white dark:bg-gray-700 border border-orange-200 dark:border-gray-500 text-gray-800 dark:text-gray-100
                        focus:outline-none focus:ring-2 focus:ring-orange-400 dark:focus:ring-orange-600 focus:border-transparent
                        shadow-sm appearance-none transition-all duration-200 transform translate-z-2">
            <option value="latest">Latest Activity</option>
            <option value="popular">Most Popular</option>
            <option value="newest">Newest Posts</option>
            <option value="oldest">Oldest Posts</option>
          </select>
        </div>

        <!-- Status Filter -->
        <div class="bg-orange-100 dark:bg-gray-600 p-4 rounded-xl shadow-md border border-orange-200 dark:border-gray-500
                    transform translate-z-8 transition-all duration-300 hover:shadow-lg hover:transform hover:translate-z-10">
          <label for="status" class="block text-lg font-semibold text-brown-700 dark:text-orange-200 mb-2
                        [text-shadow:_1px_1px_2px_rgb(0_0_0_/_0.1)]">Status</label>
          <select id="status" class="w-full p-3 rounded-lg bg-white dark:bg-gray-700 border border-orange-200 dark:border-gray-500 text-gray-800 dark:text-gray-100
                        focus:outline-none focus:ring-2 focus:ring-orange-400 dark:focus:ring-orange-600 focus:border-transparent
                        shadow-sm appearance-none transition-all duration-200 transform translate-z-2">
            <option value="all">All Statuses</option>
            <option value="open">Open</option>
            <option value="resolved">Resolved</option>
            <option value="locked">Locked</option>
          </select>
        </div>

        <!-- Tags Filter (Multi-select style) -->
        <div class="bg-orange-100 dark:bg-gray-600 p-4 rounded-xl shadow-md border border-orange-200 dark:border-gray-500
                    transform translate-z-8 transition-all duration-300 hover:shadow-lg hover:transform hover:translate-z-10">
          <label class="block text-lg font-semibold text-brown-700 dark:text-orange-200 mb-2
                        [text-shadow:_1px_1px_2px_rgb(0_0_0_/_0.1)]">Tags</label>
          <div class="flex flex-wrap gap-2">
            <button class="px-4 py-1.5 rounded-full bg-orange-300 dark:bg-orange-700 text-brown-900 dark:text-orange-100 text-sm font-medium
                           hover:bg-orange-400 dark:hover:bg-orange-600 transition-colors duration-200
                           shadow-sm hover:shadow-md transform translate-z-3 hover:translate-z-4">CSS</button>
            <button class="px-4 py-1.5 rounded-full bg-orange-300 dark:bg-orange-700 text-brown-900 dark:text-orange-100 text-sm font-medium
                           hover:bg-orange-400 dark:hover:bg-orange-600 transition-colors duration-200
                           shadow-sm hover:shadow-md transform translate-z-3 hover:translate-z-4">HTML</button>
            <button class="px-4 py-1.5 rounded-full bg-orange-300 dark:bg-orange-700 text-brown-900 dark:text-orange-100 text-sm font-medium
                           hover:bg-orange-400 dark:hover:bg-orange-600 transition-colors duration-200
                           shadow-sm hover:shadow-md transform translate-z-3 hover:translate-z-4">JavaScript</button>
            <button class="px-4 py-1.5 rounded-full bg-orange-300 dark:bg-orange-700 text-brown-900 dark:text-orange-100 text-sm font-medium
                           hover:bg-orange-400 dark:hover:bg-orange-600 transition-colors duration-200
                           shadow-sm hover:shadow-md transform translate-z-3 hover:translate-z-4">Tailwind</button>
             <button class="px-4 py-1.5 rounded-full bg-orange-300 dark:bg-orange-700 text-brown-900 dark:text-orange-100 text-sm font-medium
                           hover:bg-orange-400 dark:hover:bg-orange-600 transition-colors duration-200
                           shadow-sm hover:shadow-md transform translate-z-3 hover:translate-z-4">UI/UX</button>
          </div>
        </div>

      </div>

      <!-- Action Buttons -->
      <div class="mt-8 flex justify-end gap-4">
        <button class="px-6 py-3 rounded-full bg-gradient-to-r from-red-600 to-red-800 dark:from-red-700 dark:to-red-900 text-white font-semibold shadow-lg
                       transform translate-z-10 hover:translate-z-12 hover:scale-105 transition-all duration-300
                       focus:outline-none focus:ring-4 focus:ring-red-300 dark:focus:ring-red-600">
          <span class="relative z-10">Reset Filters</span>
          <span class="absolute inset-0 rounded-full opacity-0 hover:opacity-100 bg-red-700 dark:bg-red-800 transition-opacity duration-300"></span>
        </button>
        <button class="px-6 py-3 rounded-full bg-gradient-to-r from-orange-500 to-orange-700 dark:from-orange-600 dark:to-orange-800 text-white font-semibold shadow-lg
                       transform translate-z-10 hover:translate-z-12 hover:scale-105 transition-all duration-300
                       focus:outline-none focus:ring-4 focus:ring-orange-300 dark:focus:ring-orange-600">
          <span class="relative z-10">Apply Filters</span>
          <span class="absolute inset-0 rounded-full opacity-0 hover:opacity-100 bg-orange-600 dark:bg-orange-700 transition-opacity duration-300"></span>
        </button>
      </div>
    </div>
  </div>

  <!-- Custom Styles for 3D Perspective -->
  <style>
    .perspective-1000 {
      perspective: 1000px;
    }

    .rotate-x-3 {
      transform: rotateX(3deg);
    }

    .rotate-y-2 {
      transform: rotateY(2deg);
    }

    .translate-z-10 {
      transform: translateZ(10px);
    }

    .translate-z-8 {
      transform: translateZ(8px);
    }

    .translate-z-5 {
      transform: translateZ(5px);
    }

    .translate-z-4 {
      transform: translateZ(4px);
    }

    .translate-z-3 {
      transform: translateZ(3px);
    }

    .translate-z-2 {
      transform: translateZ(2px);
    }

    .translate-z-12 {
        transform: translateZ(12px);
    }

     /* Ensure children maintain 3D context */
    .perspective-1000 > * {
      transform-style: preserve-3d;
    }

    .shadow-lg[class*="transform"]:hover, .shadow-md[class*="transform"]:hover {
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    }

    @media (prefers-color-scheme: dark) {
        body {
            background-color: #1a202c; /* Ensure dark mode body background is set */
        }
    }
  </style>
</div>
Related Components

Filters Component

A responsive Filters Component designed for dark mode UI using Tailwind CSS. It includes options to filter content, uses dark backgrounds, and saves battery life.
Open
FiltersComponent

A responsive Filters Component designed in Material Design style for E-commerce applications with a dark theme support. It includes multiple interactive elements for an enhanced shopping experience.
Open
Glassmorphism_EarthTones_SocialMedia_Filters

A complex, responsive social media filters component with a glassmorphism design, earth-tone color scheme, and full dark mode support. Features frosted glass-like translucent elements with blur effects, semantic HTML, and interactive filter options.
Open