Search Components

Community Forum

Discussion board for community interaction

Community Forum Component

A simple, responsive community forum component with a warm, sunset-inspired color scheme, suitable for dating or social platforms. Features Material Design-like shadows and includes dark mode support.

Open Preview

                <div class="p-4 sm:p-6 md:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen flex items-center justify-center font-sans">
  <div class="w-full max-w-sm sm:max-w-md md:max-w-lg lg:max-w-xl bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden animate-fade-in transition-shadow duration-300 dark:shadow-2xl dark:shadow-orange-900/20">
    <div class="bg-gradient-to-r from-orange-400 to-red-500 p-4 sm:p-5 flex items-center justify-between shadow-md">
      <h2 class="text-white text-lg sm:text-xl font-semibold">Community Buzz</h2>
      <button class="p-2 rounded-full text-white hover:bg-white hover:bg-opacity-20 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-50">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 sm:h-6 sm:w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
        </svg>
      </button>
    </div>

    <div class="p-4 sm:p-5 space-y-4">
      <!-- Forum Post 1 -->
      <div class="flex items-start space-x-3 sm:space-x-4">
        <img class="w-10 h-10 sm:w-12 sm:h-12 rounded-full ring-2 ring-orange-300 dark:ring-orange-600 object-cover" src="https://randomuser.me/api/portraits/women/68.jpg" alt="User Avatar">
        <div class="flex-1">
          <div class="flex items-center justify-between">
            <p class="font-semibold text-gray-800 dark:text-gray-100 text-sm sm:text-base">Sarah_Loves_Sunsets</p>
            <span class="text-xs text-gray-500 dark:text-gray-400">2h ago</span>
          </div>
          <p class="text-gray-700 dark:text-gray-300 text-sm sm:text-base mt-0.5">"Anyone else feel like this community has the best vibes? So much positivity! ✨"</p>
          <div class="flex items-center space-x-3 mt-2">
            <button class="flex items-center text-gray-600 dark:text-gray-400 hover:text-orange-600 dark:hover:text-orange-400 transition-colors duration-200 text-xs sm:text-sm">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 sm:h-5 sm:w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
              </svg>
              54
            </button>
            <button class="flex items-center text-gray-600 dark:text-gray-400 hover:text-orange-600 dark:hover:text-orange-400 transition-colors duration-200 text-xs sm:text-sm">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 sm:h-5 sm:w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <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.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
              </svg>
              12
            </button>
          </div>
        </div>
      </div>

      <hr class="border-gray-200 dark:border-gray-700">

      <!-- Forum Post 2 -->
      <div class="flex items-start space-x-3 sm:space-x-4">
        <img class="w-10 h-10 sm:w-12 sm:h-12 rounded-full ring-2 ring-orange-300 dark:ring-orange-600 object-cover" src="https://randomuser.me/api/portraits/men/44.jpg" alt="User Avatar">
        <div class="flex-1">
          <div class="flex items-center justify-between">
            <p class="font-semibold text-gray-800 dark:text-gray-100 text-sm sm:text-base">Traveler_Mike</p>
            <span class="text-xs text-gray-500 dark:text-gray-400">5h ago</span>
          </div>
          <p class="text-gray-700 dark:text-gray-300 text-sm sm:text-base mt-0.5">"Just joined! Looking forward to connecting with amazing people here. Where's everyone from?"</p>
          <div class="flex items-center space-x-3 mt-2">
            <button class="flex items-center text-gray-600 dark:text-gray-400 hover:text-orange-600 dark:hover:text-orange-400 transition-colors duration-200 text-xs sm:text-sm">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 sm:h-5 sm:w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
              </svg>
              31
            </button>
            <button class="flex items-center text-gray-600 dark:text-gray-400 hover:text-orange-600 dark:hover:text-orange-400 transition-colors duration-200 text-xs sm:text-sm">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 sm:h-5 sm:w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <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.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
              </svg>
              8
            </button>
          </div>
        </div>
      </div>
    </div>

    <div class="p-4 sm:p-5 border-t border-gray-200 dark:border-gray-700">
      <div class="flex items-center space-x-3">
        <img class="w-9 h-9 sm:w-10 sm:h-10 rounded-full object-cover" src="https://randomuser.me/api/portraits/thumb/men/75.jpg" alt="Your Avatar">
        <input type="text" placeholder="Write a new post..." class="flex-1 p-2 sm:p-2.5 rounded-full bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-orange-500 dark:focus:ring-orange-400 transition-all duration-200 dark:border-none border border-gray-300">
        <button class="p-2 rounded-full bg-orange-500 text-white hover:bg-orange-600 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-800 transition-colors duration-200">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 sm:h-6 sm:w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
          </svg>
        </button>
      </div>
    </div>
  </div>
</div>

Community Forum Component

A simple cyberpunk-themed community forum component for real estate platforms, featuring dark backgrounds, neon accents, and responsive design with dark mode support.

Open Preview

                <div class="font-sans bg-gray-950 text-gray-100 dark:bg-black p-4 sm:p-6 lg:p-8 rounded-lg shadow-lg border border-purple-800 dark:border-pink-700 max-w-4xl mx-auto neon-shadow">
  <h2 class="text-2xl sm:text-3xl font-bold text-teal-400 dark:text-lime-400 mb-6 text-center tracking-wide uppercase leading-tight">
    <span class="block">CYBERPUNK CONCLAVE</span>
    <span class="block text-lg text-purple-400 dark:text-pink-400">// REAL ESTATE MATRIX //</span>
  </h2>

  <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
    <div class="bg-opacity-20 bg-blue-700 dark:bg-purple-700 p-4 rounded-md border border-b-2 border-blue-500 dark:border-purple-500 hover:border-blue-300 dark:hover:border-purple-300 transition-colors duration-300">
      <h3 class="text-xl font-semibold text-blue-300 dark:text-purple-300 mb-2 ">Discussion Channels</h3>
      <ul class="space-y-2 text-sm">
        <li class="flex items-center text-gray-200 hover:text-teal-400 dark:hover:text-lime-400 transition-colors duration-200">
          <svg class="w-4 h-4 mr-2 text-cyan-400 dark:text-fuchsia-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="M7 8h10M7 12h4m1.293 7.707A9 9 0 0110 21h4a9 9 0 00-9.707-16.707A9 9 0 007 8z"></path></svg>
          General Property Chatter
        </li>
        <li class="flex items-center text-gray-200 hover:text-teal-400 dark:hover:text-lime-400 transition-colors duration-200">
          <svg class="w-4 h-4 mr-2 text-cyan-400 dark:text-fuchsia-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="M7 8h10M7 12h4m1.293 7.707A9 9 0 0110 21h4a9 9 0 00-9.707-16.707A9 9 0 007 8z"></path></svg>
          Investment Strategies
        </li>
        <li class="flex items-center text-gray-200 hover:text-teal-400 dark:hover:text-lime-400 transition-colors duration-200">
          <svg class="w-4 h-4 mr-2 text-cyan-400 dark:text-fuchsia-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="M7 8h10M7 12h4m1.293 7.707A9 9 0 0110 21h4a9 9 0 00-9.707-16.707A9 9 0 007 8z"></path></svg>
          Market Trends & Predictions
        </li>
        <li class="flex items-center text-gray-200 hover:text-teal-400 dark:hover:text-lime-400 transition-colors duration-200">
          <svg class="w-4 h-4 mr-2 text-cyan-400 dark:text-fuchsia-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="M7 8h10M7 12h4m1.293 7.707A9 9 0 0110 21h4a9 9 0 00-9.707-16.707A9 9 0 007 8z"></path></svg>
          Legal & Compliance
        </li>
      </ul>
    </div>

    <div class="bg-opacity-20 bg-purple-700 dark:bg-blue-700 p-4 rounded-md border border-b-2 border-purple-500 dark:border-blue-500 hover:border-purple-300 dark:hover:border-blue-300 transition-colors duration-300">
      <h3 class="text-xl font-semibold text-purple-300 dark:text-blue-300 mb-2">Featured Threads</h3>
      <ul class="space-y-3 text-sm">
        <li class="flex items-center text-gray-200">
          <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar" class="w-6 h-6 rounded-full mr-3 border border-pink-400 dark:border-lime-400">
          <a href="#" class="text-gray-100 hover:text-pink-400 dark:hover:text-lime-400 transition-colors duration-200">
            "Optimized Smart Homes of 2077" <span class="text-xs text-gray-400">by DataGhost</span>
          </a>
        </li>
        <li class="flex items-center text-gray-200">
          <img src="https://randomuser.me/api/portraits/women/62.jpg" alt="User Avatar" class="w-6 h-6 rounded-full mr-3 border border-pink-400 dark:border-lime-400">
          <a href="#" class="text-gray-100 hover:text-pink-400 dark:hover:text-lime-400 transition-colors duration-200">
            "Neo-Tokyo District Price Forecast" <span class="text-xs text-gray-400">by Synthia_X</span>
          </a>
        </li>
        <li class="flex items-center text-gray-200">
          <img src="https://randomuser.me/api/portraits/men/12.jpg" alt="User Avatar" class="w-6 h-6 rounded-full mr-3 border border-pink-400 dark:border-lime-400">
          <a href="#" class="text-gray-100 hover:text-pink-400 dark:hover:text-lime-400 transition-colors duration-200">
            "AI-Powered Property Management" <span class="text-xs text-gray-400">by CyberBroker</span>
          </a>
        </li>
      </ul>
    </div>
  </div>

  <div class="flex flex-col sm:flex-row justify-between items-center bg-opacity-20 bg-gray-700 dark:bg-gray-800 p-4 rounded-md border border-gray-600 dark:border-gray-700">
    <p class="mb-4 sm:mb-0 text-sm text-gray-300 dark:text-gray-400">
      <span class="text-teal-400 dark:text-lime-400">1,245 Members Active</span> // 42 New Posts Today
    </p>
    <button class="flex items-center px-6 py-2 bg-gradient-to-r from-blue-600 to-purple-600 dark:from-pink-600 dark:to-fuchsia-600 text-white rounded-full font-semibold 
                   shadow-lg hover:shadow-cyan-500/50 dark:hover:shadow-lime-500/50 transition-all duration-300 
                   transform hover:-translate-y-0.5 glow-button">
      <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 THREAD
    </button>
  </div>

  <style>
    /* This is for the 'neon-shadow' and 'glow-button' effects */
    .neon-shadow {
      box-shadow: 
        0 0 5px rgba(59, 130, 246, 0.7),
        0 0 10px rgba(168, 85, 247, 0.7),
        0 0 15px rgba(59, 130, 246, 0.5),
        0 0 20px rgba(168, 85, 247, 0.5);
    }

    .dark .neon-shadow {
      box-shadow: 
        0 0 5px rgba(236, 72, 153, 0.7),
        0 0 10px rgba(139, 92, 246, 0.7),
        0 0 15px rgba(236, 72, 153, 0.5),
        0 0 20px rgba(139, 92, 246, 0.5);
    }

    .glow-button {
      position: relative;
      overflow: hidden;
      z-index: 1;
    }

    .glow-button:before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(45deg, rgba(59, 130, 246, 0.6) 0%, rgba(168, 85, 247, 0.6) 100%);
      mix-blend-mode: overlay;
      opacity: 0;
      transition: opacity 0.3s ease;
      z-index: -1;
    }

    .dark .glow-button:before {
      background: linear-gradient(45deg, rgba(236, 72, 153, 0.6) 0%, rgba(139, 92, 246, 0.6) 100%);
    }

    .glow-button:hover:before {
      opacity: 1;
    }

    .glow-button:active {
      transform: scale(0.98);
      box-shadow: none;
    }
  </style>
