Search Components

Community Forum

Discussion board for community interaction

Community Forum Component

A simple, clean, and trustworthy community forum component designed for sports/fitness applications, featuring a multi-color gradient scheme and full responsiveness with dark mode support.

Open Preview

                <div class="p-4 sm:p-6 md:p-8 bg-gray-50 dark:bg-gray-900 rounded-lg shadow-lg max-w-4xl mx-auto font-sans">
  <div class="text-center mb-6 sm:mb-8">
    <h2 class="text-2xl sm:text-3xl md:text-4xl font-extrabold pb-2 text-transparent bg-clip-text bg-gradient-to-r from-red-500 via-yellow-500 to-green-500 dark:from-red-400 dark:via-yellow-400 dark:to-green-400">
      Team Talk Hub
    </h2>
    <p class="text-gray-600 dark:text-gray-300 text-sm sm:text-base leading-relaxed">
      Connect with your teammates and discuss game strategies.
    </p>
  </div>

  <div class="space-y-4">
    <!-- Forum Post 1 -->
    <article class="bg-white dark:bg-gray-800 p-4 sm:p-5 rounded-lg shadow-md border border-gray-100 dark:border-gray-700 transition-all duration-300 hover:shadow-lg">
      <div class="flex items-center mb-3">
        <img class="w-8 h-8 sm:w-10 sm:h-10 rounded-full mr-3 border-2 border-transparent bg-gradient-to-r from-blue-500 to-purple-500 p-0.5" src="https://randomuser.me/api/portraits/men/45.jpg" alt="Avatar of John Doe">
        <div>
          <h4 class="font-semibold text-gray-900 dark:text-white text-base sm:text-lg">John Doe</h4>
          <p class="text-gray-500 dark:text-gray-400 text-xs sm:text-sm">2 hours ago</p>
        </div>
      </div>
      <p class="text-gray-700 dark:text-gray-200 text-sm sm:text-base leading-relaxed mb-3">
        Great effort everyone in training today! Let's keep up the intensity for Saturday's match. Any thoughts on offensive plays?
      </p>
      <button class="text-blue-600 dark:text-blue-400 hover:underline text-sm font-medium focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
        Reply
      </button>
    </article>

    <!-- Forum Post 2 -->
    <article class="bg-white dark:bg-gray-800 p-4 sm:p-5 rounded-lg shadow-md border border-gray-100 dark:border-gray-700 transition-all duration-300 hover:shadow-lg">
      <div class="flex items-center mb-3">
        <img class="w-8 h-8 sm:w-10 sm:h-10 rounded-full mr-3 border-2 border-transparent bg-gradient-to-r from-teal-500 to-cyan-500 p-0.5" src="https://randomuser.me/api/portraits/women/67.jpg" alt="Avatar of Jane Smith">
        <div>
          <h4 class="font-semibold text-gray-900 dark:text-white text-base sm:text-lg">Jane Smith</h4>
          <p class="text-gray-500 dark:text-gray-400 text-xs sm:text-sm">1 hour ago</p>
        </div>
      </div>
      <p class="text-gray-700 dark:text-gray-200 text-sm sm:text-base leading-relaxed mb-3">
        I agree, John! Maybe we could try that new set piece we practiced? It felt really strong. Looking forward to the game!
      </p>
      <button class="text-blue-600 dark:text-blue-400 hover:underline text-sm font-medium focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
        Reply
      </button>
    </article>
  </div>

  <div class="mt-6 sm:mt-8">
    <button class="w-full py-2 px-4 rounded-lg font-semibold text-white bg-gradient-to-r from-purple-600 via-pink-600 to-red-600 dark:from-purple-500 dark:via-pink-500 dark:to-red-500 hover:from-purple-700 hover:via-pink-700 hover:to-red-700 dark:hover:from-purple-600 dark:hover:via-pink-600 dark:hover:to-red-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 dark:focus:ring-offset-gray-900 transition-colors duration-300">
      Create New Post
    </button>
  </div>
</div>

Art Deco Finance Forum Component

A simple, responsive community forum component designed in a muted Art Deco style suitable for finance and banking interfaces, with dark mode support.

Open Preview

                <div class="font-sans bg-gray-100 dark:bg-zinc-900 min-h-screen p-4 sm:p-6 lg:p-8 flex items-center justify-center">
  <div class="w-full max-w-4xl bg-gradient-to-br from-amber-50 to-emerald-50 dark:from-zinc-800 dark:to-zinc-950 rounded-lg shadow-xl overflow-hidden border-2 border-amber-200 dark:border-zinc-700
    transform skew-y-1 scale-95 md:skew-y-0 md:scale-100 transition-all duration-500 ease-in-out">
    <div class="transform -skew-y-1 md:skew-y-0">
      <div class="p-6 sm:p-8 border-b-2 border-amber-200 dark:border-zinc-700">
        <h2 class="text-2xl sm:text-3xl font-bold text-gray-800 dark:text-gray-100 mb-2 tracking-wide">
          <span class="text-amber-700 dark:text-amber-300">Forum:</span> Investment Insights
        </h2>
        <p class="text-gray-600 dark:text-gray-400 text-sm sm:text-base">Discuss market trends, strategies, and financial news.</p>
      </div>

      <div class="p-6 sm:p-8 space-y-6">
        <!-- Forum Post 1 -->
        <div class="bg-white dark:bg-zinc-800 rounded-md p-4 sm:p-5 shadow-md border border-amber-100 dark:border-zinc-700">
          <div class="flex items-center mb-3">
            <img class="w-10 h-10 rounded-full mr-3 border-2 border-amber-300 dark:border-amber-500" src="https://randomuser.me/api/portraits/men/5.jpg" alt="User Avatar">
            <div>
              <p class="font-semibold text-gray-800 dark:text-gray-200">John Doe</p>
              <p class="text-xs text-gray-500 dark:text-gray-400">2 hours ago</p>
            </div>
          </div>
          <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-2">The Future of Digital Banking</h3>
          <p class="text-gray-700 dark:text-gray-300 text-sm leading-relaxed">
            "What are your thoughts on blockchain integration in traditional banking systems? Is it a threat or an opportunity for growth?"
          </p>
          <div class="mt-4 flex justify-between items-center text-gray-600 dark:text-gray-400 text-sm">
            <div class="flex items-center space-x-4">
              <span class="flex items-center"><svg class="w-4 h-4 mr-1 text-amber-600 dark:text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M18 10c0 3.866-3.582 7-8 7a8.841 8.841 0 01-4 1.135V18l-2 1v-2L1 15V5c0-2.209 4.03-4 9-4s9 1.791 9 4v5zm-5 0h2v2h-2v-2z" clip-rule="evenodd"></path></svg> 12 Comments</span>
            </div>
            <span class="px-3 py-1 bg-amber-100 dark:bg-zinc-700 text-amber-700 dark:text-amber-300 rounded-full text-xs font-medium">FinTech</span>
          </div>
        </div>

        <!-- Forum Post 2 -->
        <div class="bg-white dark:bg-zinc-800 rounded-md p-4 sm:p-5 shadow-md border border-amber-100 dark:border-zinc-700">
          <div class="flex items-center mb-3">
            <img class="w-10 h-10 rounded-full mr-3 border-2 border-amber-300 dark:border-amber-500" src="https://randomuser.me/api/portraits/women/8.jpg" alt="User Avatar">
            <div>
              <p class="font-semibold text-gray-800 dark:text-gray-200">Jane Smith</p>
              <p class="text-xs text-gray-500 dark:text-gray-400">4 hours ago</p>
            </div>
          </div>
          <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-2">Understanding ESG Investing</h3>
          <p class="text-gray-700 dark:text-gray-300 text-sm leading-relaxed">
            "I'm looking into ESG (Environmental, Social, and Governance) funds. Any recommendations or pitfalls to be aware of?"
          </p>
          <div class="mt-4 flex justify-between items-center text-gray-600 dark:text-gray-400 text-sm">
            <div class="flex items-center space-x-4">
              <span class="flex items-center"><svg class="w-4 h-4 mr-1 text-amber-600 dark:text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M18 10c0 3.866-3.582 7-8 7a8.841 8.841 0 01-4 1.135V18l-2 1v-2L1 15V5c0-2.209 4.03-4 9-4s9 1.791 9 4v5zm-5 0h2v2h-2v-2z" clip-rule="evenodd"></path></svg> 8 Comments</span>
            </div>
            <span class="px-3 py-1 bg-amber-100 dark:bg-zinc-700 text-amber-700 dark:text-amber-300 rounded-full text-xs font-medium">Sustainability</span>
          </div>
        </div>
      </div>

      <div class="p-6 sm:p-8 border-t-2 border-amber-200 dark:border-zinc-700 flex justify-center">
        <button class="px-6 py-2 bg-amber-600 hover:bg-amber-700 dark:bg-amber-700 dark:hover:bg-amber-600 text-white font-semibold rounded-md shadow-lg transition duration-300 ease-in-out
          transform hover:scale-105 active:scale-95 border-2 border-amber-700 dark:border-amber-800">
          View All Discussions
        </button>
      </div>
    </div>
  </div>
</div>

Community Forum Component

A responsive community forum component designed with a Skeuomorphism style and a muted/desaturated color scheme, suitable for government/public websites, including dark mode support.

