Componentes Foro de la comunidad Componente del Foro de la Comunidad

Componente del Foro de la Comunidad

Un componente de foro de la comunidad simple, limpio y confiable diseñado para aplicaciones deportivas / fitness, con un esquema de degradado multicolor y capacidad de respuesta completa con soporte para modo oscuro.

Vista previa

Código HTML

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

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

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

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

Componentes relacionados

Componente del Foro de la Comunidad

Componente del foro de la comunidad con diseño de neumorfismo, combinación de colores en escala de grises y complejidad simple para redes sociales utilizando Tailwind CSS. Diseño responsivo con soporte para temas oscuros.

Abrir

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

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