</div>

Community Forum Component - Art Deco Monochromatic

A responsive community forum component designed with an Art Deco aesthetic using a monochromatic color scheme, suitable for Technology/SaaS applications. Features dark mode support and interactive elements.

Open Preview

                <div class="font-sans bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200 transition-colors duration-300 p-4 sm:p-6 lg:p-8">
  <div class="max-w-7xl mx-auto bg-white dark:bg-gray-850 shadow-lg rounded-xl overflow-hidden
              border border-gray-200 dark:border-gray-700
              " style="box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05), 0 0 0 10px rgba(173,216,230, 0.1) inset;"
  >
    <div class="p-6 sm:p-8 lg:p-10 border-b border-gray-200 dark:border-gray-700 relative overflow-hidden">
      <div class="absolute inset-0 bg-gradient-to-br from-blue-300/20 via-blue-500/10 to-blue-300/20 dark:from-blue-700/20 dark:via-blue-900/10 dark:to-blue-700/20 opacity-70" style="clip-path: polygon(0 0, 100% 0, 80% 100%, 20% 100%);"></div>
      <div class="relative z-10 flex flex-col sm:flex-row justify-between items-start sm:items-center">
        <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-blue-800 dark:text-blue-200 leading-tight mb-4 sm:mb-0">
          The Developer Hub
        </h2>
        <button class="px-6 py-2 bg-blue-700 hover:bg-blue-800 text-white rounded-lg shadow-md transition-all duration-300
                       flex items-center space-x-2 border-2 border-blue-600 dark:border-blue-500
                       transform hover:scale-105 active:scale-95
                       relative overflow-hidden group">
          <span class="absolute inset-0 bg-white opacity-0 group-hover:opacity-10 transition-opacity duration-300"></span>
          <svg class="w-5 h-5" 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>
          <span>New Topic</span>
        </button>
      </div>
      <p class="mt-4 text-base sm:text-lg text-gray-600 dark:text-gray-400 relative z-10">
        Connect, share insights, and get support from our vibrant community of developers.
      </p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-0 border-t border-gray-200 dark:border-gray-700">
      <!-- Left Sidebar (Categories/Filters) -->
      <div class="md:col-span-1 p-6 sm:p-8 lg:p-10 border-r border-gray-200 dark:border-gray-700 md:h-full">
        <h3 class="text-xl sm:text-2xl font-bold text-blue-800 dark:text-blue-200 mb-6">
          Categories
        </h3>
        <nav class="space-y-3">
          <a href="#" class="flex items-center px-4 py-2 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-blue-100 dark:hover:bg-blue-900 transition-colors duration-200 border border-transparent hover:border-blue-400 dark:hover:border-blue-600 group">
            <svg class="w-5 h-5 mr-3 text-blue-500 group-hover:text-blue-700 dark:group-hover:text-blue-300 transition-colors" 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.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
            <span class="font-medium">General Discussion</span>
          </a>
          <a href="#" class="flex items-center px-4 py-2 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-blue-100 dark:hover:bg-blue-900 transition-colors duration-200 border border-transparent hover:border-blue-400 dark:hover:border-blue-600 group">
            <svg class="w-5 h-5 mr-3 text-blue-500 group-hover:text-blue-700 dark:group-hover:text-blue-300 transition-colors" 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-1-1.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="font-medium">Feature Requests</span>
          </a>
          <a href="#" class="flex items-center px-4 py-2 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-blue-100 dark:hover:bg-blue-900 transition-colors duration-200 border border-transparent hover:border-blue-400 dark:hover:border-blue-600 group">
            <svg class="w-5 h-5 mr-3 text-blue-500 group-hover:text-blue-700 dark:group-hover:text-blue-300 transition-colors" 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 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
            <span class="font-medium">Bug Reports</span>
          </a>
          <a href="#" class="flex items-center px-4 py-2 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-blue-100 dark:hover:bg-blue-900 transition-colors duration-200 border border-transparent hover:border-blue-400 dark:hover:border-blue-600 group">
            <svg class="w-5 h-5 mr-3 text-blue-500 group-hover:text-blue-700 dark:group-hover:text-blue-300 transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16L2 12l4-4"></path></svg>
            <span class="font-medium">Technical Discussions</span>
          </a>
        </nav>
      </div>

      <!-- Main Content (Topic List) -->
      <div class="md:col-span-2 p-6 sm:p-8 lg:p-10">
        <h3 class="text-xl sm:text-2xl font-bold text-blue-800 dark:text-blue-200 mb-6">
          Recent Topics
        </h3>

        <div class="space-y-4">
          <!-- Topic Item 1 -->
          <div class="bg-gray-50 dark:bg-gray-800 p-4 rounded-lg shadow-sm hover:shadow-md transition-shadow duration-200
                      border border-gray-200 dark:border-gray-700 flex flex-col md:flex-row items-start md:items-center space-y-3 md:space-y-0 md:space-x-4">
            <div class="flex-shrink-0">
              <img class="w-10 h-10 rounded-full object-cover border-2 border-blue-400 dark:border-blue-600 shadow" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
            </div>
            <div class="flex-grow">
              <a href="#" class="text-lg font-semibold text-blue-700 dark:text-blue-300 hover:underline">
                Best Practices for Scalable Microservices Architecture
              </a>
              <p class="text-sm text-gray-600 dark:text-gray-400 line-clamp-2 md:line-clamp-1 mt-1 sm:mt-0">
                <span class="hidden sm:inline">Posted by </span><a href="#" class="font-medium hover:underline">Alex Johnson</a> on October 26, 2023
              </p>
            </div>
            <div class="flex-shrink-0 text-right md:text-left">
              <div class="flex items-center space-x-4">
                <span class="flex items-center text-gray-500 dark:text-gray-400 text-sm">
                  <svg class="w-4 h-4 mr-1 text-blue-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.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
                  24
                </span>
                <span class="flex items-center text-gray-500 dark:text-gray-400 text-sm">
                  <svg class="w-4 h-4 mr-1 text-blue-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="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
                </span>
              </div>
            </div>
          </div>

          <!-- Topic Item 2 -->
          <div class="bg-gray-50 dark:bg-gray-800 p-4 rounded-lg shadow-sm hover:shadow-md transition-shadow duration-200
                      border border-gray-200 dark:border-gray-700 flex flex-col md:flex-row items-start md:items-center space-y-3 md:space-y-0 md:space-x-4">
            <div class="flex-shrink-0">
              <img class="w-10 h-10 rounded-full object-cover border-2 border-blue-400 dark:border-blue-600 shadow" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
            </div>
            <div class="flex-grow">
              <a href="#" class="text-lg font-semibold text-blue-700 dark:text-blue-300 hover:underline">
                Understanding new CSS features in Modern Browsers
              </a>
              <p class="text-sm text-gray-600 dark:text-gray-400 line-clamp-2 md:line-clamp-1 mt-1 sm:mt-0">
                <span class="hidden sm:inline">Posted by </span><a href="#" class="font-medium hover:underline">Sarah Lee</a> on October 25, 2023
              </p>
            </div>
            <div class="flex-shrink-0 text-right md:text-left">
              <div class="flex items-center space-x-4">
                <span class="flex items-center text-gray-500 dark:text-gray-400 text-sm">
                  <svg class="w-4 h-4 mr-1 text-blue-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.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
                  18
                </span>
                <span class="flex items-center text-gray-500 dark:text-gray-400 text-sm">
                  <svg class="w-4 h-4 mr-1 text-blue-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="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>
                  870
                </span>
              </div>
            </div>
          </div>

          <!-- Topic Item 3 -->
          <div class="bg-gray-50 dark:bg-gray-800 p-4 rounded-lg shadow-sm hover:shadow-md transition-shadow duration-200
                      border border-gray-200 dark:border-gray-700 flex flex-col md:flex-row items-start md:items-center space-y-3 md:space-y-0 md:space-x-4">
            <div class="flex-shrink-0">
              <img class="w-10 h-10 rounded-full object-cover border-2 border-blue-400 dark:border-blue-600 shadow" src="https://randomuser.me/api/portraits/men/19.jpg" alt="User Avatar">
            </div>
            <div class="flex-grow">
              <a href="#" class="text-lg font-semibold text-blue-700 dark:text-blue-300 hover:underline">
                Debugging common React performance bottlenecks
              </a>
              <p class="text-sm text-gray-600 dark:text-gray-400 line-clamp-2 md:line-clamp-1 mt-1 sm:mt-0">
                <span class="hidden sm:inline">Posted by </span><a href="#" class="font-medium hover:underline">David Kim</a> on October 24, 2023
              </p>
            </div>
            <div class="flex-shrink-0 text-right md:text-left">
              <div class="flex items-center space-x-4">
                <span class="flex items-center text-gray-500 dark:text-gray-400 text-sm">
                  <svg class="w-4 h-4 mr-1 text-blue-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.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
                  31
                </span>
                <span class="flex items-center text-gray-500 dark:text-gray-400 text-sm">
                  <svg class="w-4 h-4 mr-1 text-blue-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="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.5K
                </span>
              </div>
            </div>
          </div>

          <!-- Pagination Placeholder -->
          <div class="flex justify-center mt-8">
            <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
              <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-sm font-medium text-gray-500 hover:bg-gray-50 dark:hover:bg-gray-700">
                <span class="sr-only">Previous</span>
                <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                  <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
                </svg>
              </a>
              <a href="#" aria-current="page" class="relative inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 bg-blue-600 text-sm font-medium text-white hover:bg-blue-700">
                1
              </a>
              <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700">
                2
              </a>
              <a href="#" class="hidden md:inline-flex relative items-center px-4 py-2 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700">
                3
              </a>
              <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-sm font-medium text-gray-500 hover:bg-gray-50 dark:hover:bg-gray-700">
                <span class="sr-only">Next</span>
                <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                  <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
                </svg>
              </a>
            </nav>
          </div>

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