Open Preview

                <div class="p-4 sm:p-6 lg:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen font-sans">
  <div class="max-w-6xl mx-auto bg-gray-200 dark:bg-gray-800 rounded-3xl shadow-xl border border-gray-300 dark:border-gray-700 p-6 sm:p-8 lg:p-10 transition-colors duration-300">

    <!-- Header -->
    <div class="mb-8 border-b border-gray-300 dark:border-gray-700 pb-4">
      <h1 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-gray-800 dark:text-gray-100 mb-2 drop-shadow-sm">
        <span class="text-gray-600 dark:text-gray-400">Public Forum</span> Discussion
      </h1>
      <p class="text-base sm:text-lg text-gray-600 dark:text-gray-400 leading-relaxed">
        Engage with your community, share ideas, and find answers.
      </p>
    </div>

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

      <!-- Left Sidebar: Forum Categories/Navigation -->
      <aside class="md:col-span-1">
        <div class="bg-gray-300 dark:bg-gray-700 rounded-2xl shadow-inner border border-gray-400 dark:border-gray-600 p-6 mb-8 transform-gpu perspective-1000">
          <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-5 pb-3 border-b border-gray-400 dark:border-gray-600 shadow-text-light dark:shadow-text-dark">
            Categories
          </h3>
          <nav class="space-y-4">
            <a href="#popular" class="flex items-center p-3 rounded-xl bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-800 dark:to-gray-700 shadow-md border border-gray-400 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:shadow-lg hover:translate-y-px active:shadow-inner active:translate-y-0 transition-all duration-200 group">
              <svg class="w-6 h-6 mr-3 text-gray-500 dark:text-gray-400 group-hover:text-gray-600 dark:group-hover:text-gray-200" 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="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H2v-2a3 3 0 015.356-1.857M17 20v-2c0-.653-.16-1.283-.464-1.848m-.482-.696A7.902 7.902 0 0115 12c0-4.418-3.582-8-8-8S-.742 7.582 7 12c.091.247.199.489.317.727m-3.411 2.373a2.502 2.502 0 00-.776 1.761M12 19l4.5-4.5M12 19l-4.5-4.5M12 19v-6"></path></svg>
              <span class="font-medium text-gray-800 dark:text-gray-200">Popular Topics</span>
            </a>
            <a href="#local-issues" class="flex items-center p-3 rounded-xl bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-800 dark:to-gray-700 shadow-md border border-gray-400 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:shadow-lg hover:translate-y-px active:shadow-inner active:translate-y-0 transition-all duration-200 group">
              <svg class="w-6 h-6 mr-3 text-gray-500 dark:text-gray-400 group-hover:text-gray-600 dark:group-hover:text-gray-200" 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="M17.657 16.727A8.999 8.999 0 017.009 6.002H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-1.727a9.001 9.001 0 01-.343-.45zM17 2v2M7 2v2M3 11h18"></path></svg>
              <span class="font-medium text-gray-800 dark:text-gray-200">Local Issues</span>
            </a>
            <a href="#public-services" class="flex items-center p-3 rounded-xl bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-800 dark:to-gray-700 shadow-md border border-gray-400 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:shadow-lg hover:translate-y-px active:shadow-inner active:translate-y-0 transition-all duration-200 group">
              <svg class="w-6 h-6 mr-3 text-gray-500 dark:text-gray-400 group-hover:text-gray-600 dark:group-hover:text-gray-200" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M8.707 7.293a1 1 0 00-1.414 1.414L10.586 12H5a1 1 0 000 2h5.586l-3.293 3.293a1 1 0 101.414 1.414l5-5a1 1 0 000-1.414l-5-5z"></path></svg>
              <span class="font-medium text-gray-800 dark:text-gray-200">Public Services</span>
            </a>
            <a href="#feedback" class="flex items-center p-3 rounded-xl bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-800 dark:to-gray-700 shadow-md border border-gray-400 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:shadow-lg hover:translate-y-px active:shadow-inner active:translate-y-0 transition-all duration-200 group">
              <svg class="w-6 h-6 mr-3 text-gray-500 dark:text-gray-400 group-hover:text-gray-600 dark:group-hover:text-gray-200" 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="M7 8h10M7 12h10M7 16h10M4 6h16a2 2 0 012 2v8a2 2 0 01-2 2H4a2 2 0 01-2-2V8a2 2 0 012-2z"></path></svg>
              <span class="font-medium text-gray-800 dark:text-gray-200">Feedback & Suggestions</span>
            </a>
          </nav>
        </div>

        <!-- Search Bar -->
        <div class="bg-gray-300 dark:bg-gray-700 rounded-2xl shadow-inner border border-gray-400 dark:border-gray-600 p-6 transform-gpu perspective-1000">
          <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-5 pb-3 border-b border-gray-400 dark:border-gray-600 shadow-text-light dark:shadow-text-dark">
            Search Forum
          </h3>
          <div class="flex rounded-xl overflow-hidden shadow-md border border-gray-400 dark:border-gray-600">
            <input type="text" placeholder="Search discussions..." class="flex-grow p-3 bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 rounded-l-xl placeholder-gray-500 dark:placeholder-gray-400 transition-colors duration-200">
            <button class="p-3 bg-gradient-to-br from-gray-400 to-gray-500 dark:from-gray-600 dark:to-gray-700 text-white dark:text-gray-200 rounded-r-xl hover:from-gray-500 hover:to-gray-600 dark:hover:from-gray-700 dark:hover:to-gray-800 active:shadow-inner transition-all duration-200">
              <svg class="w-6 h-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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
            </button>
          </div>
        </div>
      </aside>

      <!-- Right Content: Topic List -->
      <main class="md:col-span-2">
        <div class="bg-gray-300 dark:bg-gray-700 rounded-2xl shadow-inner border border-gray-400 dark:border-gray-600 p-6 transform-gpu perspective-1000">
          <div class="flex flex-col sm:flex-row justify-between items-center mb-5 pb-3 border-b border-gray-400 dark:border-gray-600 shadow-text-light dark:shadow-text-dark">
            <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-4 sm:mb-0">Recent Discussions</h3>
            <button class="flex items-center px-5 py-2 rounded-xl bg-gradient-to-br from-blue-400 to-blue-500 dark:from-blue-600 dark:to-blue-700 text-white dark:text-gray-200 shadow-md hover:from-blue-500 hover:to-blue-600 dark:hover:from-blue-700 dark:hover:to-blue-800 active:shadow-inner active:translate-y-px transition-all duration-200">
              <svg class="w-5 h-5 mr-2" 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="M12 6v6m0 0v6m0-6h6m-6 0H6"></path></svg>
              New Topic
            </button>
          </div>

          <div class="space-y-6">

            <!-- Topic Item 1 -->
            <article class="bg-gray-200 dark:bg-gray-800 rounded-xl shadow-md border border-gray-300 dark:border-gray-700 p-5 transition-transform duration-200 hover:scale-[1.01] transform-gpu perspective-1000 transform active:shadow-inner active:translate-y-0">
              <div class="flex items-start mb-3">
                <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-gray-400 dark:border-gray-600 shadow-sm mr-4 flex-shrink-0">
                <div>
                  <h4 class="text-lg font-semibold text-gray-800 dark:text-gray-100 leading-tight mb-1">
                    <a href="#" class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200">Proposal for New Community Garden Project</a>
                  </h4>
                  <p class="text-sm text-gray-600 dark:text-gray-400">
                    Posted by <span class="font-medium text-gray-700 dark:text-gray-300">Jane Doe</span> in <span class="text-blue-500 dark:text-blue-400">Local Issues</span> • 2 hours ago
                  </p>
                </div>
              </div>
              <p class="text-gray-700 dark:text-gray-300 mb-4 leading-relaxed line-clamp-2">
                We are proposing to create a new community garden on the vacant lot at 123 Main Street. This initiative aims to foster community spirit, enhance local biodiversity, and provide fresh produce for residents. We need your feedback and support to make this happen.
              </p>
              <div class="flex justify-between items-center text-sm text-gray-600 dark:text-gray-400">
                <div class="flex items-center space-x-4">
                  <span class="flex items-center"><svg class="w-4 h-4 mr-1 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10c0 3.866-3.582 7-8 7a8.841 8.841 0 01-4.746-1.391 12.025 12.025 0 005.139 1.488s1.651.52 3.607 0c.939-.244 1.761-.692 2.456-1.282A7.986 7.986 0 0018 10zm-11.414-.586a1 1 0 00-1.414 1.414L7.586 13 4.293 9.707a1 1 0 00-1.414 1.414l4 4a1 1 0 001.414 0l6-6a1 1 0 00-1.414-1.414L10 11.586l-2.586-2.586z" clip-rule="evenodd"></path></svg> 24 replies</span>
                  <span class="flex items-center"><svg class="w-4 h-4 mr-1 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7 4a3 3 0 016 0v1a3 3 0 11-6 0V4zm0 6a3 3 0 016 0v5a3 3 0 11-6 0v-5zm0 9a1 1 0 100 2h6a1 1 0 100-2H7z" clip-rule="evenodd"></path></svg> 120 views</span>
                </div>
                <a href="#" class="text-blue-500 dark:text-blue-400 font-medium hover:underline">Read More</a>
              </div>
            </article>

            <!-- Topic Item 2 -->
            <article class="bg-gray-200 dark:bg-gray-800 rounded-xl shadow-md border border-gray-300 dark:border-gray-700 p-5 transition-transform duration-200 hover:scale-[1.01] transform-gpu perspective-1000 transform active:shadow-inner active:translate-y-0">
              <div class="flex items-start mb-3">
                <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-gray-400 dark:border-gray-600 shadow-sm mr-4 flex-shrink-0">
                <div>
                  <h4 class="text-lg font-semibold text-gray-800 dark:text-gray-100 leading-tight mb-1">
                    <a href="#" class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200">Questions about new recycling program guidelines</a>
                  </h4>
                  <p class="text-sm text-gray-600 dark:text-gray-400">
                    Posted by <span class="font-medium text-gray-700 dark:text-gray-300">John Smith</span> in <span class="text-blue-500 dark:text-blue-400">Public Services</span> • 1 day ago
                  </p>
                </div>
              </div>
              <p class="text-gray-700 dark:text-gray-300 mb-4 leading-relaxed line-clamp-2">
                I'm having trouble understanding the new guidelines for the residential recycling program. Specifically, what can and cannot be placed in the blue bin regarding plastic containers? Is rinsing still required, and are plastic bags now accepted?
              </p>
              <div class="flex justify-between items-center text-sm text-gray-600 dark:text-gray-400">
                <div class="flex items-center space-x-4">
                  <span class="flex items-center"><svg class="w-4 h-4 mr-1 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10c0 3.866-3.582 7-8 7a8.841 8.841 0 01-4.746-1.391 12.025 12.025 0 005.139 1.488s1.651.52 3.607 0c.939-.244 1.761-.692 2.456-1.282A7.986 7.986 0 0018 10zm-11.414-.586a1 1 0 00-1.414 1.414L7.586 13 4.293 9.707a1 1 0 00-1.414 1.414l4 4a1 1 0 001.414 0l6-6a1 1 0 00-1.414-1.414L10 11.586l-2.586-2.586z" clip-rule="evenodd"></path></svg> 48 replies</span>
                  <span class="flex items-center"><svg class="w-4 h-4 mr-1 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7 4a3 3 0 016 0v1a3 3 0 11-6 0V4zm0 6a3 3 0 016 0v5a3 3 0 11-6 0v-5zm0 9a1 1 0 100 2h6a1 1 0 100-2H7z" clip-rule="evenodd"></path></svg> 250 views</span>
                </div>
                <a href="#" class="text-blue-500 dark:text-blue-400 font-medium hover:underline">Read More</a>
              </div>
            </article>

            <!-- Topic Item 3 -->
            <article class="bg-gray-200 dark:bg-gray-800 rounded-xl shadow-md border border-gray-300 dark:border-gray-700 p-5 transition-transform duration-200 hover:scale-[1.01] transform-gpu perspective-1000 transform active:shadow-inner active:translate-y-0">
              <div class="flex items-start mb-3">
                <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-gray-400 dark:border-gray-600 shadow-sm mr-4 flex-shrink-0">
                <div>
                  <h4 class="text-lg font-semibold text-gray-800 dark:text-gray-100 leading-tight mb-1">
                    <a href="#" class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200">Feedback on City Park Renovation Plans</a>
                  </h4>
                  <p class="text-sm text-gray-600 dark:text-gray-400">
                    Posted by <span class="font-medium text-gray-700 dark:text-gray-300">Emily White</span> in <span class="text-blue-500 dark:text-blue-400">Feedback & Suggestions</span> • 3 days ago
                  </p>
                </div>
              </div>
              <p class="text-gray-700 dark:text-gray-300 mb-4 leading-relaxed line-clamp-2">
                I'd like to provide some feedback on the proposed city park renovation plans. While I appreciate the new playground, I'm concerned about the removal of natural green spaces. Could there be a balance to maintain some natural elements?
              </p>
              <div class="flex justify-between items-center text-sm text-gray-600 dark:text-gray-400">
                <div class="flex items-center space-x-4">
                  <span class="flex items-center"><svg class="w-4 h-4 mr-1 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10c0 3.866-3.582 7-8 7a8.841 8.841 0 01-4.746-1.391 12.025 12.025 0 005.139 1.488s1.651.52 3.607 0c.939-.244 1.761-.692 2.456-1.282A7.986 7.986 0 0018 10zm-11.414-.586a1 1 0 00-1.414 1.414L7.586 13 4.293 9.707a1 1 0 00-1.414 1.414l4 4a1 1 0 001.414 0l6-6a1 1 0 00-1.414-1.414L10 11.586l-2.586-2.586z" clip-rule="evenodd"></path></svg> 18 replies</span>
                  <span class="flex items-center"><svg class="w-4 h-4 mr-1 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7 4a3 3 0 016 0v1a3 3 0 11-6 0V4zm0 6a3 3 0 016 0v5a3 3 0 11-6 0v-5zm0 9a1 1 0 100 2h6a1 1 0 100-2H7z" clip-rule="evenodd"></path></svg> 98 views</span>
                </div>
                <a href="#" class="text-blue-500 dark:text-blue-400 font-medium hover:underline">Read More</a>
              </div>
            </article>

          </div>
        </div>
      </main>

    </div>
  </div>
