CCHub Logo CCHub Tailwind Collection
コンポーネント カード Forum_Community_Cards_Component

Forum_Community_Cards_Component

フォーラムやコミュニティプラットフォーム向けのレスポンシブでインタラクティブなカードコンポーネントで、レトロ/ビンテージの配色とマイクロインタラクションのための微妙なホバー効果が特徴です。ダークモードのサポートとセマンティックHTMLが含まれています。

プレビュー

HTMLコード 

<div class="p-4 sm:p-6 lg:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen font-sans">
  <div class="max-w-7xl mx-auto">
    <h2 class="text-2xl sm:text-3xl font-bold text-gray-800 dark:text-gray-100 mb-6 text-center">Latest Discussions</h2>

    <div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">

      <!-- Card 1 -->
      <article class="relative group bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg dark:hover:shadow-xl transition-all duration-300 overflow-hidden
                      transform hover:-translate-y-1 hover:scale-[1.01] active:scale-[0.99]">
        <div class="p-5 flex flex-col h-full">
          <div class="flex items-center mb-3">
            <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-semibold text-gray-700 dark:text-gray-200">John Doe</p>
              <p class="text-xs text-gray-500 dark:text-gray-400">2 hours ago</p>
            </div>
          </div>
          <h3 class="text-lg font-bold text-teal-700 dark:text-teal-400 mb-2 leading-tight group-hover:text-teal-600 dark:group-hover:text-teal-300 transition-colors duration-200">
            <a href="#" class="before:absolute before:inset-0 focus:outline-none focus:ring-2 focus:ring-teal-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 rounded-md">Exploring the future of web development</a>
          </h3>
          <p class="text-sm text-gray-600 dark:text-gray-300 mb-4 line-clamp-3">What new technologies are you excited about? Discuss the potential impacts of AI, WebAssembly, and more!</p>

          <div class="flex flex-wrap gap-2 mb-4 text-xs">
            <span class="px-2 py-1 bg-yellow-100 dark:bg-yellow-800 text-yellow-800 dark:text-yellow-200 rounded-full">#Tech</span>
            <span class="px-2 py-1 bg-orange-100 dark:bg-orange-800 text-orange-800 dark:text-orange-200 rounded-full">#AI</span>
            <span class="px-2 py-1 bg-purple-100 dark:bg-purple-800 text-purple-800 dark:text-purple-200 rounded-full">#WebDev</span>
          </div>

          <div class="mt-auto flex items-center justify-between text-gray-500 dark:text-gray-400 text-sm">
            <div class="flex items-center">
              <svg class="w-4 h-4 mr-1 text-blue-500 dark:text-blue-400 group-hover:scale-110 transition-transform duration-200" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10c0 3.866-3.582 7-8 7s-8-3.134-8-7 3.582-7 8-7 8 3.134 8 7zM9 9a1 1 0 000 2h2a1 1 0 100-2H9z" clip-rule="evenodd"></path></svg>
              <span>15 Comments</span>
            </div>
            <div class="flex items-center">
              <svg class="w-4 h-4 mr-1 text-red-500 dark:text-red-400 group-hover:scale-110 transition-transform duration-200" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7 4a3 3 0 016 0v1a1 1 0 11-2 0V4a1 1 0 10-2 0v1a1 1 0 11-2 0V4zm-1 0a1 1 0 000 2h.01a1 1 0 000-2H6zm7 0a1 1 0 000 2h.01a1 1 0 000-2H13zM6 10a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm-1 5a1 1 0 000 2h2a1 1 0 000-2H5zm7 0a1 1 0 000 2h2a1 1 0 000-2h-2z" clip-rule="evenodd"></path></svg>
              <span>6 Likes</span>
            </div>
          </div>
        </div>
      </article>

      <!-- Card 2 -->
      <article class="relative group bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg dark:hover:shadow-xl transition-all duration-300 overflow-hidden
                      transform hover:-translate-y-1 hover:scale-[1.01] active:scale-[0.99]">
        <div class="p-5 flex flex-col h-full">
          <div class="flex items-center mb-3">
            <img class="w-8 h-8 rounded-full mr-3" src="https://randomuser.me/api/portraits/women/17.jpg" alt="User Avatar">
            <div>
              <p class="text-sm font-semibold text-gray-700 dark:text-gray-200">Jane Smith</p>
              <p class="text-xs text-gray-500 dark:text-gray-400">5 hours ago</p>
            </div>
          </div>
          <h3 class="text-lg font-bold text-teal-700 dark:text-teal-400 mb-2 leading-tight group-hover:text-teal-600 dark:group-hover:text-teal-300 transition-colors duration-200">
            <a href="#" class="before:absolute before:inset-0 focus:outline-none focus:ring-2 focus:ring-teal-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 rounded-md">Best practices for responsive design</a>
          </h3>
          <p class="text-sm text-gray-600 dark:text-gray-300 mb-4 line-clamp-3">Share your favorite tips and tricks for building truly responsive and accessible web experiences across all devices.</p>

          <div class="flex flex-wrap gap-2 mb-4 text-xs">
            <span class="px-2 py-1 bg-purple-100 dark:bg-purple-800 text-purple-800 dark:text-purple-200 rounded-full">#Design</span>
            <span class="px-2 py-1 bg-cyan-100 dark:bg-cyan-800 text-cyan-800 dark:text-cyan-200 rounded-full">#Frontend</span>
            <span class="px-2 py-1 bg-yellow-100 dark:bg-yellow-800 text-yellow-800 dark:text-yellow-200 rounded-full">#CSS</span>
          </div>

          <div class="mt-auto flex items-center justify-between text-gray-500 dark:text-gray-400 text-sm">
            <div class="flex items-center">
              <svg class="w-4 h-4 mr-1 text-blue-500 dark:text-blue-400 group-hover:scale-110 transition-transform duration-200" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10c0 3.866-3.582 7-8 7s-8-3.134-8-7 3.582-7 8-7 8 3.134 8 7zM9 9a1 1 0 000 2h2a1 1 0 100-2H9z" clip-rule="evenodd"></path></svg>
              <span>22 Comments</span>
            </div>
            <div class="flex items-center">
              <svg class="w-4 h-4 mr-1 text-red-500 dark:text-red-400 group-hover:scale-110 transition-transform duration-200" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7 4a3 3 0 016 0v1a1 1 0 11-2 0V4a1 1 0 10-2 0v1a1 1 0 11-2 0V4zm-1 0a1 1 0 000 2h.01a1 1 0 000-2H6zm7 0a1 1 0 000 2h.01a1 1 0 000-2H13zM6 10a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm-1 5a1 1 0 000 2h2a1 1 0 000-2H5zm7 0a1 1 0 000 2h2a1 1 0 000-2h-2z" clip-rule="evenodd"></path></svg>
              <span>10 Likes</span>
            </div>
          </div>
        </div>
      </article>

      <!-- Card 3 -->
      <article class="relative group bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg dark:hover:shadow-xl transition-all duration-300 overflow-hidden
                      transform hover:-translate-y-1 hover:scale-[1.01] active:scale-[0.99]">
        <div class="p-5 flex flex-col h-full">
          <div class="flex items-center mb-3">
            <img class="w-8 h-8 rounded-full mr-3" src="https://randomuser.me/api/portraits/lego/7.jpg" alt="User Avatar">
            <div>
              <p class="text-sm font-semibold text-gray-700 dark:text-gray-200">RetroFan_99</p>
              <p class="text-xs text-gray-500 dark:text-gray-400">1 day ago</p>
            </div>
          </div>
          <h3 class="text-lg font-bold text-teal-700 dark:text-teal-400 mb-2 leading-tight group-hover:text-teal-600 dark:group-hover:text-teal-300 transition-colors duration-200">
            <a href="#" class="before:absolute before:inset-0 focus:outline-none focus:ring-2 focus:ring-teal-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 rounded-md">Nostalgia trip: Favorite 80s arcade games</a>
          </h3>
          <p class="text-sm text-gray-600 dark:text-gray-300 mb-4 line-clamp-3">Let's reminisce about the golden age of arcade gaming! What were your go-to machines and high scores?</p>

          <div class="flex flex-wrap gap-2 mb-4 text-xs">
            <span class="px-2 py-1 bg-yellow-100 dark:bg-yellow-800 text-yellow-800 dark:text-yellow-200 rounded-full">#Retro</span>
            <span class="px-2 py-1 bg-orange-100 dark:bg-orange-800 text-orange-800 dark:text-orange-200 rounded-full">#Gaming</span>
            <span class="px-2 py-1 bg-green-100 dark:bg-green-800 text-green-800 dark:text-green-200 rounded-full">#80s</span>
          </div>

          <div class="mt-auto flex items-center justify-between text-gray-500 dark:text-gray-400 text-sm">
            <div class="flex items-center">
              <svg class="w-4 h-4 mr-1 text-blue-500 dark:text-blue-400 group-hover:scale-110 transition-transform duration-200" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10c0 3.866-3.582 7-8 7s-8-3.134-8-7 3.582-7 8-7 8 3.134 8 7zM9 9a1 1 0 000 2h2a1 1 0 100-2H9z" clip-rule="evenodd"></path></svg>
              <span>30 Comments</span>
            </div>
            <div class="flex items-center">
              <svg class="w-4 h-4 mr-1 text-red-500 dark:text-red-400 group-hover:scale-110 transition-transform duration-200" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7 4a3 3 0 016 0v1a1 1 0 11-2 0V4a1 1 0 10-2 0v1a1 1 0 11-2 0V4zm-1 0a1 1 0 000 2h.01a1 1 0 000-2H6zm7 0a1 1 0 000 2h.01a1 1 0 000-2H13zM6 10a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm-1 5a1 1 0 000 2h2a1 1 0 000-2H5zm7 0a1 1 0 000 2h2a1 1 0 000-2h-2z" clip-rule="evenodd"></path></svg>
              <span>20 Likes</span>
            </div>
          </div>
        </div>
      </article>

      <!-- Card 4 -->
      <article class="relative group bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg dark:hover:shadow-xl transition-all duration-300 overflow-hidden
                      transform hover:-translate-y-1 hover:scale-[1.01] active:scale-[0.99]">
        <div class="p-5 flex flex-col h-full">
          <div class="flex items-center mb-3">
            <img class="w-8 h-8 rounded-full mr-3" src="https://randomuser.me/api/portraits/women/4.jpg" alt="User Avatar">
            <div>
              <p class="text-sm font-semibold text-gray-700 dark:text-gray-200">FoodExplorer</p>
              <p class="text-xs text-gray-500 dark:text-gray-400">3 days ago</p>
            </div>
          </div>
          <h3 class="text-lg font-bold text-teal-700 dark:text-teal-400 mb-2 leading-tight group-hover:text-teal-600 dark:group-hover:text-teal-300 transition-colors duration-200">
            <a href="#" class="before:absolute before:inset-0 focus:outline-none focus:ring-2 focus:ring-teal-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 rounded-md">Top 5 comfort food recipes for fall</a>
          </h3>
          <p class="text-sm text-gray-600 dark:text-gray-300 mb-4 line-clamp-3">Share your most beloved, heartwarming recipes that are perfect for chilly autumn evenings. </p>

          <div class="flex flex-wrap gap-2 mb-4 text-xs">
            <span class="px-2 py-1 bg-cyan-100 dark:bg-cyan-800 text-cyan-800 dark:text-cyan-200 rounded-full">#Food</span>
            <span class="px-2 py-1 bg-green-100 dark:bg-green-800 text-green-800 dark:text-green-200 rounded-full">#Cooking</span>
            <span class="px-2 py-1 bg-purple-100 dark:bg-purple-800 text-purple-800 dark:text-purple-200 rounded-full">#Recipes</span>
          </div>

          <div class="mt-auto flex items-center justify-between text-gray-500 dark:text-gray-400 text-sm">
            <div class="flex items-center">
              <svg class="w-4 h-4 mr-1 text-blue-500 dark:text-blue-400 group-hover:scale-110 transition-transform duration-200" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10c0 3.866-3.582 7-8 7s-8-3.134-8-7 3.582-7 8-7 8 3.134 8 7zM9 9a1 1 0 000 2h2a1 1 0 100-2H9z" clip-rule="evenodd"></path></svg>
              <span>18 Comments</span>
            </div>
            <div class="flex items-center">
              <svg class="w-4 h-4 mr-1 text-red-500 dark:text-red-400 group-hover:scale-110 transition-transform duration-200" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7 4a3 3 0 016 0v1a1 1 0 11-2 0V4a1 1 0 10-2 0v1a1 1 0 11-2 0V4zm-1 0a1 1 0 000 2h.01a1 1 0 000-2H6zm7 0a1 1 0 000 2h.01a1 1 0 000-2H13zM6 10a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm-1 5a1 1 0 000 2h2a1 1 0 000-2H5zm7 0a1 1 0 000 2h2a1 1 0 000-2h-2z" clip-rule="evenodd"></path></svg>
              <span>12 Likes</span>
            </div>
          </div>
        </div>
      </article>

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

関連コンポーネント

Industrial_Farming_Cards_Component

インダストリアルで原材料の美学、温かみのあるニュートラルカラー、ダークモードのサポートを備えたレスポンシブカードのセットで、農業や農業のWebサイトに適しています。露出した要素と実用的なデザインが特徴です。

開ける

Glassmorphism カード コンポーネント

鮮やかな色のGlassmorphismカードコンポーネント。ダークテーマをサポートするレスポンシブデザイン。画像にはpicsum.photosを使用し、アバターには randomuser.me を使用します。

開ける

ダークモードソーシャルカード

アースカラーのダークモード用にスタイリングされたレスポンシブカードコンポーネントで、ソーシャルメディアインターフェイス用に設計されています。

開ける