Community Forum Component

A simple, clean, and responsive community forum component designed with a Swiss/International Typography style, featuring a subtle multi-color gradient and dark mode support, suitable for business/corporate websites.

Open Preview

                <div class="font-sans antialiased bg-gray-50 dark:bg-gray-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-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden">
    <!-- Header Section -->
    <div class="bg-gradient-to-r from-purple-500 via-pink-500 to-red-500 p-4 sm:p-6 text-white text-center rounded-t-lg">
      <h1 class="text-2xl sm:text-3xl font-bold tracking-tight mb-1">Community Forum</h1>
      <p class="text-sm sm:text-base opacity-90">Engage, learn, and connect with fellow professionals.</p>
    </div>

    <!-- Forum Body -->
    <div class="p-4 sm:p-6 lg:p-8 grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">

      <!-- Forum Card 1 -->
      <div class="bg-gray-100 dark:bg-gray-700 rounded-lg p-4 transition-all duration-300 hover:shadow-lg dark:hover:shadow-rose-700/50">
        <h3 class="text-lg sm:text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2 whitespace-nowrap overflow-hidden text-ellipsis">General Discussion</h3>
        <p class="text-sm text-gray-600 dark:text-gray-300 mb-3">Share ideas, ask questions, and discuss general topics.</p>
        <div class="flex items-center text-xs text-gray-500 dark:text-gray-400">
          <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="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
          <span>124 Posts</span>
        </div>
      </div>

      <!-- Forum Card 2 -->
      <div class="bg-gray-100 dark:bg-gray-700 rounded-lg p-4 transition-all duration-300 hover:shadow-lg dark:hover:shadow-violet-700/50">
        <h3 class="text-lg sm:text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2 whitespace-nowrap overflow-hidden text-ellipsis">Product Feedback</h3>
        <p class="text-sm text-gray-600 dark:text-gray-300 mb-3">Provide suggestions and report issues for our products.</p>
        <div class="flex items-center text-xs text-gray-500 dark:text-gray-400">
          <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="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
          <span>87 Posts</span>
        </div>
      </div>

      <!-- Forum Card 3 (Hidden on mobile for simplicity) -->
      <div class="hidden md:block bg-gray-100 dark:bg-gray-700 rounded-lg p-4 transition-all duration-300 hover:shadow-lg dark:hover:shadow-cyan-700/50">
        <h3 class="text-lg sm:text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2 whitespace-nowrap overflow-hidden text-ellipsis">Announcements</h3>
        <p class="text-sm text-gray-600 dark:text-gray-300 mb-3">Stay updated with the latest news and company announcements.</p>
        <div class="flex items-center text-xs text-gray-500 dark:text-gray-400">
          <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="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
          <span>15 Posts</span>
        </div>
      </div>

    </div>

    <!-- Call to Action/Footer -->
    <div class="p-4 sm:p-6 lg:p-8 border-t border-gray-200 dark:border-gray-700 flex flex-col sm:flex-row items-center justify-between">
      <p class="text-sm text-gray-600 dark:text-gray-400 text-center sm:text-left mb-4 sm:mb-0">Ready to dive in?</p>
      <button class="px-6 py-2 bg-gradient-to-r from-blue-500 to-teal-500 text-white font-medium rounded-full shadow-md hover:shadow-lg transition duration-300 ease-in-out transform hover:-translate-y-0.5 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75">
        Join the Conversation
      </button>
    </div>
  </div>
</div>

Community Forum Component

A responsive community forum component designed with Material Design principles, autumn color scheme, suitable for educational platforms. Includes dark mode support, a grid layout, discussion topics, and user avatars.