</div>

Community Forum Component - Glassmorphism E-commerce

A glassmorphism-styled community forum component for e-commerce, featuring translucent elements, blur effects, and a triadic color scheme. Responsive with dark mode support.

Open Preview

                <div class="min-h-screen bg-gradient-to-br from-blue-300 via-pink-300 to-purple-400 dark:from-gray-900 dark:via-blue-950 dark:to-purple-950 p-4 sm:p-8 flex items-center justify-center font-sans">

  <div class="w-full max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-6 lg:gap-8">

    <!-- Left Panel: Categories / Navigation -->
    <div class="md:col-span-1 bg-white bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-3xl shadow-xl border border-white border-opacity-30 p-6 sm:p-8 dark:bg-gray-800 dark:bg-opacity-30 dark:border-gray-700 dark:border-opacity-50 flex flex-col space-y-6">
      <h2 class="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-white mb-4 drop-shadow-md">Forum Categories</h2>

      <nav class="space-y-3">
        <a href="#" class="flex items-center space-x-3 p-3 rounded-xl hover:bg-white hover:bg-opacity-30 transition duration-300 dark:hover:bg-gray-700 dark:hover:bg-opacity-40">
          <svg class="h-6 w-6 text-gray-800 dark:text-gray-100" 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="M9.75 17L9 20l-1 1h8l-1-1l-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path></svg>
          <span class="text-lg font-medium text-gray-800 dark:text-gray-100">General Discussion</span>
        </a>
        <a href="#" class="flex items-center space-x-3 p-3 rounded-xl hover:bg-white hover:bg-opacity-30 transition duration-300 dark:hover:bg-gray-700 dark:hover:bg-opacity-40">
          <svg class="h-6 w-6 text-gray-800 dark:text-gray-100" 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="M7 4v16M17 4v16M3 8h4m-4 8h4m10-8h4m-4 8h4M7 8a4 4 0 11-8 0 4 4 0 018 0zM17 8a4 4 0 11-8 0 4 4 0 018 0zM7 16a4 4 0 11-8 0 4 4 0 018 0zM17 16a4 4 0 11-8 0 4 4 0 018 0z"></path></svg>
          <span class="text-lg font-medium text-gray-800 dark:text-gray-100">Product Reviews</span>
        </a>
        <a href="#" class="flex items-center space-x-3 p-3 rounded-xl hover:bg-white hover:bg-opacity-30 transition duration-300 dark:hover:bg-gray-700 dark:hover:bg-opacity-40">
          <svg class="h-6 w-6 text-gray-800 dark:text-gray-100" 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="M12 8c-1.657 0-3 .895-3 2v2.219a2 2 0 00.5 1.625l1.625 1.625A2 2 0 0113.219 20H18a2 2 0 002-2V7.89l-3.24-3.24M12 8V7a4 4 0 00-4-4H5a2 2 0 00-2 2v3a2 2 0 002 2h3a2 2 0 002-2zM18 10a2 2 0 012-2h1a2 2 0 012 2v3a2 2 0 01-2 2h-1a2 2 0 01-2-2z"></path></svg>
          <span class="text-lg font-medium text-gray-800 dark:text-gray-100">Technical Support</span>
        </a>
        <a href="#" class="flex items-center space-x-3 p-3 rounded-xl hover:bg-white hover:bg-opacity-30 transition duration-300 dark:hover:bg-gray-700 dark:hover:bg-opacity-40">
          <svg class="h-6 w-6 text-gray-800 dark:text-gray-100" 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="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"></path></svg>
          <span class="text-lg font-medium text-gray-800 dark:text-gray-100">Shopping Tips & Deals</span>
        </a>
        <a href="#" class="flex items-center space-x-3 p-3 rounded-xl bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-40">
          <svg class="h-6 w-6 text-gray-800 dark:text-gray-100" 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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg>
          <span class="text-lg font-medium text-gray-800 dark:text-gray-100">New Topic</span>
        </a>
      </nav>

      <div class="mt-auto">
        <p class="text-sm text-gray-700 dark:text-gray-300">Community Guidelines & Rules</p>
        <a href="#" class="text-blue-700 dark:text-blue-400 hover:underline text-sm">Read More</a>
      </div>
    </div>

    <!-- Main Content: Forum Topics -->
    <div class="md:col-span-2 bg-white bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-3xl shadow-xl border border-white border-opacity-30 p-6 sm:p-8 dark:bg-gray-800 dark:bg-opacity-30 dark:border-gray-700 dark:border-opacity-50 flex flex-col space-y-6">

      <h2 class="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-white mb-4 drop-shadow-md">Recent Discussions</h2>

      <!-- Search and Filter -->
      <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4 mb-4">
        <input type="text" placeholder="Search discussions..." class="flex-1 p-3 rounded-xl bg-white bg-opacity-40 border border-white border-opacity-50 text-gray-900 placeholder-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-400 dark:bg-gray-700 dark:bg-opacity-50 dark:border-gray-600 dark:text-gray-100 dark:placeholder-gray-400">
        <select class="p-3 rounded-xl bg-white bg-opacity-40 border border-white border-opacity-50 text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-400 dark:bg-gray-700 dark:bg-opacity-50 dark:border-gray-600 dark:text-gray-100">
          <option>Sort by: Latest</option>
          <option>Sort by: Popular</option>
          <option>Sort by: Unanswered</option>
        </select>
      </div>

      <!-- Topic List -->
      <div class="space-y-4 flex-grow">

        <!-- Topic Card 1 -->
        <a href="#" class="block p-4 rounded-xl bg-white bg-opacity-30 hover:bg-opacity-50 transition duration-300 border border-white border-opacity-40 dark:bg-gray-700 dark:bg-opacity-40 dark:hover:bg-opacity-60 dark:border-gray-600">
          <div class="flex items-center space-x-3 mb-2">
            <img class="w-9 h-9 rounded-full object-cover border-2 border-purple-500 dark:border-purple-400" src="https://randomuser.me/api/portraits/women/6.jpg" alt="User Avatar">
            <div>
              <p class="text-lg font-semibold text-gray-900 dark:text-white">Best Vacuum Cleaner for Pet Hair?</p>
              <p class="text-sm text-gray-700 dark:text-gray-300">by SarahL, 2 hours ago in <span class="font-medium text-blue-700 dark:text-blue-400">Product Reviews</span></p>
            </div>
          </div>
          <p class="text-gray-800 dark:text-gray-200 line-clamp-2">Looking for recommendations on a powerful vacuum cleaner that can handle heavy pet shedding. Any suggestions or experiences?</p>
          <div class="flex items-center space-x-4 text-sm mt-3 text-gray-700 dark:text-gray-300">
            <span class="flex items-center"><svg class="w-4 h-4 mr-1" 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="M7 8h10M7 12h4m1-8v4m-4 8v4m-6-12H4a2 2 0 00-2 2v10a2 2 0 002 2h16a2 2 0 002-2V6a2 2 0 00-2-2H8l-4-4v4z"></path></svg> 24 Replies</span>
            <span class="flex items-center"><svg class="w-4 h-4 mr-1" 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="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path></svg> 1.2K Views</span>
          </div>
        </a>

        <!-- Topic Card 2 -->
        <a href="#" class="block p-4 rounded-xl bg-white bg-opacity-30 hover:bg-opacity-50 transition duration-300 border border-white border-opacity-40 dark:bg-gray-700 dark:bg-opacity-40 dark:hover:bg-opacity-60 dark:border-gray-600">
          <div class="flex items-center space-x-3 mb-2">
            <img class="w-9 h-9 rounded-full object-cover border-2 border-sky-500 dark:border-sky-400" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
            <div>
              <p class="text-lg font-semibold text-gray-900 dark:text-white">Tips for finding the best online deals</p>
              <p class="text-sm text-gray-700 dark:text-gray-300">by DealHunter, 5 hours ago in <span class="font-medium text-purple-700 dark:text-purple-400">Shopping Tips & Deals</span></p>
            </div>
          </div>
          <p class="text-gray-800 dark:text-gray-200 line-clamp-2">Share your secret tips and tricks for snagging the best discounts and promotions online.</p>
          <div class="flex items-center space-x-4 text-sm mt-3 text-gray-700 dark:text-gray-300">
            <span class="flex items-center"><svg class="w-4 h-4 mr-1" 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="M7 8h10M7 12h4m1-8v4m-4 8v4m-6-12H4a2 2 0 00-2 2v10a2 2 0 002 2h16a2 2 0 002-2V6a2 2 0 00-2-2H8l-4-4v4z"></path></svg> 48 Replies</span>
            <span class="flex items-center"><svg class="w-4 h-4 mr-1" 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="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path></svg> 2.5K Views</span>
          </div>
        </a>

        <!-- Topic Card 3 -->
        <a href="#" class="block p-4 rounded-xl bg-white bg-opacity-30 hover:bg-opacity-50 transition duration-300 border border-white border-opacity-40 dark:bg-gray-700 dark:bg-opacity-40 dark:hover:bg-opacity-60 dark:border-gray-600">
          <div class="flex items-center space-x-3 mb-2">
            <img class="w-9 h-9 rounded-full object-cover border-2 border-red-500 dark:border-red-400" src="https://randomuser.me/api/portraits/women/15.jpg" alt="User Avatar">
            <div>
              <p class="text-lg font-semibold text-gray-900 dark:text-white">Trouble with account login after update</p>
              <p class="text-sm text-gray-700 dark:text-gray-300">by TechNoob, 1 day ago in <span class="font-medium text-pink-700 dark:text-pink-400">Technical Support</span></p>
            </div>
          </div>
          <p class="text-gray-800 dark:text-gray-200 line-clamp-2">Anyone else having issues logging into their account after the recent website update? Keeps saying invalid credentials.</p>
          <div class="flex items-center space-x-4 text-sm mt-3 text-gray-700 dark:text-gray-300">
            <span class="flex items-center"><svg class="w-4 h-4 mr-1" 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="M7 8h10M7 12h4m1-8v4m-4 8v4m-6-12H4a2 2 0 00-2 2v10a2 2 0 002 2h16a2 2 0 002-2V6a2 2 0 00-2-2H8l-4-4v4z"></path></svg> 18 Replies</span>
            <span class="flex items-center"><svg class="w-4 h-4 mr-1" 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="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path></svg> 980 Views</span>
          </div>
        </a>

      </div>

      <!-- Pagination -->
      <div class="flex justify-center items-center space-x-2 mt-6">
        <button class="p-2 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-white hover:bg-opacity-30 dark:hover:bg-gray-700 dark:hover:bg-opacity-40 transition duration-200">
          Previous
        </button>
        <button class="px-4 py-2 rounded-lg bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-50 text-gray-900 dark:text-white font-bold">
          1
        </button>
        <button class="px-4 py-2 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-white hover:bg-opacity-30 dark:hover:bg-gray-700 dark:hover:bg-opacity-40 transition duration-200">
          2
        </button>
        <button class="px-4 py-2 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-white hover:bg-opacity-30 dark:hover:bg-gray-700 dark:hover:bg-opacity-40 transition duration-200">
          3
        </button>
        <button class="p-2 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-white hover:bg-opacity-30 dark:hover:bg-gray-700 dark:hover:bg-opacity-40 transition duration-200">
          Next
        </button>
      </div>

    </div>

  </div>

