Componentes Foro de la comunidad Componente del Foro de la Comunidad
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.
Vista previa

Código HTML

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

Componente del Foro de la Comunidad

Un componente de foro comunitario simple y brutalista en escala de grises para redes sociales, con diseño receptivo y soporte para modo oscuro.
Abrir
Componente del Foro de la Comunidad

Un componente minimalista del foro de la comunidad para el comercio electrónico, con un diseño limpio, una combinación de colores triádica y compatibilidad con el modo oscuro.
Abrir
Componente del Foro de la Comunidad

Un componente responsivo del foro de la comunidad diseñado en modo oscuro usando Tailwind CSS. El componente presenta un fondo oscuro para reducir la fatiga visual e incluye imágenes de marcador de posición para avatares y publicaciones en foros.
Abrir