Open Preview

                <div class="p-4 sm:p-6 md:p-8 bg-amber-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100 min-h-screen font-sans">
  <div class="max-w-7xl mx-auto">
    <!-- Header -->
    <div class="flex flex-col sm:flex-row justify-between items-center mb-6 sm:mb-8 bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md">
      <h1 class="text-2xl sm:text-3xl font-bold text-amber-800 dark:text-amber-300 mb-2 sm:mb-0">Community Discussions</h1>
      <div class="flex items-center space-x-2">
        <button class="px-4 py-2 bg-amber-700 hover:bg-amber-800 dark:bg-amber-600 dark:hover:bg-amber-700 text-white rounded-md shadow-sm transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-75">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline-block mr-1" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clip-rule="evenodd" />
          </svg>
          New Topic
        </button>
        <select class="border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-amber-500">
          <option>Sort by: Latest</option>
          <option>Sort by: Popular</option>
          <option>Sort by: Unanswered</option>
        </select>
      </div>
    </div>

    <!-- Main Content Grid -->
    <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6">
      <!-- Categories/Topics Sidebar (md:col-span-1 for desktop) -->
      <aside class="md:col-span-1">
        <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md mb-6">
          <h2 class="text-lg font-semibold text-amber-700 dark:text-amber-400 mb-4">Categories</h2>
          <ul class="space-y-2 text-gray-700 dark:text-gray-300">
            <li><a href="#" class="block px-3 py-2 rounded-md hover:bg-amber-100 dark:hover:bg-gray-700 transition duration-200">General Discussion</a></li>
            <li><a href="#" class="block px-3 py-2 rounded-md hover:bg-amber-100 dark:hover:bg-gray-700 transition duration-200">Course Q&A</a></li>
            <li><a href="#" class="block px-3 py-2 rounded-md hover:bg-amber-100 dark:hover:bg-gray-700 transition duration-200">Project Showcases</a></li>
            <li><a href="#" class="block px-3 py-2 rounded-md hover:bg-amber-100 dark:hover:bg-gray-700 transition duration-200">Study Groups</a></li>
            <li><a href="#" class="block px-3 py-2 rounded-md hover:bg-amber-100 dark:hover:bg-gray-700 transition duration-200">Announcements</a></li>
          </ul>
        </div>

        <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md">
          <h2 class="text-lg font-semibold text-amber-700 dark:text-amber-400 mb-4">Popular Tags</h2>
          <div class="flex flex-wrap gap-2">
            <a href="#" class="inline-block bg-amber-100 dark:bg-gray-700 text-amber-800 dark:text-amber-300 text-xs px-3 py-1 rounded-full hover:bg-amber-200 dark:hover:bg-gray-600 transition">#Python</a>
            <a href="#" class="inline-block bg-amber-100 dark:bg-gray-700 text-amber-800 dark:text-amber-300 text-xs px-3 py-1 rounded-full hover:bg-amber-200 dark:hover:bg-gray-600 transition">#WebDev</a>
            <a href="#" class="inline-block bg-amber-100 dark:bg-gray-700 text-amber-800 dark:text-amber-300 text-xs px-3 py-1 rounded-full hover:bg-amber-200 dark:hover:bg-gray-600 transition">#DataScience</a>
            <a href="#" class="inline-block bg-amber-100 dark:bg-gray-700 text-amber-800 dark:text-amber-300 text-xs px-3 py-1 rounded-full hover:bg-amber-200 dark:hover:bg-gray-600 transition">#MachineLearning</a>
            <a href="#" class="inline-block bg-amber-100 dark:bg-gray-700 text-amber-800 dark:text-amber-300 text-xs px-3 py-1 rounded-full hover:bg-amber-200 dark:hover:bg-gray-600 transition">#Algorithms</a>
          </div>
        </div>
      </aside>

      <!-- Discussion Topics List (md:col-span-2 or 3 for desktop) -->
      <section class="md:col-span-2 lg:col-span-3 space-y-4">
        <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md transition duration-300 hover:shadow-lg">
          <div class="flex items-center mb-2">
            <img class="w-8 h-8 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
            <div>
              <p class="text-sm font-medium text-gray-800 dark:text-gray-200">John Doe</p>
              <p class="text-xs text-gray-500 dark:text-gray-400">Posted 2 hours ago in <span class="text-amber-700 dark:text-amber-400">Course Q&A</span></p>
            </div>
          </div>
          <h3 class="text-lg font-semibold text-amber-800 dark:text-amber-300 mb-2">Understanding Recursion in Python</h3>
          <p class="text-sm text-gray-700 dark:text-gray-300 mb-3 line-clamp-2">I'm struggling to grasp the concept of recursion. Can someone explain it with a simple example? Especially how the call stack works...</p>
          <div class="flex items-center justify-between text-xs text-gray-600 dark:text-gray-400">
            <div class="flex items-center space-x-3">
              <span class="flex items-center"><svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z" /></svg>15 Replies</span>
              <span class="flex items-center"><svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /><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" /></svg>230 Views</span>
            </div>
            <a href="#" class="text-amber-700 dark:text-amber-400 hover:underline">Read More</a>
          </div>
        </div>

        <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md transition duration-300 hover:shadow-lg">
          <div class="flex items-center mb-2">
            <img class="w-8 h-8 rounded-full mr-3" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
            <div>
              <p class="text-sm font-medium text-gray-800 dark:text-gray-200">Jane Smith</p>
              <p class="text-xs text-gray-500 dark:text-gray-400">Posted 5 hours ago in <span class="text-amber-700 dark:text-amber-400">Project Showcases</span></p>
            </div>
          </div>
          <h3 class="text-lg font-semibold text-amber-800 dark:text-amber-300 mb-2">My First Machine Learning Project: Predicting House Prices</h3>
          <p class="text-sm text-gray-700 dark:text-gray-300 mb-3 line-clamp-2">I just finished my first end-to-end ML project and wanted to share it with the community! Any feedback or suggestions would be greatly appreciated...</p>
          <div class="flex items-center justify-between text-xs text-gray-600 dark:text-gray-400">
            <div class="flex items-center space-x-3">
              <span class="flex items-center"><svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z" /></svg>28 Replies</span>
              <span class="flex items-center"><svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /><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" /></svg>480 Views</span>
            </div>
            <a href="#" class="text-amber-700 dark:text-amber-400 hover:underline">Read More</a>
          </div>
        </div>

        <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md transition duration-300 hover:shadow-lg">
          <div class="flex items-center mb-2">
            <img class="w-8 h-8 rounded-full mr-3" src="https://randomuser.me/api/portraits/women/21.jpg" alt="User Avatar">
            <div>
              <p class="text-sm font-medium text-gray-800 dark:text-gray-200">Emily White</p>
              <p class="text-xs text-gray-500 dark:text-gray-400">Posted 1 day ago in <span class="text-amber-700 dark:text-amber-400">Study Groups</span></p>
            </div>
          </div>
          <h3 class="text-lg font-semibold text-amber-800 dark:text-amber-300 mb-2">Looking for Study Group for Advanced Algorithms</h3>
          <p class="text-sm text-gray-700 dark:text-gray-300 mb-3 line-clamp-2">Hi everyone, I'm taking the Advanced Algorithms course and would love to form a study group to go over concepts and practice problems...</p>
          <div class="flex items-center justify-between text-xs text-gray-600 dark:text-gray-400">
            <div class="flex items-center space-x-3">
              <span class="flex items-center"><svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z" /></svg>8 Replies</span>
              <span class="flex items-center"><svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /><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" /></svg>190 Views</span>
            </div>
            <a href="#" class="text-amber-700 dark:text-amber-400 hover:underline">Read More</a>
          </div>
        </div>

        <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md transition duration-300 hover:shadow-lg">
          <div class="flex items-center mb-2">
            <img class="w-8 h-8 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
            <div>
              <p class="text-sm font-medium text-gray-800 dark:text-gray-200">Michael Brown</p>
              <p class="text-xs text-gray-500 dark:text-gray-400">Posted 2 days ago in <span class="text-amber-700 dark:text-amber-400">General Discussion</span></p>
            </div>
          </div>
          <h3 class="text-lg font-semibold text-amber-800 dark:text-amber-300 mb-2">Best Resources for Learning React Hooks?</h3>
          <p class="text-sm text-gray-700 dark:text-gray-300 mb-3 line-clamp-2">I'm looking for recommendations on the best online resources, tutorials, or courses to learn React Hooks effectively. Any suggestions?</p>
          <div class="flex items-center justify-between text-xs text-gray-600 dark:text-gray-400">
            <div class="flex items-center space-x-3">
              <span class="flex items-center"><svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z" /></svg>20 Replies</span>
              <span class="flex items-center"><svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /><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" /></svg>350 Views</span>
            </div>
            <a href="#" class="text-amber-700 dark:text-amber-400 hover:underline">Read More</a>
          </div>
        </div>
      </section>
    </div>
  </div>
</div>

Community Forum Component (E-commerce Bauhaus)

A simple, responsive community forum component designed for e-commerce, featuring Bauhaus-inspired geometric forms and a muted color palette. Includes dark mode support.