</div>

Community Forum Component

A simple Neumorphic Community Forum Component for e-commerce, using a triadic color scheme, with responsive design and dark theme support.

Open Preview

                <div class="min-h-screen bg-gray-200 dark:bg-gray-900 flex items-center justify-center p-4">
  <div class="bg-gray-200 dark:bg-gray-800 p-8 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark max-w-md w-full">
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-6 text-center">Community Forum</h2>
    
    <div class="mb-4 bg-gray-100 dark:bg-gray-700 p-3 rounded-lg shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark">
      <div class="flex items-center mb-2">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-3 shadow-neumorphic-light dark:shadow-neumorphic-dark">
        <p class="font-medium text-gray-700 dark:text-gray-300">John Doe</p>
      </div>
      <p class="text-gray-600 dark:text-gray-400">"Looking for recommendations on the best ergonomic mouse for gaming!"</p>
      <div class="flex justify-between items-center text-sm text-gray-500 dark:text-gray-400 mt-3">
        <span>2 hours ago</span>
        <button class="text-blue-500 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300">Reply</button>
      </div>
    </div>

    <div class="mb-4 bg-gray-100 dark:bg-gray-700 p-3 rounded-lg shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark">
      <div class="flex items-center mb-2">
        <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-3 shadow-neumorphic-light dark:shadow-neumorphic-dark">
        <p class="font-medium text-gray-700 dark:text-gray-300">Jane Smith</p>
      </div>
      <p class="text-gray-600 dark:text-gray-400">"Just received my order, the quality is amazing! Highly recommend this store."</p>
      <div class="flex justify-between items-center text-sm text-gray-500 dark:text-gray-400 mt-3">
        <span>1 day ago</span>
        <button class="text-blue-500 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300">Reply</button>
      </div>
    </div>

    <div class="mt-6">
      <button class="w-full bg-blue-500 hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-500 text-white py-2 rounded-lg shadow-neumorphic-light dark:shadow-neumorphic-dark transition duration-300">
        View More Posts
      </button>
    </div>
  </div>
</div>

<style>
  /* Neumorphism shadows - light mode */
  .shadow-neumorphic-light {
    box-shadow: 6px 6px 12px #b0b0b0, -6px -6px 12px #ffffff;
  }
  .shadow-neumorphic-inset-light {
    box-shadow: inset 5px 5px 10px #b0b0b0, inset -5px -5px 10px #ffffff;
  }

  /* Neumorphism shadows - dark mode */
  .dark .shadow-neumorphic-dark {
    box-shadow: 6px 6px 12px #333333, -6px -6px 12px #555555;
  }
  .dark .shadow-neumorphic-inset-dark {
    box-shadow: inset 5px 5px 10px #333333, inset -5px -5px 10px #555555;
  }

  /* Triadic color scheme roughly used with blue for accent */
  /* Main background/base: gray (adjusting with neumorphism) */
  /* Accent 1: blue (for buttons/links) */
  /* Accent 2 & 3 would naturally emerge from interactions/hover states or subtle text colors */
</style>

Community Forum Component

A complex, responsive, Skeuomorphism-designed Community Forum Component for e-commerce with Grayscale color scheme, dark theme support, and no JavaScript. Uses Tailwind CSS and dummy images/avatars.

