Componentes de búsqueda

Categorías

Componentes Foro de la comunidad

Foro de la comunidad

Panel de discusión para la interacción de la comunidad

Componente del Foro de la Comunidad

Un componente de foro comunitario simple y receptivo con una combinación de colores cálidos inspirada en la puesta de sol, adecuada para plataformas sociales o de citas. Cuenta con sombras similares a las de Material Design e incluye soporte para el modo oscuro.

Abrir Vista previa

                <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>

Componente del Foro de la Comunidad

Un simple componente de foro comunitario con temática cyberpunk para plataformas inmobiliarias, con fondos oscuros, acentos de neón y diseño receptivo con soporte para modo oscuro.

Abrir Vista previa

                <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>

Componente del Foro de la Comunidad - Art Deco Monocromático

Un componente de foro comunitario receptivo diseñado con una estética Art Deco utilizando un esquema de color monocromático, adecuado para aplicaciones de tecnología/SaaS. Cuenta con soporte para modo oscuro y elementos interactivos.

Abrir Vista previa

                <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>

Componente del Foro de la Comunidad

Un componente de foro de la comunidad simple, limpio y receptivo diseñado con un estilo de tipografía suiza / internacional, con un sutil degradado multicolor y soporte de modo oscuro, adecuado para sitios web comerciales / corporativos.

Abrir Vista previa

                <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>

Componente del Foro de la Comunidad

Un componente de foro comunitario receptivo diseñado con principios de diseño de materiales, combinación de colores otoñales, adecuada para plataformas educativas. Incluye soporte para el modo oscuro, un diseño de cuadrícula, temas de discusión y avatares de usuario.

Abrir Vista previa

                <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>

Componente del Foro Comunitario (Bauhaus de Comercio Electrónico)

Un componente de foro de la comunidad simple y receptivo diseñado para el comercio electrónico, con formas geométricas inspiradas en la Bauhaus y una paleta de colores apagados. Incluye soporte para modo oscuro.

Abrir Vista previa

                <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>

Componente del Foro de la Comunidad

Un componente de foro comunitario simple y vibrante con transiciones de degradado, diseñado para plataformas de entretenimiento/medios. Cuenta con un diseño responsivo con soporte para modo oscuro.

Abrir Vista previa

                <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>

Componente del Foro de la Comunidad - Retro Ocean Blue

Un componente de foro comunitario simple y receptivo con un ambiente retro de los años 80 / 90, diseñado para plataformas de trabajo y carrera. Cuenta con esquema de color azul océano y compatibilidad con el modo oscuro.

Abrir Vista previa

                <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>

Componente del Foro de la Comunidad

Un componente complejo del foro de la comunidad, inspirado en el papel y la impresión, para las discusiones sobre el tiempo y el clima, que utiliza un esquema de color complementario y una capacidad de respuesta total con soporte para el modo oscuro.

Abrir Vista previa

                <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>

Componente del Foro de la Comunidad

Un componente de foro de la comunidad receptivo para finanzas / banca con un estilo de diseño de materiales y una combinación de colores dulces / dulces, con colores brillantes como el rosa chicle y el verde menta, soporte de modo oscuro y HTML semántico.

Abrir Vista previa

                <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>