Open Preview

                <div class="p-4 sm:p-6 md:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen font-sans antialiased">

  <!-- Section Title -->
  <h2 class="text-2xl sm:text-3xl font-bold mb-6 text-gray-800 dark:text-gray-100 text-center uppercase tracking-wider">
    Customer Stories & Feedback
  </h2>

  <div class="max-w-4xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-6">

    <!-- Forum Card 1 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-5 border border-gray-200 dark:border-gray-700 relative">
      <div class="absolute -top-3 -left-3 w-8 h-8 bg-blue-500 transform rotate-45"></div>
      <div class="flex items-start mb-4">
        <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-blue-500 dark:border-blue-400 mr-4">
        <div>
          <p class="font-semibold text-lg text-gray-800 dark:text-gray-100">Jane Doe</p>
          <p class="text-sm text-gray-500 dark:text-gray-400">2 hours ago</p>
        </div>
      </div>
      <h3 class="text-xl font-semibold mb-3 text-gray-700 dark:text-gray-200">"Absolutely Transformed My Workflow!"</h3>
      <p class="text-gray-600 dark:text-gray-300 mb-4 text-base leading-relaxed">
        I was skeptical at first, but this product exceeded all my expectations. The quality is top-notch,
        and it integrated seamlessly with my existing setup. Highly recommend for anyone looking to boost productivity!
      </p>
      <div class="flex items-center text-gray-500 dark:text-gray-400 text-sm">
        <span class="flex items-center mr-4">
          <svg class="w-4 h-4 mr-1 fill-blue-500 dark:fill-blue-400" viewBox="0 0 24 24"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>
          12 Likes
        </span>
        <span class="flex items-center">
          <svg class="w-4 h-4 mr-1 fill-gray-500 dark:fill-gray-400" viewBox="0 0 24 24"><path d="M21 11.5c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5-.67 1.5-1.5 1.5-1.5-.67-1.5-1.5zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zM12 6c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6zm0 10c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4z"/></svg>
          5 Comments
        </span>
      </div>
    </div>

    <!-- Forum Card 2 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-5 border border-gray-200 dark:border-gray-700 relative">
      <div class="absolute -top-3 -right-3 w-8 h-8 bg-red-500 transform -rotate-45"></div>
      <div class="flex items-start mb-4">
        <img src="https://randomuser.me/api/portraits/men/29.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-red-500 dark:border-red-400 mr-4">
        <div>
          <p class="font-semibold text-lg text-gray-800 dark:text-gray-100">John Smith</p>
          <p class="text-sm text-gray-500 dark:text-gray-400">1 day ago</p>
        </div>
      </div>
      <h3 class="text-xl font-semibold mb-3 text-gray-700 dark:text-gray-200">"Great Product, Minor Suggestion"</h3>
      <p class="text-gray-600 dark:text-gray-300 mb-4 text-base leading-relaxed">
        Overall, I'm very satisfied with my purchase. The build quality is solid, and it performs as advertised.
        My only constructive feedback would be to consider adding 'X' feature in a future update.
      </p>
      <div class="flex items-center text-gray-500 dark:text-gray-400 text-sm">
        <span class="flex items-center mr-4">
          <svg class="w-4 h-4 mr-1 fill-red-500 dark:fill-red-400" viewBox="0 0 24 24"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>
          8 Likes
        </span>
        <span class="flex items-center">
          <svg class="w-4 h-4 mr-1 fill-gray-500 dark:fill-gray-400" viewBox="0 0 24 24"><path d="M21 11.5c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5-.67 1.5-1.5 1.5-1.5-.67-1.5-1.5zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zM12 6c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6zm0 10c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4z"/></svg>
          2 Comments
        </span>
      </div>
    </div>

    <!-- Forum Card 3 (Placeholder for more, hidden on small screens) -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-5 border border-gray-200 dark:border-gray-700 hidden md:block relative">
      <div class="absolute -bottom-3 -right-3 w-8 h-8 bg-yellow-500 transform rotate-45"></div>
      <div class="flex items-start mb-4">
        <img src="https://randomuser.me/api/portraits/women/77.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-yellow-500 dark:border-yellow-400 mr-4">
        <div>
          <p class="font-semibold text-lg text-gray-800 dark:text-gray-100">Emily White</p>
          <p class="text-sm text-gray-500 dark:text-gray-400">3 days ago</p>
        </div>
      </div>
      <h3 class="text-xl font-semibold mb-3 text-gray-700 dark:text-gray-200">"Fantastic Support Team!"</h3>
      <p class="text-gray-600 dark:text-gray-300 mb-4 text-base leading-relaxed">
        I had a small issue with my order, and the customer support was incredibly responsive and helpful.
        They resolved my problem quickly and professionally. Really appreciate the dedication!
      </p>
      <div class="flex items-center text-gray-500 dark:text-gray-400 text-sm">
        <span class="flex items-center mr-4">
          <svg class="w-4 h-4 mr-1 fill-yellow-500 dark:fill-yellow-400" viewBox="0 0 24 24"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>
          15 Likes
        </span>
        <span class="flex items-center">
          <svg class="w-4 h-4 mr-1 fill-gray-500 dark:fill-gray-400" viewBox="0 0 24 24"><path d="M21 11.5c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5-.67 1.5-1.5 1.5-1.5-.67-1.5-1.5zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zM12 6c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6zm0 10c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4z"/></svg>
          7 Comments
        </span>
      </div>
    </div>

    <!-- Forum Card 4 (Placeholder for more, hidden on small screens) -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-5 border border-gray-200 dark:border-gray-700 hidden md:block relative">
      <div class="absolute -bottom-3 -left-3 w-8 h-8 bg-green-500 transform -rotate-45"></div>
      <div class="flex items-start mb-4">
        <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-green-500 dark:border-green-400 mr-4">
        <div>
          <p class="font-semibold text-lg text-gray-800 dark:text-gray-100">David Lee</p>
          <p class="text-sm text-gray-500 dark:text-gray-400">5 days ago</p>
        </div>
      </div>
      <h3 class="text-xl font-semibold mb-3 text-gray-700 dark:text-gray-200">"A Must-Have for Every Enthusiast!"</h3>
      <p class="text-gray-600 dark:text-gray-300 mb-4 text-base leading-relaxed">
        I've been looking for a product like this for ages. It delivers on all its promises and more.
        Sturdy, efficient, and well-designed. Don't hesitate to buy it!
      </p>
      <div class="flex items-center text-gray-500 dark:text-gray-400 text-sm">
        <span class="flex items-center mr-4">
          <svg class="w-4 h-4 mr-1 fill-green-500 dark:fill-green-400" viewBox="0 0 24 24"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>
          20 Likes
        </span>
        <span class="flex items-center">
          <svg class="w-4 h-4 mr-1 fill-gray-500 dark:fill-gray-400" viewBox="0 0 24 24"><path d="M21 11.5c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5-.67 1.5-1.5 1.5-1.5-.67-1.5-1.5zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zM12 6c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6zm0 10c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4z"/></svg>
          10 Comments
        </span>
      </div>
    </div>

  </div>

  <!-- Call to Action / View More -->
  <div class="text-center mt-8">
    <button class="px-6 py-3 bg-gray-700 dark:bg-gray-200 text-white dark:text-gray-900 font-bold uppercase rounded-md 
                   tracking-wider hover:bg-gray-600 dark:hover:bg-gray-300 transition duration-300 ease-in-out
                   border border-gray-700 dark:border-gray-200 shadow-md">
      View All Discussions
    </button>
  </div>

</div>

Community Forum Component

A simple and vibrant community forum component with gradient transitions, designed for entertainment/media platforms. It features a responsive layout with dark mode support.

Open Preview

                <div class="p-4 sm:p-6 md:p-8 bg-gradient-to-br from-purple-500 via-pink-500 to-red-500 dark:from-gray-900 dark:via-purple-900 dark:to-pink-900 min-h-screen flex items-center justify-center font-sans">
  <div class="w-full max-w-4xl bg-white bg-opacity-90 dark:bg-gray-800 dark:bg-opacity-95 rounded-xl shadow-2xl overflow-hidden transform transition-all duration-300 ease-in-out hover:scale-[1.01]">
    <div class="p-6 sm:p-8 border-b border-gray-200 dark:border-gray-700">
      <h2 class="text-3xl sm:text-4xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-red-600 to-indigo-600 dark:from-red-400 dark:to-indigo-400 mb-2 transition-colors duration-300">
        Cosmic Conversations
      </h2>
      <p class="text-lg sm:text-xl text-gray-700 dark:text-gray-300 transition-colors duration-300">
        Join the vibrant discussion! Your hub for all things entertainment.
      </p>
    </div>

    <div class="p-6 sm:p-8 grid gap-6 sm:gap-8">

      <!-- Forum Post 1 -->
      <div class="bg-white dark:bg-gray-900 rounded-lg p-5 sm:p-6 shadow-lg transform transition-all duration-300 ease-in-out hover:shadow-xl hover:-translate-y-1 border border-gray-100 dark:border-gray-700">
        <div class="flex items-center mb-4">
          <img class="w-12 h-12 rounded-full mr-4 border-2 border-pink-500 dark:border-purple-500" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
          <div>
            <p class="font-semibold text-lg text-gray-900 dark:text-white">Alex 'The Wanderer' Ross</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">Posted 2 hours ago</p>
          </div>
        </div>
        <h3 class="text-xl md:text-2xl font-bold mb-3 text-gray-800 dark:text-gray-100">"Favorite Sci-Fi series of all time?" 🎉</h3>
        <p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4">
          Just finished binge-watching 'Starbound Chronicles' again and it got me thinking. What's everyone's absolute favorite sci-fi series, movies included? The one that changed your view of the universe!
        </p>
        <img class="w-full h-48 object-cover rounded-lg mb-4 shadow" src="https://picsum.photos/600/300?random=1" alt="Placeholder image for post">
        <div class="flex items-center justify-between text-gray-600 dark:text-gray-400 text-sm">
          <div class="flex items-center space-x-4">
            <button class="flex items-center space-x-1 text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300 transition-colors duration-200">
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path></svg>
              <span>154 Likes</span>
            </button>
            <button class="flex items-center space-x-1 text-blue-500 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300 transition-colors duration-200">
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.707 3.293a1 1 0 010 1.414L5.414 7H11a7 7 0 017 7v2a1 1 0 11-2 0v-2a5 5 0 00-5-5H5.414l2.293 2.293a1 1 0 11-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
              <span>48 Comments</span>
            </button>
          </div>
          <a href="#" class="text-indigo-600 hover:text-indigo-800 dark:text-indigo-400 dark:hover:text-indigo-300 font-semibold transition-colors duration-200">Read More</a>
        </div>
      </div>

      <!-- Forum Post 2 -->
      <div class="bg-white dark:bg-gray-900 rounded-lg p-5 sm:p-6 shadow-lg transform transition-all duration-300 ease-in-out hover:shadow-xl hover:-translate-y-1 border border-gray-100 dark:border-gray-700">
        <div class="flex items-center mb-4">
          <img class="w-12 h-12 rounded-full mr-4 border-2 border-green-500 dark:border-teal-500" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
          <div>
            <p class="font-semibold text-lg text-gray-900 dark:text-white">Luna 'The Dreamweaver' Bright</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">Posted 5 hours ago</p>
          </div>
        </div>
        <h3 class="text-xl md:text-2xl font-bold mb-3 text-gray-800 dark:text-gray-100">"Underrated Indie Games for a Weekend Binge?" 🎮✨</h3>
        <p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4">
          Hey fellow gamers! My usual rotation is getting a bit stale. Any recommendations for truly underrated indie games that flew under the radar but deserve some love? Thinking unique art styles or compelling narratives.
        </p>
        <img class="w-full h-48 object-cover rounded-lg mb-4 shadow" src="https://picsum.photos/600/300?random=2" alt="Placeholder image for post">
        <div class="flex items-center justify-between text-gray-600 dark:text-gray-400 text-sm">
          <div class="flex items-center space-x-4">
            <button class="flex items-center space-x-1 text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300 transition-colors duration-200">
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path></svg>
              <span>87 Likes</span>
            </button>
            <button class="flex items-center space-x-1 text-blue-500 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300 transition-colors duration-200">
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.707 3.293a1 1 0 010 1.414L5.414 7H11a7 7 0 017 7v2a1 1 0 11-2 0v-2a5 5 0 00-5-5H5.414l2.293 2.293a1 1 0 11-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
              <span>22 Comments</span>
            </button>
          </div>
          <a href="#" class="text-indigo-600 hover:text-indigo-800 dark:text-indigo-400 dark:hover:text-indigo-300 font-semibold transition-colors duration-200">View Discussion</a>
        </div>
      </div>

    </div>

    <div class="p-6 sm:p-8 border-t border-gray-200 dark:border-gray-700 flex justify-center">
      <button class="px-8 py-3 rounded-full text-white font-bold text-lg 
                     bg-gradient-to-r from-red-500 to-orange-500 
                     hover:from-red-600 hover:to-orange-600 
                     dark:from-pink-600 dark:to-purple-600 
                     dark:hover:from-pink-700 dark:hover:to-purple-700 
                     shadow-lg transform transition-all duration-300 
                     hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 
                     focus:ring-offset-2 focus:ring-red-500 dark:focus:ring-pink-500">
        Create New Post
      </button>
    </div>
  </div>