Open Preview

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100 p-8 font-sans transition-colors duration-300">
  <div class="max-w-7xl mx-auto">
    <!-- Header -->
    <header class="flex items-center justify-between mb-8 p-6 bg-gradient-to-br from-gray-300 to-gray-400 dark:from-gray-700 dark:to-gray-800 rounded-2xl shadow-xl border border-gray-400 dark:border-gray-600 relative overflow-hidden">
      <div class="absolute inset-0 bg-noise opacity-5"></div>
      <h1 class="text-4xl font-extrabold text-gray-800 dark:text-gray-200 text-shadow-md z-10">Community Forum</h1>
      <div class="flex items-center space-x-4 z-10">
        <input type="text" placeholder="Search..." class="px-5 py-3 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 border border-gray-300 dark:border-gray-600 shadow-inner focus:outline-none focus:ring-2 focus:ring-gray-500 dark:focus:ring-gray-300 transition-all duration-200 placeholder-gray-500 dark:placeholder-gray-400 w-64">
        <button class="p-3 bg-gray-500 dark:bg-gray-600 rounded-full shadow-lg border border-gray-600 dark:border-gray-500 hover:bg-gray-600 dark:hover:bg-gray-500 transition-all duration-200 group relative overflow-hidden">
          <span class="block w-6 h-6 bg-center bg-no-repeat bg-contain icon-plus group-hover:rotate-90 transition-transform duration-300"></span>
          <div class="absolute inset-0 bg-noise opacity-10"></div>
        </button>
      </div>
    </header>

    <div class="grid grid-cols-1 lg:grid-cols-4 gap-8">
      <!-- Left Sidebar - Categories/Navigation -->
      <aside class="lg:col-span-1 p-6 bg-gradient-to-br from-gray-300 to-gray-400 dark:from-gray-700 dark:to-gray-800 rounded-2xl shadow-xl border border-gray-400 dark:border-gray-600 relative overflow-hidden animate-slide-in-left">
        <div class="absolute inset-0 bg-noise opacity-5"></div>
        <h2 class="text-2xl font-bold mb-6 text-gray-800 dark:text-gray-200 text-shadow-sm z-10">Categories</h2>
        <ul class="space-y-4 z-10">
          <li class="p-4 bg-gray-200 dark:bg-gray-700 rounded-xl shadow-md border border-gray-300 dark:border-gray-600 hover:bg-gray-300 dark:hover:bg-gray-600 transition-all duration-200 cursor-pointer flex items-center space-x-3 group">
            <span class="w-5 h-5 bg-center bg-no-repeat bg-contain icon-shopping-cart group-hover:scale-110 transition-transform duration-200"></span>
            <span class="text-gray-800 dark:text-gray-200 font-medium group-hover:underline">Product Support</span>
          </li>
          <li class="p-4 bg-gray-200 dark:bg-gray-700 rounded-xl shadow-md border border-gray-300 dark:border-gray-600 hover:bg-gray-300 dark:hover:bg-gray-600 transition-all duration-200 cursor-pointer flex items-center space-x-3 group">
            <span class="w-5 h-5 bg-center bg-no-repeat bg-contain icon-shipping group-hover:scale-110 transition-transform duration-200"></span>
            <span class="text-gray-800 dark:text-gray-200 font-medium group-hover:underline">Order & Shipping</span>
          </li>
          <li class="p-4 bg-gray-200 dark:bg-gray-700 rounded-xl shadow-md border border-gray-300 dark:border-gray-600 hover:bg-gray-300 dark:hover:bg-gray-600 transition-all duration-200 cursor-pointer flex items-center space-x-3 group">
            <span class="w-5 h-5 bg-center bg-no-repeat bg-contain icon-returns group-hover:scale-110 transition-transform duration-200"></span>
            <span class="text-gray-800 dark:text-gray-200 font-medium group-hover:underline">Returns & Refunds</span>
          </li>
          <li class="p-4 bg-gray-200 dark:bg-gray-700 rounded-xl shadow-md border border-gray-300 dark:border-gray-600 hover:bg-gray-300 dark:hover:bg-gray-600 transition-all duration-200 cursor-pointer flex items-center space-x-3 group">
            <span class="w-5 h-5 bg-center bg-no-repeat bg-contain icon-faq group-hover:scale-110 transition-transform duration-200"></span>
            <span class="text-gray-800 dark:text-gray-200 font-medium group-hover:underline">General Inquiries</span>
          </li>
        </ul>

        <div class="mt-8">
          <h2 class="text-2xl font-bold mb-6 text-gray-800 dark:text-gray-200 text-shadow-sm z-10">Popular Topics</h2>
          <ul class="space-y-3 z-10">
            <li class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition-colors duration-200 cursor-pointer flex items-center space-x-2">
              <span class="w-4 h-4 bg-center bg-no-repeat bg-contain icon-fire"></span>
              <span>Troubleshooting your new gadget</span>
            </li>
            <li class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition-colors duration-200 cursor-pointer flex items-center space-x-2">
              <span class="w-4 h-4 bg-center bg-no-repeat bg-contain icon-fire"></span>
              <span>What's the best delivery option?</span>
            </li>
            <li class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition-colors duration-200 cursor-pointer flex items-center space-x-2">
              <span class="w-4 h-4 bg-center bg-no-repeat bg-contain icon-fire"></span>
              <span>Extended warranty details</span>
            </li>
          </ul>
        </div>
      </aside>

      <!-- Main Forum Content -->
      <main class="lg:col-span-3 space-y-8">
        <!-- Featured/Pinned Threads -->
        <section class="p-6 bg-gradient-to-br from-gray-300 to-gray-400 dark:from-gray-700 dark:to-gray-800 rounded-2xl shadow-xl border border-gray-400 dark:border-gray-600 relative overflow-hidden animate-fade-in-up">
          <div class="absolute inset-0 bg-noise opacity-5"></div>
          <h2 class="text-2xl font-bold mb-6 text-gray-800 dark:text-gray-200 text-shadow-sm z-10">Featured Discussions</h2>
          <div class="space-y-4 z-10">
            <div class="flex items-center justify-between p-4 bg-gray-200 dark:bg-gray-700 rounded-xl shadow-md border border-gray-300 dark:border-gray-600 hover:bg-gray-300 dark:hover:bg-gray-600 transition-all duration-200 cursor-pointer group">
              <div class="flex items-center space-x-4">
                <span class="w-6 h-6 bg-center bg-no-repeat bg-contain icon-pin transform group-hover:scale-110 transition-transform duration-200"></span>
                <div>
                  <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 group-hover:underline">Announcement: Holiday Shipping Deadlines 2024</h3>
                  <p class="text-sm text-gray-600 dark:text-gray-400">Posted by Admin on Nov 15, 2024</p>
                </div>
              </div>
              <div class="text-gray-700 dark:text-gray-300 flex items-center space-x-2">
                <span class="w-4 h-4 bg-center bg-no-repeat bg-contain icon-comment"></span>
                <span>120 replies</span>
              </div>
            </div>
            <div class="flex items-center justify-between p-4 bg-gray-200 dark:bg-gray-700 rounded-xl shadow-md border border-gray-300 dark:border-gray-600 hover:bg-gray-300 dark:hover:bg-gray-600 transition-all duration-200 cursor-pointer group">
              <div class="flex items-center space-x-4">
                <span class="w-6 h-6 bg-center bg-no-repeat bg-contain icon-pin transform group-hover:scale-110 transition-transform duration-200"></span>
                <div>
                  <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 group-hover:underline">New Product Line Q1 2025 Sneak Peek!</h3>
                  <p class="text-sm text-gray-600 dark:text-gray-400">Posted by Marketing Team on Dec 1, 2024</p>
                </div>
              </div>
              <div class="text-gray-700 dark:text-gray-300 flex items-center space-x-2">
                <span class="w-4 h-4 bg-center bg-no-repeat bg-contain icon-comment"></span>
                <span>250 replies</span>
              </div>
            </div>
          </div>
        </section>

        <!-- Recent Threads -->
        <section class="p-6 bg-gradient-to-br from-gray-300 to-gray-400 dark:from-gray-700 dark:to-gray-800 rounded-2xl shadow-xl border border-gray-400 dark:border-gray-600 relative overflow-hidden animate-fade-in-up delay-100">
          <div class="absolute inset-0 bg-noise opacity-5"></div>
          <h2 class="text-2xl font-bold mb-6 text-gray-800 dark:text-gray-200 text-shadow-sm z-10">Recent Activity</h2>
          <div class="space-y-4 z-10">
            <!-- Thread Item 1 -->
            <div class="p-5 bg-gray-200 dark:bg-gray-700 rounded-xl shadow-md border border-gray-300 dark:border-gray-600 hover:bg-gray-300 dark:hover:bg-gray-600 transition-all duration-200 group cursor-pointer flex flex-col sm:flex-row justify-between items-start sm:items-center space-y-4 sm:space-y-0 sm:space-x-4">
              <div class="flex items-start sm:items-center space-x-4">
                <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="User Avatar" class="w-14 h-14 rounded-full border-2 border-gray-500 dark:border-gray-400 shadow-lg object-cover transform group-hover:scale-105 transition-transform duration-200">
                <div>
                  <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200 group-hover:underline">Issue with my recent order - missing item</h3>
                  <p class="text-sm text-gray-600 dark:text-gray-400">by <span class="font-medium text-gray-700 dark:text-gray-300">JaneDoe</span> in <span class="font-medium text-gray-700 dark:text-gray-300">Order & Shipping</span></p>
                </div>
              </div>
              <div class="flex items-center space-x-4 text-gray-700 dark:text-gray-300">
                <div class="flex items-center space-x-1">
                  <span class="w-5 h-5 bg-center bg-no-repeat bg-contain icon-comment"></span>
                  <span>5 replies</span>
                </div>
                <div class="flex items-center space-x-1">
                  <span class="w-5 h-5 bg-center bg-no-repeat bg-contain icon-views"></span>
                  <span>120 views</span>
                </div>
                <span class="text-sm">2 hours ago</span>
              </div>
            </div>

            <!-- Thread Item 2 -->
            <div class="p-5 bg-gray-200 dark:bg-gray-700 rounded-xl shadow-md border border-gray-300 dark:border-gray-600 hover:bg-gray-300 dark:hover:bg-gray-600 transition-all duration-200 group cursor-pointer flex flex-col sm:flex-row justify-between items-start sm:items-center space-y-4 sm:space-y-0 sm:space-x-4">
              <div class="flex items-start sm:items-center space-x-4">
                <img src="https://randomuser.me/api/portraits/men/44.jpg" alt="User Avatar" class="w-14 h-14 rounded-full border-2 border-gray-500 dark:border-gray-400 shadow-lg object-cover transform group-hover:scale-105 transition-transform duration-200">
                <div>
                  <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200 group-hover:underline">Question about product compatibility</h3>
                  <p class="text-sm text-gray-600 dark:text-gray-400">by <span class="font-medium text-gray-700 dark:text-gray-300">JohnDoh</span> in <span class="font-medium text-gray-700 dark:text-gray-300">Product Support</span></p>
                </div>
              </div>
              <div class="flex items-center space-x-4 text-gray-700 dark:text-gray-300">
                <div class="flex items-center space-x-1">
                  <span class="w-5 h-5 bg-center bg-no-repeat bg-contain icon-comment"></span>
                  <span>10 replies</span>
                </div>
                <div class="flex items-center space-x-1">
                  <span class="w-5 h-5 bg-center bg-no-repeat bg-contain icon-views"></span>
                  <span>250 views</span>
                </div>
                <span class="text-sm">1 day ago</span>
              </div>
            </div>

            <!-- Thread Item 3 -->
            <div class="p-5 bg-gray-200 dark:bg-gray-700 rounded-xl shadow-md border border-gray-300 dark:border-gray-600 hover:bg-gray-300 dark:hover:bg-gray-600 transition-all duration-200 group cursor-pointer flex flex-col sm:flex-row justify-between items-start sm:items-center space-y-4 sm:space-y-0 sm:space-x-4">
              <div class="flex items-start sm:items-center space-x-4">
                <img src="https://randomuser.me/api/portraits/lego/1.jpg" alt="User Avatar" class="w-14 h-14 rounded-full border-2 border-gray-500 dark:border-gray-400 shadow-lg object-cover transform group-hover:scale-105 transition-transform duration-200">
                <div>
                  <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200 group-hover:underline">General feedback on website usability</h3>
                  <p class="text-sm text-gray-600 dark:text-gray-400">by <span class="font-medium text-gray-700 dark:text-gray-300">BotUser</span> in <span class="font-medium text-gray-700 dark:text-gray-300">General Inquiries</span></p>
                </div>
              </div>
              <div class="flex items-center space-x-4 text-gray-700 dark:text-gray-300">
                <div class="flex items-center space-x-1">
                  <span class="w-5 h-5 bg-center bg-no-repeat bg-contain icon-comment"></span>
                  <span>2 replies</span>
                </div>
                <div class="flex items-center space-x-1">
                  <span class="w-5 h-5 bg-center bg-no-repeat bg-contain icon-views"></span>
                  <span>50 views</span>
                </div>
                <span class="text-sm">3 days ago</span>
              </div>
            </div>
          </div>

          <!-- Pagination -->
          <div class="mt-8 flex justify-center space-x-4 z-10">
            <button class="px-6 py-3 bg-gray-400 dark:bg-gray-600 text-gray-900 dark:text-gray-100 rounded-full shadow-lg border border-gray-500 dark:border-gray-500 hover:bg-gray-500 dark:hover:bg-gray-500 transition-all duration-200 group relative overflow-hidden">
              <span class="absolute inset-0 bg-noise opacity-10"></span>
              <span class="z-10 relative">Previous</span>
            </button>
            <button class="px-6 py-3 bg-gray-600 dark:bg-gray-500 text-white dark:text-gray-900 rounded-full shadow-lg border border-gray-700 dark:border-gray-400 hover:bg-gray-700 dark:hover:bg-gray-400 transition-all duration-200 group relative overflow-hidden">
              <span class="absolute inset-0 bg-noise opacity-10"></span>
              <span class="z-10 relative">Next</span>
            </button>
          </div>
        </section>
      </main>
    </div>

    <!-- Footer -->
    <footer class="mt-12 p-6 bg-gradient-to-br from-gray-300 to-gray-400 dark:from-gray-700 dark:to-gray-800 rounded-2xl shadow-xl border border-gray-400 dark:border-gray-600 text-center text-gray-700 dark:text-gray-300 relative overflow-hidden animate-fade-in-up delay-200">
      <div class="absolute inset-0 bg-noise opacity-5"></div>
      <p class="z-10 relative">&copy; 2024 E-commerce Community Forum. All rights reserved.</p>
      <div class="flex justify-center space-x-4 mt-4 z-10 relative">
        <a href="#" class="text-gray-700 dark:text-gray-300 hover:underline">Privacy Policy</a>
        <a href="#" class="text-gray-700 dark:text-gray-300 hover:underline">Terms of Service</a>
      </div>
    </footer>
  </div>
