Composants Forum communautaire Volet Forum communautaire
Volet Forum communautaire

Un composant de forum communautaire complexe, inspiré du papier/de l’impression, pour les discussions sur la météo et le climat, utilisant une palette de couleurs complémentaires et une réactivité totale avec la prise en charge du mode sombre.
Aperçu

HTML Code

<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>
Composants associés

Volet Forum communautaire - Retro Ocean Blue

Un composant de forum communautaire simple et réactif avec une ambiance rétro des années 80/90, conçu pour les plateformes d’emploi et de carrière. Dispose d’une palette de couleurs bleu océan et d’une prise en charge du mode sombre.
Ouvrir
Forum communautaire Composante 9

Un composant du forum communautaire doté d’un design de morphisme en verre avec des éléments translucides semblables à du verre givré, des effets réactifs et la prise en charge du thème sombre.
Ouvrir
Volet Forum communautaire

Un composant de forum communautaire réactif stylisé en mode sombre à l’aide de Tailwind CSS. Le composant présente un arrière-plan sombre pour réduire la fatigue oculaire et comprend des images de remplacement pour les avatars et les messages de forum.
Ouvrir