</div>

Community Forum Component - Retro Ocean Blue

A simple, responsive community forum component with a retro 80s/90s vibe, designed for job and career platforms. Features ocean blue color scheme and dark mode support.

Open Preview

                <div class="bg-gradient-to-br from-blue-300 to-sky-500 min-h-screen p-4 font-mono text-gray-800 dark:from-sky-900 dark:to-blue-950 dark:text-gray-200">
  <div class="max-w-2xl mx-auto bg-white rounded-lg shadow-xl overflow-hidden transform perspective-100 rotate-x-3 transition-transform duration-500 ease-in-out hover:rotate-x-0 dark:bg-gray-800">
    <div class="border-b-4 border-blue-600 px-6 py-4 flex items-center justify-between bg-blue-700 text-white dark:bg-blue-900 dark:border-blue-700">
      <h2 class="text-2xl font-bold tracking-wide uppercase drop-shadow-lg">\/\/ Career HQ Forum \/\/</h2>
      <span class="text-sm italic">established 1992</span>
    </div>
    <div class="px-6 py-4 border-b border-blue-200 dark:border-blue-700">
      <div class="flex items-center space-x-4">
        <img src="https://randomuser.me/api/portraits/men/67.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-4 border-blue-400 object-cover shadow-md dark:border-blue-600">
        <div class="flex-1">
          <p class="text-blue-700 text-lg font-semibold dark:text-blue-300">New Post:</p>
          <input type="text" placeholder="Enter your topic title here..." class="w-full p-2 mt-1 border-2 border-blue-400 rounded-md bg-blue-50 text-blue-800 focus:outline-none focus:border-blue-600 dark:bg-blue-900 dark:border-blue-600 dark:text-blue-100">
        </div>
        <button class="px-5 py-2 bg-blue-600 text-white font-bold rounded-lg shadow-lg hover:bg-blue-700 transition-colors duration-200 transform hover:-translate-y-1 active:translate-y-0 active:shadow-md dark:bg-blue-700 dark:hover:bg-blue-800">
          POST <span class="hidden sm:inline">TOPIC</span>
        </button>
      </div>
    </div>
    <div class="p-6 space-y-6">
      <!-- Forum Thread 1 -->
      <div class="bg-blue-50 p-4 rounded-lg shadow-md border-l-4 border-blue-500 transform transition-transform duration-300 hover:scale-[1.01] dark:bg-blue-900 dark:border-blue-600">
        <div class="flex items-start mb-2">
          <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3 border-2 border-blue-300 dark:border-blue-500">
          <div>
            <p class="font-bold text-blue-800 dark:text-blue-200">JaneDoe87</p>
            <p class="text-xs text-gray-500 dark:text-gray-400">Posted: 10/26/23 14:35 MST</p>
          </div>
        </div>
        <h3 class="text-xl font-bold text-blue-700 mb-2 dark:text-blue-300">Seeking Advice: Transitioning from Marketing to Tech Sales!</h3>
        <p class="text-gray-700 dark:text-gray-300">Hey folks, I'm looking to pivot my career into tech sales. Any tips on resumes, interviews, or entry-level roles? What skills should I highlight?</p>
        <div class="mt-3 flex justify-between items-center text-sm">
          <span class="text-blue-600 dark:text-blue-400">Replies: 12</span>
          <a href="#" class="text-blue-600 hover:underline dark:text-blue-400 dark:hover:text-blue-200">[ View Thread ]</a>
        </div>
      </div>

      <!-- Forum Thread 2 -->
      <div class="bg-blue-50 p-4 rounded-lg shadow-md border-l-4 border-blue-500 transform transition-transform duration-300 hover:scale-[1.01] dark:bg-blue-900 dark:border-blue-600">
        <div class="flex items-start mb-2">
          <img src="https://randomuser.me/api/portraits/men/22.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3 border-2 border-blue-300 dark:border-blue-500">
          <div>
            <p class="font-bold text-blue-800 dark:text-blue-200">CodeMaestro</p>
            <p class="text-xs text-gray-500 dark:text-gray-400">Posted: 10/26/23 11:01 MST</p>
          </div>
        </div>
        <h3 class="text-xl font-bold text-blue-700 mb-2 dark:text-blue-300">Frontend Devs: Best Practices for Responsive Design?</h3>
        <p class="text-gray-700 dark:text-gray-300">What are your go-to strategies for ensuring truly responsive designs? Any specific frameworks or CSS methodologies you prefer?</p>
        <div class="mt-3 flex justify-between items-center text-sm">
          <span class="text-blue-600 dark:text-blue-400">Replies: 28</span>
          <a href="#" class="text-blue-600 hover:underline dark:text-blue-400 dark:hover:text-blue-200">[ View Thread ]</a>
        </div>
      </div>

      <!-- Forum Thread 3 -->
      <div class="bg-blue-50 p-4 rounded-lg shadow-md border-l-4 border-blue-500 transform transition-transform duration-300 hover:scale-[1.01] dark:bg-blue-900 dark:border-blue-600">
        <div class="flex items-start mb-2">
          <img src="https://randomuser.me/api/portraits/women/3.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3 border-2 border-blue-300 dark:border-blue-500">
          <div>
            <p class="font-bold text-blue-800 dark:text-blue-200">ResumeGuru</p>
            <p class="text-xs text-gray-500 dark:text-gray-400">Posted: 10/25/23 09:10 MST</p>
          </div>
        </div>
        <h3 class="text-xl font-bold text-blue-700 mb-2 dark:text-blue-300">Tips for Acing Your Next Video Interview</h3>
        <p class="text-gray-700 dark:text-gray-300">With more remote roles, video interviews are standard. Share your best advice for setup, lighting, virtual backgrounds, and common pitfalls!</p>
        <div class="mt-3 flex justify-between items-center text-sm">
          <span class="text-blue-600 dark:text-blue-400">Replies: 9</span>
          <a href="#" class="text-blue-600 hover:underline dark:text-blue-400 dark:hover:text-blue-200">[ View Thread ]</a>
        </div>
      </div>
    </div>
    <div class="border-t-4 border-blue-600 px-6 py-4 flex items-center justify-between text-xs text-gray-600 bg-blue-700 text-white dark:bg-blue-900 dark:border-blue-700 dark:text-gray-300">
      <p>&copy; 2023 CareerHQ - All Rights Reserved</p>
      <p>Forum Version 4.2 Beta</p>
    </div>
  </div>
</div>

Community Forum Component

A complex, paper/print-inspired community forum component for weather and climate discussions, using a complementary color scheme and full responsiveness with dark mode support.