</div>

<style>
  /* Base styles for Skeuomorphism - mimic physical depth */
  .shadow-md { box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08); }
  .shadow-lg { box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05); }
  .shadow-xl { box-shadow: 0 20px 25px rgba(0, 0, 0, 0.1), 0 8px 10px rgba(0, 0, 0, 0.04); }
  .shadow-inner { box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06); }
  .text-shadow-md { text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); }
  .text-shadow-sm { text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); }

  /* Custom noise background for texture */
  .bg-noise {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB2aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8ZmlsdGVyIGlkPSJub2lzZSIgeD1

A Neumorphism-styled community forum component for a portfolio, featuring a pastel color scheme and a complex, responsive design with dark theme support. It includes a forum list, recent activity, and user profiles, all implemented using Tailwind CSS with no JavaScript.

Open Preview

                <div class="min-h-screen bg-gray-200 dark:bg-gray-800 p-8 flex items-center justify-center font-sans">
  <div class="container mx-auto grid grid-cols-1 lg:grid-cols-3 gap-8">

    <!-- Left Sidebar: Forum Categories/List -->
    <div class="lg:col-span-1 bg-gray-200 dark:bg-gray-700 p-6 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark">
      <h2 class="text-xl font-semibold text-gray-700 dark:text-gray-200 mb-6 border-b border-gray-300 dark:border-gray-600 pb-2">Forum Categories</h2>
      <ul>
        <li class="mb-4">
          <a href="#" class="flex items-center p-3 rounded-lg text-gray-600 dark:text-gray-300 hover:bg-gray-300 hover:dark:bg-gray-600 shadow-neumorphic-flat-light dark:shadow-neumorphic-flat-dark transition duration-300">
            <span class="w-2 h-2 rounded-full bg-blue-400 mr-3"></span> General Discussion
          </a>
        </li>
        <li class="mb-4">
          <a href="#" class="flex items-center p-3 rounded-lg text-gray-600 dark:text-gray-300 hover:bg-gray-300 hover:dark:bg-gray-600 shadow-neumorphic-flat-light dark:shadow-neumorphic-flat-dark transition duration-300">
            <span class="w-2 h-2 rounded-full bg-green-400 mr-3"></span> Project Feedback
          </a>
        </li>
        <li class="mb-4">
          <a href="#" class="flex items-center p-3 rounded-lg text-gray-600 dark:text-gray-300 hover:bg-gray-300 hover:dark:bg-gray-600 shadow-neumorphic-flat-light dark:shadow-neumorphic-flat-dark transition duration-300">
            <span class="w-2 h-2 rounded-full bg-purple-400 mr-3"></span> Tech Talk
          </a>
        </li>
        <li class="mb-4">
          <a href="#" class="flex items-center p-3 rounded-lg text-gray-600 dark:text-gray-300 hover:bg-gray-300 hover:dark:bg-gray-600 shadow-neumorphic-flat-light dark:shadow-neumorphic-flat-dark transition duration-300">
            <span class="w-2 h-2 rounded-full bg-red-400 mr-3"></span> Off-Topic
          </a>
        </li>
      </ul>
    </div>

    <!-- Main Content: Forum Threads -->
    <div class="lg:col-span-2 bg-gray-200 dark:bg-gray-700 p-6 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark">
      <h2 class="text-xl font-semibold text-gray-700 dark:text-gray-200 mb-6 border-b border-gray-300 dark:border-gray-600 pb-2">Recent Threads</h2>

      <!-- Thread Card 1 -->
      <div class="mb-6 p-4 rounded-lg bg-gray-300 dark:bg-gray-600 shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark flex items-start space-x-4">
        <div class="flex-shrink-0">
          <img class="h-12 w-12 rounded-full border-2 border-blue-300 dark:border-blue-500" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
        </div>
        <div class="flex-grow">
          <h3 class="text-lg font-medium text-gray-800 dark:text-gray-100">Help needed with Neumorphism shadows</h3>
          <p class="text-sm text-gray-600 dark:text-gray-300 mb-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 text-xs text-gray-500 dark:text-gray-400">
            <span class="mr-4">Posted by <span class="font-semibold text-blue-500 dark:text-blue-400">John Doe</span></span>
            <span>2 hours ago</span>
             <span class="ml-auto flex items-center">
                <svg class="w-4 h-4 mr-1 text-green-500" 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 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.986 9.986 0 01-4.747-1.243l-3.321 1.66A.5.5 0 012 18.5V17c-.6-.7-1-1.6-1-2.5C1 10.582 5.03 7 10 7c.418 0 .825.022 1.222.062a.5.5 0 01.396.536l-.08.799A6.973 6.973 0 0010 10.5c-3.866 0-7 2.388-7 5.333V17l1.58.75A7.994 7.994 0 0010 18c3.866 0 7-2.388 7-5.333a.5.5 0 01.5-.5h.01c.276 0 .5-.224.5-.5v-.5a.5.5 0 01.5-.5h.01c.276 0 .5-.224.5-.5v-.5a.5.5 0 01.5-.5z"></path></svg>
                15
            </span>
          </div>
        </div>
      </div>

      <!-- Thread Card 2 -->
      <div class="mb-6 p-4 rounded-lg bg-gray-300 dark:bg-gray-600 shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark flex items-start space-x-4">
        <div class="flex-shrink-0">
          <img class="h-12 w-12 rounded-full border-2 border-pink-300 dark:border-pink-500" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
        </div>
        <div class="flex-grow">
          <h3 class="text-lg font-medium text-gray-800 dark:text-gray-100">Ideas for a portfolio redesign?</h3>
          <p class="text-sm text-gray-600 dark:text-gray-300 mb-2">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
          <div class="flex items-center text-xs text-gray-500 dark:text-gray-400">
            <span class="mr-4">Posted by <span class="font-semibold text-pink-500 dark:text-pink-400">Jane Smith</span></span>
            <span>5 hours ago</span>
            <span class="ml-auto flex items-center">
                 <svg class="w-4 h-4 mr-1 text-green-500" 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 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.986 9.986 0 01-4.747-1.243l-3.321 1.66A.5.5 0 012 18.5V17c-.6-.7-1-1.6-1-2.5C1 10.582 5.03 7 10 7c.418 0 .825.022 1.222.062a.5.5 0 01.396.536l-.08.799A6.973 6.973 0 0010 10.5c-3.866 0-7 2.388-7 5.333V17l1.58.75A7.994 7.994 0 0010 18c3.866 0 7-2.388 7-5.333a.5.5 0 01.5-.5h.01c.276 0 .5-.224.5-.5v-.5a.5.5 0 01.5-.5h.01c.276 0 .5-.224.5-.5v-.5a.5.5 0 01.5-.5z"></path></svg>
                27
            </span>
          </div>
        </div>
      </div>

      <!-- Thread Card 3 -->
      <div class="mb-6 p-4 rounded-lg bg-gray-300 dark:bg-gray-600 shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark flex items-start space-x-4">
        <div class="flex-shrink-0">
          <img class="h-12 w-12 rounded-full border-2 border-green-300 dark:border-green-500" src="https://randomuser.me/api/portraits/women/21.jpg" alt="User Avatar">
        </div>
        <div class="flex-grow">
          <h3 class="text-lg font-medium text-gray-800 dark:text-gray-100">Best practices for responsive typography?</h3>
          <p class="text-sm text-gray-600 dark:text-gray-300 mb-2">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
          <div class="flex items-center text-xs text-gray-500 dark:text-gray-400">
            <span class="mr-4">Posted by <span class="font-semibold text-green-500 dark:text-green-400">Alice Johnson</span></span>
            <span>Yesterday</span>
            <span class="ml-auto flex items-center">
                <svg class="w-4 h-4 mr-1 text-green-500" 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 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.986 9.986 0 01-4.747-1.243l-3.321 1.66A.5.5 0 012 18.5V17c-.6-.7-1-1.6-1-2.5C1 10.582 5.03 7 10 7c.418 0 .825.022 1.222.062a.5.5 0 01.396.536l-.08.799A6.973 6.973 0 0010 10.5c-3.866 0-7 2.388-7 5.333V17l1.58.75A7.994 7.994 0 0010 18c3.866 0 7-2.388 7-5.333a.5.5 0 01.5-.5h.01c.276 0 .5-.224.5-.5v-.5a.5.5 0 01.5-.5h.01c.276 0 .5-.224.5-.5v-.5a.5.5 0 01.5-.5z"></path></svg>
                12
            </span>
          </div>
        </div>
      </div>

      <button class="w-full py-3 mt-4 rounded-lg bg-blue-400 dark:bg-blue-600 text-white font-semibold shadow-neumorphic-flat-light dark:shadow-neumorphic-flat-dark hover:shadow-neumorphic-pressed-light hover:dark:shadow-neumorphic-pressed-dark transition duration-300">
        Load More Threads
      </button>
    </div>

  </div>
</div>

<style>
  /* Neumorphic Shadows - Light Mode */
  .shadow-neumorphic-light {
    box-shadow: 8px 8px 15px #a3b1c6, -8px -8px 15px #ffffff;
  }
  .shadow-neumorphic-flat-light {
    box-shadow: 5px 5px 10px #a3b1c6, -5px -5px 10px #ffffff;
  }
  .shadow-neumorphic-inset-light {
    box-shadow: inset 5px 5px 10px #a3b1c6, inset -5px -5px 10px #ffffff;
  }
  .shadow-neumorphic-pressed-light {
    box-shadow: inset 5px 5px 10px #a3b1c6, inset -5px -5px 10px #ffffff;
  }

  /* Neumorphic Shadows - Dark Mode */
  .dark .shadow-neumorphic-dark {
    box-shadow: 8px 8px 15px #4a4a4a, -8px -8px 15px #2c2c2c;
  }
  .dark .shadow-neumorphic-flat-dark {
    box-shadow: 5px 5px 10px #4a4a4a, -5px -5px 10px #2c2c2c;
  }
  .dark .shadow-neumorphic-inset-dark {
    box-shadow: inset 5px 5px 10px #4a4a4a, inset -5px -5px 10px #2c2c2c;
  }
  .dark .shadow-neumorphic-pressed-dark {
    box-shadow: inset 5px 5px 10px #4a4a4a, inset -5px -5px 10px #2c2c2c;
  }

  /* Pastel Colors for Light Mode */
  .bg-gray-200 { background-color: #e0e5ec; } /* Light background */
  .bg-gray-300 { background-color: #dae0e8; } /* Slightly darker accent */
  .text-gray-700 { color: #5c6a7e; }
  .text-gray-600 { color: #7f8fa5; }
  .text-blue-400 { color: #87ceeb; } /* Sky Blue */
  .text-green-400 { color: #98fb98; } /* Pale Green */
  .text-purple-400 { color: #dda0dd; } /* Plum */
  .text-red-400 { color: #f08080; } /* Light Coral */
  .border-blue-300 { border-color: #a7d9f7; }
  .border-pink-300 { border-color: #f7a7d9; }
  .border-green-300 { border-color: #b3f7a7; }

  /* Pastel Colors for Dark Mode */
  .dark\:bg-gray-800 { background-color: #2c2c2c; }
  .dark\:bg-gray-700 { background-color: #3a3a3a; }
  .dark\:bg-gray-600 { background-color: #4a4a4a; }
  .dark\:text-gray-200 { color: #e0e0e0; }
  .dark\:text-gray-300 { color: #c0c0c0; }
  .dark\:text-gray-400 { color: #a0a0a0; }
  .dark\:text-gray-100 { color: #f0f0f0; }
  .dark\:text-blue-600 { color: #6495ed; } /* Cornflower Blue */
  .dark\:text-pink-600 { color: #ff69b4; } /* Hot Pink */
  .dark\:text-green-600 { color: #3cb371; } /* Medium Sea Green */
  .dark\:border-blue-500 { border-color: #4682b4; }
  .dark\:border-pink-500 { border-color: #c71585; }
  .dark\:border-green-500 { border-color: #2e8b57; }
  .dark\:focus\:ring-blue-500 { --tw-ring-color: #6495ed; }

</style>

<script>
  // You can toggle dark mode with a simple script if needed,
  // for example, by adding/removing the "dark" class to the root element.
  // This example assumes a mechanism for dark mode toggling is already in place or will be added externally.
</script>

Community Forum Component

A minimalist community forum component with dark mode support. This component is designed for portfolios and features a simple layout with earth tone colors.

Open Preview

                <div class="min-h-screen bg-stone-100 dark:bg-stone-900 p-4 flex flex-col items-center justify-center">
  <div class="w-full max-w-2xl bg-white dark:bg-stone-800 rounded-lg shadow-md p-6">
    <h1 class="text-2xl font-semibold text-stone-800 dark:text-stone-200 mb-6 text-center">Community Forum</h1>

    <!-- New Post Section -->
    <div class="mb-6">
      <textarea class="w-full p-3 rounded-md bg-stone-50 dark:bg-stone-700 text-stone-700 dark:text-stone-300 border border-stone-300 dark:border-stone-600 focus:outline-none focus:ring-2 focus:ring-stone-400" rows="3" placeholder="Write a new post..."></textarea>
      <div class="flex justify-end mt-2">
        <button class="px-4 py-2 bg-stone-600 text-white rounded-md hover:bg-stone-700 focus:outline-none focus:ring-2 focus:ring-stone-500">Post</button>
      </div>
    </div>

    <!-- Forum Posts -->
    <div class="space-y-4">
      <!-- Post 1 -->
      <div class="bg-stone-50 dark:bg-stone-700 p-4 rounded-lg shadow-sm">
        <div class="flex items-center mb-3">
          <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3 border-2 border-stone-300 dark:border-stone-600">
          <div>
            <p class="font-semibold text-stone-800 dark:text-stone-200">John Doe</p>
            <p class="text-sm text-stone-500 dark:text-stone-400">2 hours ago</p>
          </div>
        </div>
        <p class="text-stone-700 dark:text-stone-300 mb-3">This is a great community! I just wanted to share my latest project. Feedback is welcome!</p>
        <div class="flex justify-between text-stone-500 dark:text-stone-400 text-sm">
          <span>5 Likes</span>
          <span>3 Comments</span>
        </div>
      </div>

      <!-- Post 2 -->
      <div class="bg-stone-50 dark:bg-stone-700 p-4 rounded-lg shadow-sm">
        <div class="flex items-center mb-3">
          <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3 border-2 border-stone-300 dark:border-stone-600">
          <div>
            <p class="font-semibold text-stone-800 dark:text-stone-200">Jane Smith</p>
            <p class="text-sm text-stone-500 dark:text-stone-400">Yesterday</p>
          </div>
        </div>
        <p class="text-stone-700 dark:text-stone-300 mb-3">Looking for collaborators on an exciting new open-source project. Anyone interested in web development?</p>
        <div class="flex justify-between text-stone-500 dark:text-stone-400 text-sm">
          <span>12 Likes</span>
          <span>7 Comments</span>
        </div>
      </div>

      <!-- Post 3 -->
      <div class="bg-stone-50 dark:bg-stone-700 p-4 rounded-lg shadow-sm">
        <div class="flex items-center mb-3">
          <img src="https://randomuser.me/api/portraits/men/19.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3 border-2 border-stone-300 dark:border-stone-600">
          <div>
            <p class="font-semibold text-stone-800 dark:text-stone-200">Peter Jones</p>
            <p class="text-sm text-stone-500 dark:text-stone-400">3 days ago</p>
          </div>
        </div>
        <p class="text-stone-700 dark:text-stone-300 mb-3">Just launched my new portfolio! Check it out and let me know what you think. [Link to portfolio]</p>
        <div class="flex justify-between text-stone-500 dark:text-stone-400 text-sm">
          <span>8 Likes</span>
          <span>2 Comments</span>
        </div>
      </div>
    </div>
  </div>
</div>

Community Forum Component

A Community Forum Component with Skeuomorphism design, Triadic color scheme, and Simple complexity, for Social Media purposes, built with Tailwind CSS. Includes responsive design and dark theme support.

Open Preview

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-8 flex items-center justify-center font-sans">
  <div class="bg-gradient-to-br from-gray-300 to-gray-400 dark:from-gray-700 dark:to-gray-800 rounded-3xl shadow-2xl p-6 w-full max-w-2xl border-t border-l border-gray-200 dark:border-gray-600">
    <div class="text-center mb-8">
      <h1 class="text-4xl font-extrabold text-gray-800 dark:text-gray-100 drop-shadow-md">Community Forum</h1>
      <p class="text-gray-600 dark:text-gray-300 mt-2">Connect, Share, Discuss.</p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
      <div class="bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-800 dark:to-gray-700 p-5 rounded-xl shadow-inner border border-gray-300 dark:border-gray-600 transform transition duration-300 hover:scale-105 hover:shadow-lg">
        <h2 class="text-xl font-bold text-gray-700 dark:text-gray-200 mb-2">Discussions</h2>
        <p class="text-gray-600 dark:text-gray-300 text-sm">Engage in lively conversations.</p>
        <button class="mt-4 w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded-lg shadow-md transition duration-300 ease-in-out transform hover:-translate-y-0.5">
          View
        </button>
      </div>

      <div class="bg-gradient-to-br from-red-200 to-red-300 dark:from-red-800 dark:to-red-700 p-5 rounded-xl shadow-inner border border-red-300 dark:border-red-600 transform transition duration-300 hover:scale-105 hover:shadow-lg">
        <h2 class="text-xl font-bold text-red-700 dark:text-red-200 mb-2">Announcements</h2>
        <p class="text-red-600 dark:text-red-300 text-sm">Stay updated with the latest news.</p>
        <button class="mt-4 w-full bg-red-600 hover:bg-red-700 text-white font-semibold py-2 px-4 rounded-lg shadow-md transition duration-300 ease-in-out transform hover:-translate-y-0.5">
          View
        </button>
      </div>

      <div class="bg-gradient-to-br from-green-200 to-green-300 dark:from-green-800 dark:to-green-700 p-5 rounded-xl shadow-inner border border-green-300 dark:border-green-600 transform transition duration-300 hover:scale-105 hover:shadow-lg">
        <h2 class="text-xl font-bold text-green-700 dark:text-green-200 mb-2">Members</h2>
        <p class="text-green-600 dark:text-green-300 text-sm">Meet the community members.</p>
        <button class="mt-4 w-full bg-green-600 hover:bg-green-700 text-white font-semibold py-2 px-4 rounded-lg shadow-md transition duration-300 ease-in-out transform hover:-translate-y-0.5">
          View
        </button>
      </div>
    </div>

    <div class="bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-800 dark:to-gray-700 p-5 rounded-xl shadow-inner border border-gray-300 dark:border-gray-600">
      <h2 class="text-xl font-bold text-gray-700 dark:text-gray-200 mb-4">Latest Posts</h2>
      <div class="space-y-4">
        <div class="flex items-start bg-gray-100 dark:bg-gray-900 p-4 rounded-lg shadow-md border border-gray-300 dark:border-gray-600 transition duration-300 hover:shadow-lg">
          <img class="w-12 h-12 rounded-full ring-2 ring-blue-500 dark:ring-blue-400 mr-4" src="https://randomuser.me/api/portraits/thumb/men/1.jpg" alt="User Avatar">
          <div>
            <p class="text-blue-700 dark:text-blue-300 font-semibold">John Doe <span class="text-gray-500 dark:text-gray-400 text-sm italic">2 hours ago</span></p>
            <p class="text-gray-800 dark:text-gray-200">How do you handle state management in large scale applications?</p>
          </div>
        </div>
        <div class="flex items-start bg-gray-100 dark:bg-gray-900 p-4 rounded-lg shadow-md border border-gray-300 dark:border-gray-600 transition duration-300 hover:shadow-lg">
          <img class="w-12 h-12 rounded-full ring-2 ring-red-500 dark:ring-red-400 mr-4" src="https://randomuser.me/api/portraits/thumb/women/2.jpg" alt="User Avatar">
          <div>
            <p class="text-red-700 dark:text-red-300 font-semibold">Jane Smith <span class="text-gray-500 dark:text-gray-400 text-sm italic">5 hours ago</span></p>
            <p class="text-gray-800 dark:text-gray-200">Excited about the new forum features!</p>
          </div>
        </div>
        <div class="flex items-start bg-gray-100 dark:bg-gray-900 p-4 rounded-lg shadow-md border border-gray-300 dark:border-gray-600 transition duration-300 hover:shadow-lg">
          <img class="w-12 h-12 rounded-full ring-2 ring-green-500 dark:ring-green-400 mr-4" src="https://randomuser.me/api/portraits/thumb/men/3.jpg" alt="User Avatar">
          <div>
            <p class="text-green-700 dark:text-green-300 font-semibold">Mike Johnson <span class="text-gray-500 dark:text-gray-400 text-sm italic">1 day ago</span></p>
            <p class="text-gray-800 dark:text-gray-200">Looking for collaborators on an open-source project.</p>
          </div>
        </div>
      </div>
      <button class="mt-6 w-full bg-yellow-500 hover:bg-yellow-600 text-white font-semibold py-3 px-4 rounded-lg shadow-md transition duration-300 ease-in-out transform hover:-translate-y-0.5 tracking-wide text-lg">
        Load More Posts
      </button>
    </div>
  </div>
</div>

Community Forum Component

A minimalist community forum component for e-commerce, featuring a clean design, triadic color scheme, and dark mode support.

Open Preview

                <div class="max-w-5xl mx-auto p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
    <!-- Forum Header -->
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4">Community Forum</h2>
    <p class="text-gray-600 dark:text-gray-300 mb-6">Join the conversation about your favorite products!</p>

    <!-- Post List -->
    <div class="space-y-4">
        <div class="flex items-start bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-sm">
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-12 h-12 rounded-full mr-4">
            <div>
                <h3 class="text-lg font-semibold text-gray-800 dark:text-white">John Doe</h3>
                <p class="text-gray-600 dark:text-gray-300">What is the best camera for beginners?</p>
                <div class="text-sm text-gray-500 dark:text-gray-400">12 Replies | 2 Days Ago</div>
            </div>
        </div>

        <div class="flex items-start bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-sm">
            <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-12 h-12 rounded-full mr-4">
            <div>
                <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Jane Smith</h3>
                <p class="text-gray-600 dark:text-gray-300">Can anyone recommend a good laptop?</p>
                <div class="text-sm text-gray-500 dark:text-gray-400">8 Replies | 3 Days Ago</div>
            </div>
        </div>

        <div class="flex items-start bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-sm">
            <img src="https://randomuser.me/api/portraits/men/50.jpg" alt="User Avatar" class="w-12 h-12 rounded-full mr-4">
            <div>
                <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Michael Johnson</h3>
                <p class="text-gray-600 dark:text-gray-300">Best headphones under $100?</p>
                <div class="text-sm text-gray-500 dark:text-gray-400">5 Replies | 1 Week Ago</div>
            </div>
        </div>
    </div>

    <!-- Post Input -->
    <div class="mt-6">
        <h4 class="text-lg font-semibold text-gray-800 dark:text-white mb-2">Start a New Discussion</h4>
        <textarea class="w-full p-3 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 rounded-lg focus:outline-none focus:ring focus:ring-blue-400 dark:focus:ring-blue-500" rows="4" placeholder="Write your message..."></textarea>
        <button class="mt-2 px-6 py-2 bg-blue-500 text-white rounded-lg shadow hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600">Post</button>
    </div>
</div>