Open Preview

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100 p-4 sm:p-6 lg:p-8 font-serif">

  <!-- Outer 'Paper' Container -->
  <div class="max-w-7xl mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden
              border border-gray-200 dark:border-gray-700
              flex flex-col lg:flex-row">

    <!-- Left Sidebar: Categories/Navigation -->
    <aside class="w-full lg:w-1/4 bg-blue-50 dark:bg-gray-700 p-6 border-b lg:border-b-0 lg:border-r
                   border-gray-200 dark:border-gray-600 flex-shrink-0">
      <h2 class="text-2xl font-bold mb-6 text-blue-800 dark:text-blue-300 tracking-wide">Forum Topics</h2>
      <ul class="space-y-3">
        <li><a href="#" class="block text-lg py-2 px-3 rounded-md transition-colors duration-200
                      font-semibold text-blue-700 dark:text-blue-400
                      hover:bg-blue-100 dark:hover:bg-gray-600
                      focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">Latest Forecasts</a></li>
        <li><a href="#" class="block text-lg py-2 px-3 rounded-md transition-colors duration-200
                      text-gray-700 dark:text-gray-300
                      hover:bg-blue-100 dark:hover:bg-gray-600
                      focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">Climate Change Discussion</a></li>
        <li><a href="#" class="block text-lg py-2 px-3 rounded-md transition-colors duration-200
                      text-gray-700 dark:text-gray-300
                      hover:bg-blue-100 dark:hover:bg-gray-600
                      focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">Extreme Weather Events</a></li>
        <li><a href="#" class="block text-lg py-2 px-3 rounded-md transition-colors duration-200
                      text-gray-700 dark:text-gray-300
                      hover:bg-blue-100 dark:hover:bg-gray-600
                      focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">Weather Photography</a></li>
        <li><a href="#" class="block text-lg py-2 px-3 rounded-md transition-colors duration-200
                      text-gray-700 dark:text-gray-300
                      hover:bg-blue-100 dark:hover:bg-gray-600
                      focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">Science & Research</a></li>
        <li><a href="#" class="block text-lg py-2 px-3 rounded-md transition-colors duration-200
                      text-gray-700 dark:text-gray-300
                      hover:bg-blue-100 dark:hover:bg-gray-600
                      focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">Regional Weather Watch</a></li>
      </ul>

      <div class="mt-8 pt-6 border-t border-gray-300 dark:border-gray-500">
        <h3 class="text-xl font-bold mb-4 text-blue-800 dark:text-blue-300">Popular Tags</h3>
        <div class="flex flex-wrap gap-2">
          <span class="bg-blue-200 dark:bg-blue-700 text-blue-800 dark:text-blue-100 text-sm px-3 py-1 rounded-full">#Hurricane</span>
          <span class="bg-blue-200 dark:bg-blue-700 text-blue-800 dark:text-blue-100 text-sm px-3 py-1 rounded-full">#ClimateModeling</span>
          <span class="bg-blue-200 dark:bg-blue-700 text-blue-800 dark:text-blue-100 text-sm px-3 py-1 rounded-full">#ElNino</span>
          <span class="bg-blue-200 dark:bg-blue-700 text-blue-800 dark:text-blue-100 text-sm px-3 py-1 rounded-full">#Drought</span>
          <span class="bg-blue-200 dark:bg-blue-700 text-blue-800 dark:text-blue-100 text-sm px-3 py-1 rounded-full">#SolarPower</span>
        </div>
      </div>
    </aside>

    <!-- Main Content Area: Threads List -->
    <main class="flex-1 p-6 lg:p-8">
      <h1 class="text-3xl font-bold mb-8 text-indigo-900 dark:text-indigo-200 tracking-wide">Current Discussions</h1>

      <!-- Search and Sort -->
      <div class="flex flex-col sm:flex-row justify-between items-center mb-6 space-y-4 sm:space-y-0 sm:space-x-4">
        <div class="relative w-full sm:w-1/2 lg:w-1/3">
          <input type="text" placeholder="Search discussions..." class="w-full px-4 py-2 pr-10 rounded-md
                                           border border-gray-300 dark:border-gray-600 focus:ring-2 focus:ring-blue-500
                                           bg-gray-50 dark:bg-gray-700 text-gray-800 dark:text-gray-200 shadow-sm">
          <svg class="absolute right-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400 dark:text-gray-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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
        </div>
        <div class="flex w-full sm:w-auto space-x-4">
          <select class="px-4 py-2 rounded-md border border-gray-300 dark:border-gray-600 focus:ring-2 focus:ring-blue-500
                         bg-gray-50 dark:bg-gray-700 text-gray-800 dark:text-gray-200 shadow-sm">
            <option>Sort by: Latest</option>
            <option>Sort by: Popular</option>
            <option>Sort by: Unanswered</option>
          </select>
          <button class="px-5 py-2 rounded-md bg-green-600 dark:bg-green-700 text-white font-semibold shadow-md
                          hover:bg-green-700 dark:hover:bg-green-800 transition-colors duration-200
                          focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800">
            New Thread
          </button>
        </div>
      </div>

      <!-- Thread List -->
      <div class="space-y-5">

        <!-- Thread Item 1 -->
        <article class="bg-gray-50 dark:bg-gray-700 p-5 rounded-lg shadow-sm
                        border border-gray-200 dark:border-gray-600 hover:shadow-md transition-shadow duration-200">
          <div class="sm:flex sm:justify-between sm:items-start mb-3">
            <h3 class="text-xl font-bold text-indigo-800 dark:text-indigo-300 mb-2 sm:mb-0">
              <a href="#" class="hover:underline focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-700">Impact of La Niña on Global Crop Yields This Year</a>
            </h3>
            <span class="text-sm text-gray-500 dark:text-gray-400 flex-shrink-0">2 days ago</span>
          </div>
          <p class="text-gray-700 dark:text-gray-300 mb-4 line-clamp-2">Discussing the latest climate models and their predictions for agricultural productivity based on La Niña's influence...</p>
          <div class="flex items-center text-sm text-gray-600 dark:text-gray-400">
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-3 border border-gray-300 dark:border-gray-500">
            <span>Posted by <span class="font-medium text-blue-700 dark:text-blue-300">ClimateMaster</span></span>
            <span class="mx-3 text-gray-400 dark:text-gray-500">|</span>
            <span>15 Replies</span>
            <span class="ml-auto flex items-center">
              <svg class="w-5 h-5 mr-1 text-gray-500 dark:text-gray-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="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg>
              32 Likes
            </span>
          </div>
        </article>

        <!-- Thread Item 2 -->
        <article class="bg-gray-50 dark:bg-gray-700 p-5 rounded-lg shadow-sm
                        border border-gray-200 dark:border-gray-600 hover:shadow-md transition-shadow duration-200">
          <div class="sm:flex sm:justify-between sm:items-start mb-3">
            <h3 class="text-xl font-bold text-indigo-800 dark:text-indigo-300 mb-2 sm:mb-0">
              <a href="#" class="hover:underline focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-700">How accurate are long-range hurricane season predictions?</a>
            </h3>
            <span class="text-sm text-gray-500 dark:text-gray-400 flex-shrink-0">1 week ago</span>
          </div>
          <p class="text-gray-700 dark:text-gray-300 mb-4 line-clamp-2">Exploring the methodologies behind seasonal hurricane forecasts and their historical reliability, with insights from meteorologists...</p>
          <div class="flex items-center text-sm text-gray-600 dark:text-gray-400">
            <img src="https://randomuser.me/api/portraits/women/45.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-3 border border-gray-300 dark:border-gray-500">
            <span>Posted by <span class="font-medium text-blue-700 dark:text-blue-300">StormChaser88</span></span>
            <span class="mx-3 text-gray-400 dark:text-gray-500">|</span>
            <span>8 Replies</span>
            <span class="ml-auto flex items-center">
              <svg class="w-5 h-5 mr-1 text-gray-500 dark:text-gray-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="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg>
              21 Likes
            </span>
          </div>
        </article>

        <!-- Thread Item 3 -->
        <article class="bg-gray-50 dark:bg-gray-700 p-5 rounded-lg shadow-sm
                        border border-gray-200 dark:border-gray-600 hover:shadow-md transition-shadow duration-200">
          <div class="sm:flex sm:justify-between sm:items-start mb-3">
            <h3 class="text-xl font-bold text-indigo-800 dark:text-indigo-300 mb-2 sm:mb-0">
              <a href="#" class="hover:underline focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-700">Your local weather station setup - share tips!</a>
            </h3>
            <span class="text-sm text-gray-500 dark:text-gray-400 flex-shrink-0">1 month ago</span>
          </div>
          <p class="text-gray-700 dark:text-gray-300 mb-4 line-clamp-2">A thread for enthusiasts to share their personal weather station configurations, sensor recommendations, and data analysis software...</p>
          <div class="flex items-center text-sm text-gray-600 dark:text-gray-400">
            <img src="https://randomuser.me/api/portraits/lego/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-3 border border-gray-300 dark:border-gray-500">
            <span>Posted by <span class="font-medium text-blue-700 dark:text-blue-300">WeatherGeek</span></span>
            <span class="mx-3 text-gray-400 dark:text-gray-500">|</span>
            <span>24 Replies</span>
            <span class="ml-auto flex items-center">
              <svg class="w-5 h-5 mr-1 text-gray-500 dark:text-gray-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="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg>
              48 Likes
            </span>
          </div>
        </article>

      </div>

      <!-- Pagination -->
      <nav class="mt-8 flex justify-center" aria-label="Pagination">
        <ul class="flex items-center space-x-2">
          <li>
            <a href="#" class="px-3 py-2 rounded-md border border-gray-300 dark:border-gray-600 
                           bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-300 transition-colors duration-200 
                           hover:bg-gray-100 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800">
              <span class="sr-only">Previous</span>
              &laquo;
            </a>
          </li>
          <li>
            <a href="#" class="px-3 py-2 rounded-md border border-blue-500 dark:border-blue-600 
                           bg-blue-500 dark:bg-blue-600 text-white font-medium transition-colors duration-200 
                           hover:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800">
              1
            </a>
          </li>
          <li>
            <a href="#" class="px-3 py-2 rounded-md border border-gray-300 dark:border-gray-600 
                           bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-300 transition-colors duration-200 
                           hover:bg-gray-100 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800">
              2
            </a>
          </li>
          <li>
            <a href="#" class="px-3 py-2 rounded-md border border-gray-300 dark:border-gray-600 
                           bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-300 transition-colors duration-200 
                           hover:bg-gray-100 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800">
              3
            </a>
          </li>
          <li>
            <a href="#" class="px-3 py-2 rounded-md border border-gray-300 dark:border-gray-600 
                           bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-300 transition-colors duration-200 
                           hover:bg-gray-100 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800">
              <span class="sr-only">Next</span>
              &raquo;
            </a>
          </li>
        </ul>
      </nav>

    </main>

  </div>

</div>

Community Forum Component

A responsive community forum component for finance/banking with a Material Design style and candy/sweet color scheme, featuring bright colors like bubblegum pink and mint green, dark mode support, and semantic HTML.

Open Preview

                <div class="p-4 sm:p-6 md:p-8 bg-gradient-to-br from-pink-100 via-purple-100 to-green-100 dark:from-gray-900 dark:via-purple-950 dark:to-teal-950 min-h-screen font-sans">
  <div class="max-w-7xl mx-auto bg-white dark:bg-gray-800 rounded-xl shadow-xl overflow-hidden">
    <header class="p-4 sm:p-6 bg-gradient-to-r from-pink-400 to-purple-500 dark:from-gray-900 dark:to-purple-900 text-white rounded-t-xl shadow-md">
      <h1 class="text-2xl sm:text-3xl font-extrabold tracking-tight mb-1">Finance Community Forum</h1>
      <p class="text-sm opacity-90">Connect, share, and learn about financial insights.</p>
    </header>

    <div class="flex flex-col md:flex-row gap-4 p-4 sm:p-6">
      <!-- Left Sidebar: Categories/Navigation -->
      <aside class="w-full md:w-1/4 bg-purple-50 dark:bg-gray-700 rounded-lg p-4 shadow-sm">
        <h2 class="text-lg sm:text-xl font-semibold text-purple-700 dark:text-purple-300 mb-4">Categories</h2>
        <nav>
          <ul class="space-y-3">
            <li>
              <a href="#" class="flex items-center gap-2 p-2 rounded-md hover:bg-purple-200 dark:hover:bg-gray-600 text-purple-800 dark:text-purple-200 font-medium transition-colors">
                <svg class="w-5 h-5" 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-1-1.25-3M15.75 17H18a2 2 0 002-2V7a2 2 0 00-2-2H6a2 2 0 00-2 2v8a2 2 0 002 2h2.25"/></svg>
                Investing Strategies
              </a>
            </li>
            <li>
              <a href="#" class="flex items-center gap-2 p-2 rounded-md bg-purple-200 dark:bg-purple-800 text-purple-900 dark:text-white font-semibold transition-colors">
                <svg class="w-5 h-5" 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 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.592 1L21 9m-4.475-1.256l-6.223 3.597m-4.047 5.086c.863-.092 1.63-.33 2.274-.692m0 0a2.003 2.003 0 01-1.422-4.242M10.88 16c-.021-.051 0-.107.017-.16A5.5 5.5 0 0012 5.5a5.5 5.5 0 00-5.5 5.5c0 1.01 0 2.02-.017 3.03M12 21.01c-.021-.051 0-.107.017-.16A5.5 5.5 0 0012 12.5a5.5 5.5 0 00-5.5 5.5c0 1.01 0 2.02-.017 3.03M12 21c-.021-.051 0-.107.017-.16A5.5 5.5 0 0012 12.5a5.5 5.5 0 00-5.5 5.5c0 1.01 0 2.02-.017 3.03"/></svg>
                Personal Finance
              </a>
            </li>
            <li>
              <a href="#" class="flex items-center gap-2 p-2 rounded-md hover:bg-purple-200 dark:hover:bg-gray-600 text-purple-800 dark:text-purple-200 font-medium transition-colors">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 4l-4 4 4 4"/></svg>
                Market Analysis
              </a>
            </li>
            <li>
              <a href="#" class="flex items-center gap-2 p-2 rounded-md hover:bg-purple-200 dark:hover:bg-gray-600 text-purple-800 dark:text-purple-200 font-medium transition-colors">
                <svg class="w-5 h-5" 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 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg>
                Banking & Loans
              </a>
            </li>
          </ul>
        </nav>
        <button class="mt-6 w-full py-2 px-4 bg-purple-500 hover:bg-purple-600 dark:bg-purple-700 dark:hover:bg-purple-600 text-white font-semibold rounded-lg shadow-md transition-colors">
          <svg class="w-4 h-4 inline-block mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z" clip-rule="evenodd"></path></svg>
          New Thread
        </button>
      </aside>

      <!-- Main Content: Threads List -->
      <main class="w-full md:w-3/4">
        <section class="bg-green-50 dark:bg-gray-700 rounded-lg p-4 shadow-sm mb-4">
          <h2 class="text-lg sm:text-xl font-semibold text-green-700 dark:text-green-300 mb-4">Latest Threads</h2>
          <div class="space-y-4">
            <!-- Thread Item 1 -->
            <article class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300">
              <div class="flex items-start justify-between">
                <div>
                  <h3 class="text-lg font-bold text-gray-900 dark:text-white mb-1">Understanding the Latest Fed Rate Hike</h3>
                  <p class="text-sm text-gray-600 dark:text-gray-400 mb-2">Discussing the implications for mortgages and savings accounts.</p>
                </div>
                <div class="flex items-center space-x-2 text-gray-500 dark:text-gray-400">
                  <span class="text-sm">15 replies</span>
                  <svg class="w-5 h-5" 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 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"></path></svg>
                </div>
              </div>
              <div class="flex items-center text-sm text-gray-500 dark:text-gray-400 mt-3">
                <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Author Avatar" class="w-6 h-6 rounded-full mr-2 border border-pink-400 dark:border-purple-600">
                <span class="font-medium text-gray-700 dark:text-gray-300">John Doe</span>
                <span class="mx-2">•</span>
                <span>2 hours ago</span>
                <span class="ml-auto text-pink-600 dark:text-teal-400 font-semibold">Personal Finance</span>
              </div>
            </article>

            <!-- Thread Item 2 -->
            <article class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300">
              <div class="flex items-start justify-between">
                <div>
                  <h3 class="text-lg font-bold text-gray-900 dark:text-white mb-1">Beginner's Guide to Stock Market Investing</h3>
                  <p class="text-sm text-gray-600 dark:text-gray-400 mb-2">Tips and resources for new investors.</p>
                </div>
                <div class="flex items-center space-x-2 text-gray-500 dark:text-gray-400">
                  <span class="text-sm">32 replies</span>
                  <svg class="w-5 h-5" 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 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"></path></svg>
                </div>
              </div>
              <div class="flex items-center text-sm text-gray-500 dark:text-gray-400 mt-3">
                <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Author Avatar" class="w-6 h-6 rounded-full mr-2 border border-pink-400 dark:border-purple-600">
                <span class="font-medium text-gray-700 dark:text-gray-300">Jane Smith</span>
                <span class="mx-2">•</span>
                <span>5 hours ago</span>
                <span class="ml-auto text-pink-600 dark:text-teal-400 font-semibold">Investing Strategies</span>
              </div>
            </article>

            <!-- Thread Item 3 -->
            <article class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300">
              <div class="flex items-start justify-between">
                <div>
                  <h3 class="text-lg font-bold text-gray-900 dark:text-white mb-1">Future of Digital Currencies in Banking</h3>
                  <p class="text-sm text-gray-600 dark:text-gray-400 mb-2">Exploring CBDCs and their impact on traditional banking.</p>
                </div>
                <div class="flex items-center space-x-2 text-gray-500 dark:text-gray-400">
                  <span class="text-sm">8 replies</span>
                  <svg class="w-5 h-5" 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 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"></path></svg>
                </div>
              </div>
              <div class="flex items-center text-sm text-gray-500 dark:text-gray-400 mt-3">
                <img src="https://randomuser.me/api/portraits/men/19.jpg" alt="Author Avatar" class="w-6 h-6 rounded-full mr-2 border border-pink-400 dark:border-purple-600">
                <span class="font-medium text-gray-700 dark:text-gray-300">David Lee</span>
                <span class="mx-2">•</span>
                <span>1 day ago</span>
                <span class="ml-auto text-pink-600 dark:text-teal-400 font-semibold">Banking & Loans</span>
              </div>
            </article>

            <!-- Thread Item 4 -->
            <article class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300">
              <div class="flex items-start justify-between">
                <div>
                  <h3 class="text-lg font-bold text-gray-900 dark:text-white mb-1">Q3 Earnings Report Analysis: Tech Sector</h3>
                  <p class="text-sm text-gray-600 dark:text-gray-400 mb-2">Deep dive into recent tech company performance.</p>
                </div>
                <div class="flex items-center space-x-2 text-gray-500 dark:text-gray-400">
                  <span class="text-sm">20 replies</span>
                  <svg class="w-5 h-5" 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 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"></path></svg>
                </div>
              </div>
              <div class="flex items-center text-sm text-gray-500 dark:text-gray-400 mt-3">
                <img src="https://randomuser.me/api/portraits/women/67.jpg" alt="Author Avatar" class="w-6 h-6 rounded-full mr-2 border border-pink-400 dark:border-purple-600">
                <span class="font-medium text-gray-700 dark:text-gray-300">Emily White</span>
                <span class="mx-2">•</span>
                <span>2 days ago</span>
                <span class="ml-auto text-pink-600 dark:text-teal-400 font-semibold">Market Analysis</span>
              </div>
            </article>

          </div>
          <div class="mt-6 flex justify-center">
            <button class="py-2 px-6 bg-pink-500 hover:bg-pink-600 dark:bg-teal-600 dark:hover:bg-teal-500 text-white font-semibold rounded-full shadow-lg transition-colors">
              Load More
            </button>
          </div>
        </section>
      </main>
    </div>

    <footer class="p-4 sm:p-6 bg-purple-500 dark:bg-gray-900 text-white text-center text-sm rounded-b-xl shadow-inner">
      &copy; 2023 Finance Community. All rights reserved.
    </footer>
  </div>
</div>