検索コンポーネント

すべてのコンポーネント

利用可能なすべてのTailwind CSSコンポーネントを参照する

メディア埋め込みコンポーネント

ブログやコンテンツの消費に適したNeumorphismスタイルのメディア埋め込みコンポーネントで、トライアドカラースキームが特徴です。ダークモードをサポートするレスポンシブデザイン。

                <div class="flex items-center justify-center p-6 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 ease-in-out">
    <div class="flex flex-col bg-white dark:bg-gray-900 rounded-lg p-4 shadow-lg">
        <img src="https://picsum.photos/400/200" alt="Media Image" class="rounded-md mb-4">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-2">Media Title</h2>
        <p class="text-gray-600 dark:text-gray-400 mb-4">This is a brief description of the media content to provide context to the readers.</p>
        <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">
            <span class="text-gray-700 dark:text-gray-300">Author Name</span>
        </div>
    </div>
</div>

ミニマリストプログレスバー

パステルカラーのミニマリストでフラットなデザインのプログレスバーコンポーネントで、プロのビジネスや企業のWebサイトに適しています。レスポンシブデザインで、Tailwind CSSを使用したダークモードに対応しています。

開けるプレビュー

                <div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
  <div class="bg-blue-400 h-2.5 rounded-full" style="width: 45%"></div>
</div>

Glassmorphism カートボタンに追加

Glassmorphismスタイル、単色の配色、適度な複雑さのカートボタンに追加。ダークモードのサポートによるレスポンシブ。

開けるプレビュー

                <button class="bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg border border-gray-200 border-opacity-10 text-gray-800 px-6 py-3 rounded-md font-semibold transition duration-300 ease-in-out hover:bg-opacity-20 focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-50 dark:bg-gray-800 dark:bg-opacity-30 dark:border-gray-700 dark:border-opacity-20 dark:text-white dark:hover:bg-opacity-40 dark:focus:ring-gray-700 dark:focus:ring-opacity-50"> Add to Cart </button>

Tailwind CSSで構築された、応答性の高いダークモード対応のソーシャルメディアタイムラインコンポーネント。厳密なグレースケールの配色と、ユーザーアバター、投稿コンテンツ(テキストと画像)、エンゲージメント統計、アクションボタンを備えた複雑なポストカードが特徴です。ソーシャルネットワーキングインターフェース用に設計されており、各投稿に複数のインタラクティブ要素があります。このデザインは、目の疲れを軽減するために暗い背景をサポートしています。JavaScriptは使用しておりません。

開けるプレビュー

                <div class="bg-gray-100 dark:bg-gray-900 py-12 font-sans">
  <div class="container mx-auto px-4 sm:px-6 lg:px-8 max-w-2xl">
    <h1 class="text-3xl sm:text-4xl font-bold text-center text-gray-800 dark:text-gray-100 mb-8 sm:mb-12">
      Community Feed
    </h1>
    
    <div class="space-y-8 sm:space-y-12">
      
      <!-- Post 1 -->
      <div class="bg-white dark:bg-gray-800 shadow-xl dark:shadow-2xl dark:shadow-gray-900/50 rounded-xl p-4 sm:p-6 transition-shadow duration-300 hover:shadow-2xl dark:hover:shadow-gray-700/60">
        <!-- Post Header -->
        <div class="flex items-center justify-between mb-4">
          <div class="flex items-center space-x-3 sm:space-x-4">
            <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="User Avatar" class="w-10 h-10 sm:w-12 sm:h-12 rounded-full object-cover border-2 border-gray-200 dark:border-gray-700">
            <div>
              <p class="font-semibold text-gray-900 dark:text-gray-100 text-sm sm:text-base">Sarah Miller</p>
              <p class="text-xs text-gray-500 dark:text-gray-400">Posted 2 hours ago</p>
            </div>
          </div>
          <button class="text-gray-400 dark:text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 p-1 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors">
            <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" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
            </svg>
          </button>
        </div>

        <!-- Post Content Text -->
        <div class="mb-4">
          <p class="text-gray-700 dark:text-gray-300 leading-relaxed text-sm sm:text-base">
            Exploring the city vibes today! Found this amazing little cafe. ☕️ Highly recommend the almond croissant.
            The architecture around here is stunning. So much history! #CityLife #CafeHopping #UrbanExploration
          </p>
        </div>

        <!-- Post Content Image -->
        <div class="mb-5 rounded-lg overflow-hidden bg-gray-200 dark:bg-gray-700">
          <img src="https://picsum.photos/seed/citycafe/800/500" alt="Cafe image" class="w-full h-auto object-cover max-h-[500px]">
        </div>

        <!-- Stats -->
        <div class="flex items-center justify-between text-xs sm:text-sm text-gray-500 dark:text-gray-400 mb-3 px-1">
          <div><span>1.2k Likes</span></div>
          <div><span>87 Comments</span></div>
        </div>

        <!-- Actions -->
        <div class="border-t border-gray-200 dark:border-gray-700 pt-3">
          <div class="flex items-center justify-around text-gray-600 dark:text-gray-400">
            <button class="flex items-center space-x-1 sm:space-x-2 hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 transition-colors p-2 rounded-lg w-full justify-center">
              <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" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" 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>
              <span class="font-medium text-xs sm:text-sm">Like</span>
            </button>
            <button class="flex items-center space-x-1 sm:space-x-2 hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 transition-colors p-2 rounded-lg w-full justify-center">
              <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" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" 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>
              <span class="font-medium text-xs sm:text-sm">Comment</span>
            </button>
            <button class="flex items-center space-x-1 sm:space-x-2 hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 transition-colors p-2 rounded-lg w-full justify-center">
              <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" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M8.684 13.342C8.886 12.938 9 12.482 9 12s-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.367 2.684 3 3 0 00-5.367-2.684z" />
              </svg>
              <span class="font-medium text-xs sm:text-sm">Share</span>
            </button>
          </div>
        </div>
      </div>
      <!-- End Post 1 -->

      <!-- Post 2 -->
      <div class="bg-white dark:bg-gray-800 shadow-xl dark:shadow-2xl dark:shadow-gray-900/50 rounded-xl p-4 sm:p-6 transition-shadow duration-300 hover:shadow-2xl dark:hover:shadow-gray-700/60">
        <!-- Post Header -->
        <div class="flex items-center justify-between mb-4">
          <div class="flex items-center space-x-3 sm:space-x-4">
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 sm:w-12 sm:h-12 rounded-full object-cover border-2 border-gray-200 dark:border-gray-700">
            <div>
              <p class="font-semibold text-gray-900 dark:text-gray-100 text-sm sm:text-base">Alex Johnson</p>
              <p class="text-xs text-gray-500 dark:text-gray-400">Posted 5 hours ago</p>
            </div>
          </div>
          <button class="text-gray-400 dark:text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 p-1 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors">
            <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" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
            </svg>
          </button>
        </div>

        <!-- Post Content Text -->
        <div class="mb-4">
          <p class="text-gray-700 dark:text-gray-300 leading-relaxed text-sm sm:text-base">
            Just finished a great workout session. Feeling energized! 💪 Remember to stay hydrated folks. #FitnessMotivation #HealthyLifestyle
          </p>
        </div>
        
        <!-- Post Content Image (Optional - No image for this post to show variation) -->
        <!-- <div class="mb-5 rounded-lg overflow-hidden bg-gray-200 dark:bg-gray-700">
          <img src="https://picsum.photos/seed/workout/800/400" alt="Workout image" class="w-full h-auto object-cover max-h-[500px]">
        </div> -->

        <!-- Stats -->
        <div class="flex items-center justify-between text-xs sm:text-sm text-gray-500 dark:text-gray-400 mb-3 px-1">
          <div><span>850 Likes</span></div>
          <div><span>45 Comments</span></div>
        </div>

        <!-- Actions -->
        <div class="border-t border-gray-200 dark:border-gray-700 pt-3">
          <div class="flex items-center justify-around text-gray-600 dark:text-gray-400">
            <button class="flex items-center space-x-1 sm:space-x-2 hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 transition-colors p-2 rounded-lg w-full justify-center">
              <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" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" 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>
              <span class="font-medium text-xs sm:text-sm">Like</span>
            </button>
             <button class="flex items-center space-x-1 sm:space-x-2 hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 transition-colors p-2 rounded-lg w-full justify-center">
              <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" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" 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>
              <span class="font-medium text-xs sm:text-sm">Comment</span>
            </button>
             <button class="flex items-center space-x-1 sm:space-x-2 hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 transition-colors p-2 rounded-lg w-full justify-center">
              <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" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M8.684 13.342C8.886 12.938 9 12.482 9 12s-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.367 2.684 3 3 0 00-5.367-2.684z" />
              </svg>
              <span class="font-medium text-xs sm:text-sm">Share</span>
            </button>
          </div>
        </div>
      </div>
      <!-- End Post 2 -->

      <!-- Post 3 -->
      <div class="bg-white dark:bg-gray-800 shadow-xl dark:shadow-2xl dark:shadow-gray-900/50 rounded-xl p-4 sm:p-6 transition-shadow duration-300 hover:shadow-2xl dark:hover:shadow-gray-700/60">
        <!-- Post Header -->
        <div class="flex items-center justify-between mb-4">
          <div class="flex items-center space-x-3 sm:space-x-4">
            <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-10 h-10 sm:w-12 sm:h-12 rounded-full object-cover border-2 border-gray-200 dark:border-gray-700">
            <div>
              <p class="font-semibold text-gray-900 dark:text-gray-100 text-sm sm:text-base">Linda K.</p>
              <p class="text-xs text-gray-500 dark:text-gray-400">Posted 1 day ago</p>
            </div>
          </div>
          <button class="text-gray-400 dark:text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 p-1 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors">
            <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" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
            </svg>
          </button>
        </div>

        <!-- Post Content Text -->
        <div class="mb-4">
          <p class="text-gray-700 dark:text-gray-300 leading-relaxed text-sm sm:text-base">
            Spent the afternoon reading in the park. Such a peaceful escape from the hustle and bustle. What are you reading currently?
            #BookLover #PeacefulMoments #NatureReads 🌳📖
          </p>
        </div>

        <!-- Post Content Image -->
        <div class="mb-5 rounded-lg overflow-hidden bg-gray-200 dark:bg-gray-700">
          <img src="https://picsum.photos/seed/parkreading/800/550" alt="Park reading image" class="w-full h-auto object-cover max-h-[500px]">
        </div>

        <!-- Stats -->
        <div class="flex items-center justify-between text-xs sm:text-sm text-gray-500 dark:text-gray-400 mb-3 px-1">
          <div><span>980 Likes</span></div>
          <div><span>152 Comments</span></div>
        </div>

        <!-- Actions -->
        <div class="border-t border-gray-200 dark:border-gray-700 pt-3">
          <div class="flex items-center justify-around text-gray-600 dark:text-gray-400">
            <button class="flex items-center space-x-1 sm:space-x-2 hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 transition-colors p-2 rounded-lg w-full justify-center">
              <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" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" 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>
              <span class="font-medium text-xs sm:text-sm">Like</span>
            </button>
            <button class="flex items-center space-x-1 sm:space-x-2 hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 transition-colors p-2 rounded-lg w-full justify-center">
              <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" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" 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>
              <span class="font-medium text-xs sm:text-sm">Comment</span>
            </button>
            <button class="flex items-center space-x-1 sm:space-x-2 hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 transition-colors p-2 rounded-lg w-full justify-center">
              <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" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M8.684 13.342C8.886 12.938 9 12.482 9 12s-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.367 2.684 3 3 0 00-5.367-2.684z" />
              </svg>
              <span class="font-medium text-xs sm:text-sm">Share</span>
            </button>
          </div>
        </div>
      </div>
      <!-- End Post 3 -->

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

3Dソーシャルオーサーカード

3Dエフェクトとソーシャルメディアリンクを備えたレスポンシブな著者カードコンポーネントで、ブログ/コンテンツセクション用に設計されています。補色(アイデンティティ/情報に青、アクセント/CTAにオレンジ)が特徴で、ダークモードをサポートし、スタイリングにTailwind CSSを使用しています。デザインは、基本的なレイアウトと最小限の要素を備えた「シンプル」な複雑さですが、「3Dデザイン」は、シャドウとホバー効果を使用して奥行きとエンゲージメントのために組み込まれています。このコンポーネントには、アバター、著者名、短い略歴、ソーシャルメディアのアイコン、「Follow Me」のコールトゥアクションボタンが含まれています。プレースホルダーとして randomuser.me アバターを使用します。

開けるプレビュー

                <!-- Ensure Tailwind CSS is included in your project -->
<!-- This is a wrapper for demonstration purposes, the actual component starts with the card -->
<div class="min-h-screen bg-gray-100 dark:bg-slate-900 flex items-center justify-center p-4 antialiased">

  <!-- Start of Social Author Card Component -->
  <div class="bg-white dark:bg-slate-800 rounded-xl shadow-2xl p-6 sm:p-8 w-full max-w-md transform hover:scale-[1.01] transition-transform duration-300">
    
    <!-- Avatar -->
    <div class="flex justify-center mb-5">
      <img class="w-24 h-24 md:w-28 md:h-28 rounded-full shadow-xl border-4 border-orange-500 dark:border-orange-600 object-cover" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Author Avatar">
    </div>

    <!-- Author Info -->
    <div class="text-center">
      <h2 class="text-2xl font-bold text-blue-600 dark:text-blue-400 mb-1">Sarah Meyers</h2>
      <p class="text-sm text-gray-500 dark:text-slate-400 mb-4">Lead Content Creator</p>
      <p class="text-gray-700 dark:text-slate-300 text-sm sm:text-base leading-relaxed mb-6 px-2 sm:px-4">
        Crafting stories and sharing insights on modern web development and digital trends. Join me on my journey!
      </p>
    </div>

    <!-- Social Links -->
    <div class="flex justify-center space-x-3 sm:space-x-4 mb-8">
      <!-- Twitter/X Icon -->
      <a href="#" title="Twitter" class="group w-10 h-10 sm:w-11 sm:h-11 flex items-center justify-center rounded-full bg-slate-100 text-slate-600 hover:bg-blue-500 hover:text-white dark:bg-slate-700 dark:text-slate-300 dark:hover:bg-blue-500 dark:hover:text-white shadow-md hover:shadow-lg transform hover:-translate-y-0.5 active:translate-y-px transition-all duration-150">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5 sm:w-6 sm:h-6">
          <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
        </svg>
      </a>
      <!-- LinkedIn Icon -->
      <a href="#" title="LinkedIn" class="group w-10 h-10 sm:w-11 sm:h-11 flex items-center justify-center rounded-full bg-slate-100 text-slate-600 hover:bg-blue-500 hover:text-white dark:bg-slate-700 dark:text-slate-300 dark:hover:bg-blue-500 dark:hover:text-white shadow-md hover:shadow-lg transform hover:-translate-y-0.5 active:translate-y-px transition-all duration-150">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5 sm:w-6 sm:h-6">
          <path d="M20.5 2h-17A1.5 1.5 0 002 3.5v17A1.5 1.5 0 003.5 22h17a1.5 1.5 0 001.5-1.5v-17A1.5 1.5 0 0020.5 2zM8 19H5v-9h3v9zM6.5 8.25A1.75 1.75 0 118.25 6.5 1.75 1.75 0 016.5 8.25zM19 19h-3v-4.74c0-1.42-.6-1.93-1.38-1.93A1.74 1.74 0 0013 14.19V19h-3v-9h2.9v1.3a3.11 3.11 0 012.7-1.4c1.55 0 3.36.86 3.36 3.66V19z"></path>
        </svg>
      </a>
      <!-- GitHub Icon -->
      <a href="#" title="GitHub" class="group w-10 h-10 sm:w-11 sm:h-11 flex items-center justify-center rounded-full bg-slate-100 text-slate-600 hover:bg-blue-500 hover:text-white dark:bg-slate-700 dark:text-slate-300 dark:hover:bg-blue-500 dark:hover:text-white shadow-md hover:shadow-lg transform hover:-translate-y-0.5 active:translate-y-px transition-all duration-150">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5 sm:w-6 sm:h-6">
          <path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.009-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.036 1.531 1.036.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.853 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.001 10.001 0 0022 12.017C22 6.484 17.522 2 12 2z"></path>
        </svg>
      </a>
    </div>

    <!-- Follow Button -->
    <div class="flex justify-center">
      <button class="w-full sm:w-auto px-8 py-3 bg-orange-500 hover:bg-orange-600 active:bg-orange-700 dark:bg-orange-500 dark:hover:bg-orange-600 dark:active:bg-orange-700 text-white font-semibold rounded-lg shadow-lg hover:shadow-xl transform hover:-translate-y-0.5 active:translate-y-px active:shadow-md transition-all duration-150 focus:outline-none focus:ring-2 focus:ring-orange-400 dark:focus:ring-orange-500 focus:ring-opacity-75">
        Follow Me
      </button>
    </div>

  </div>
  <!-- End of Social Author Card Component -->

</div>

ブルータリストコミュニティフォーラムコンポーネント

鮮やかな色、適度な複雑さ、ダークモードのサポートを備えたソーシャルメディアインターフェイス用のブルータリストスタイルのコミュニティフォーラムコンポーネント。大胆なタイポグラフィ、ハイコントラスト要素、ブルータリズムデザインに典型的な非対称のレイアウトを備えたフォーラム投稿リストが特徴です。ユーザーアバター、インタラクションボタン、鮮やかな色のアクセントを備えた生々しく意図的に粗雑な美学を備えた投稿アイテムが含まれています。

開けるプレビュー

                <!-- Brutalist Community Forum Component -->
<div class="font-mono w-full bg-zinc-100 dark:bg-zinc-900 min-h-screen p-4">
  <!-- Brutalist Header Banner with Asymmetrical Design -->
  <div class="bg-fuchsia-600 dark:bg-fuchsia-800 p-6 mb-8 border-4 border-black dark:border-fuchsia-500 transform -rotate-1">
    <h1 class="text-4xl md:text-6xl font-black text-black dark:text-white uppercase tracking-tighter">COMMUNITY FORUM</h1>
    <div class="flex justify-between items-center mt-3">
      <p class="text-black dark:text-white font-bold">RAW CONVERSATIONS. UNFILTERED.</p>
      <div class="bg-yellow-400 dark:bg-yellow-500 p-2 border-2 border-black dark:border-white transform rotate-3">
        <span class="text-black font-black text-xl">NOW!</span>
      </div>
    </div>
  </div>
  
  <!-- Community Statistics -->
  <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
    <div class="bg-lime-500 dark:bg-lime-600 p-4 border-2 border-black dark:border-white transform rotate-1">
      <p class="text-black font-black text-2xl">1,243</p>
      <p class="text-black font-bold uppercase">Members</p>
    </div>
    <div class="bg-cyan-500 dark:bg-cyan-600 p-4 border-2 border-black dark:border-white transform -rotate-1">
      <p class="text-black font-black text-2xl">347</p>
      <p class="text-black font-bold uppercase">Topics</p>
    </div>
    <div class="bg-yellow-400 dark:bg-yellow-500 p-4 border-2 border-black dark:border-white transform rotate-2">
      <p class="text-black font-black text-2xl">8,921</p>
      <p class="text-black font-bold uppercase">Posts</p>
    </div>
    <div class="bg-pink-500 dark:bg-pink-600 p-4 border-2 border-black dark:border-white transform -rotate-2">
      <p class="text-black font-black text-2xl">142</p>
      <p class="text-black font-bold uppercase">Online</p>
    </div>
  </div>

  <!-- Topic Categories -->
  <div class="mb-8">
    <h2 class="text-2xl font-black uppercase tracking-tight text-black dark:text-white mb-4 border-b-4 border-black dark:border-white pb-2">CATEGORIES</h2>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
      <div class="bg-red-500 dark:bg-red-600 p-4 border-2 border-black dark:border-white">
        <h3 class="text-black font-black text-xl uppercase">GENERAL</h3>
      </div>
      <div class="bg-blue-500 dark:bg-blue-600 p-4 border-2 border-black dark:border-white">
        <h3 class="text-black font-black text-xl uppercase">TECH TALK</h3>
      </div>
      <div class="bg-green-500 dark:bg-green-600 p-4 border-2 border-black dark:border-white">
        <h3 class="text-black font-black text-xl uppercase">CREATIVE WORK</h3>
      </div>
    </div>
  </div>
  
  <!-- Post Creation Box -->
  <div class="bg-zinc-200 dark:bg-zinc-800 p-5 mb-8 border-4 border-black dark:border-zinc-600">
    <div class="flex items-center gap-4 mb-4">
      <div class="w-12 h-12 border-2 border-black dark:border-white overflow-hidden bg-purple-400">
        <img src="https://randomuser.me/api/portraits/women/47.jpg" alt="User avatar" class="w-full h-full object-cover">
      </div>
      <h2 class="text-xl font-black text-black dark:text-white uppercase">START A CONVERSATION</h2>
    </div>
    <div class="border-2 border-black dark:border-white bg-white dark:bg-zinc-700 p-3 mb-4">
      <p class="text-zinc-400 dark:text-zinc-300 font-bold">What's on your mind?</p>
    </div>
    <div class="flex justify-between">
      <div class="flex gap-2">
        <button class="bg-yellow-400 hover:bg-yellow-500 dark:bg-yellow-600 dark:hover:bg-yellow-700 text-black font-bold py-1 px-3 border-2 border-black dark:border-white">IMAGE</button>
        <button class="bg-pink-500 hover:bg-pink-600 dark:bg-pink-600 dark:hover:bg-pink-700 text-black font-bold py-1 px-3 border-2 border-black dark:border-white">POLL</button>
      </div>
      <button class="bg-purple-500 hover:bg-purple-600 dark:bg-purple-600 dark:hover:bg-purple-700 text-black font-bold py-1 px-4 border-2 border-black dark:border-white transform rotate-1">POST!</button>
    </div>
  </div>

  <!-- Forum Posts -->
  <div class="mb-8">
    <h2 class="text-2xl font-black uppercase tracking-tight text-black dark:text-white mb-4 border-b-4 border-black dark:border-white pb-2">RECENT POSTS</h2>
    
    <!-- Post 1 -->
    <div class="bg-white dark:bg-zinc-800 p-5 mb-6 border-4 border-black dark:border-zinc-600 transform -rotate-0.5">
      <div class="flex justify-between items-start mb-4">
        <div class="flex gap-3">
          <div class="w-12 h-12 border-2 border-black dark:border-white overflow-hidden">
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User avatar" class="w-full h-full object-cover">
          </div>
          <div>
            <h3 class="font-extrabold text-black dark:text-white">BRUTALIST_CODER42</h3>
            <p class="text-sm text-zinc-500 dark:text-zinc-400">Posted 2 hours ago in TECH TALK</p>
          </div>
        </div>
        <div class="bg-lime-300 dark:bg-lime-600 p-1 border border-black dark:border-white">
          <span class="text-xs text-black font-bold">HOT!</span>
        </div>
      </div>
      <div class="mb-4">
        <h4 class="text-xl font-black text-black dark:text-white mb-2 uppercase">ANYONE TRIED THE NEW FRAMEWORK YET?</h4>
        <p class="text-black dark:text-zinc-200">Just deployed my first project with it and I'm blown away by the performance. Wondering if others have similar experiences to share?</p>
      </div>
      <div class="mt-6 grid grid-cols-2">
        <div class="flex gap-6">
          <div class="flex items-center gap-1">
            <div class="w-6 h-6 bg-red-500 dark:bg-red-600 flex items-center justify-center border border-black dark:border-white">
              <span class="text-black font-bold text-xs">12</span>
            </div>
            <span class="text-black dark:text-white font-bold">LIKES</span>
          </div>
          <div class="flex items-center gap-1">
            <div class="w-6 h-6 bg-blue-500 dark:bg-blue-600 flex items-center justify-center border border-black dark:border-white">
              <span class="text-black font-bold text-xs">8</span>
            </div>
            <span class="text-black dark:text-white font-bold">REPLIES</span>
          </div>
        </div>
        <div class="flex justify-end gap-2">
          <button class="bg-yellow-400 hover:bg-yellow-500 dark:bg-yellow-600 dark:hover:bg-yellow-700 text-black font-bold py-1 px-3 text-sm border border-black dark:border-white">REPLY</button>
          <button class="bg-cyan-400 hover:bg-cyan-500 dark:bg-cyan-600 dark:hover:bg-cyan-700 text-black font-bold py-1 px-3 text-sm border border-black dark:border-white">SHARE</button>
        </div>
      </div>
    </div>
    
    <!-- Post 2 with image -->
    <div class="bg-white dark:bg-zinc-800 p-5 mb-6 border-4 border-black dark:border-zinc-600 transform rotate-0.5">
      <div class="flex justify-between items-start mb-4">
        <div class="flex gap-3">
          <div class="w-12 h-12 border-2 border-black dark:border-white overflow-hidden">
            <img src="https://randomuser.me/api/portraits/women/29.jpg" alt="User avatar" class="w-full h-full object-cover">
          </div>
          <div>
            <h3 class="font-extrabold text-black dark:text-white">DESIGN_REBEL</h3>
            <p class="text-sm text-zinc-500 dark:text-zinc-400">Posted 5 hours ago in CREATIVE WORK</p>
          </div>
        </div>
        <div class="bg-pink-300 dark:bg-pink-600 p-1 border border-black dark:border-white">
          <span class="text-xs text-black font-bold">NEW</span>
        </div>
      </div>
      <div class="mb-4">
        <h4 class="text-xl font-black text-black dark:text-white mb-2 uppercase">MY LATEST DIGITAL ART EXPERIMENT</h4>
        <p class="text-black dark:text-zinc-200 mb-4">Been playing with some brutalist styles in my latest series. What do you think of this one?</p>
        <div class="border-4 border-black dark:border-white mb-3">
          <img src="https://picsum.photos/seed/brutal/800/400" alt="Digital Art" class="w-full object-cover">
        </div>
      </div>
      <div class="mt-6 grid grid-cols-2">
        <div class="flex gap-6">
          <div class="flex items-center gap-1">
            <div class="w-6 h-6 bg-red-500 dark:bg-red-600 flex items-center justify-center border border-black dark:border-white">
              <span class="text-black font-bold text-xs">47</span>
            </div>
            <span class="text-black dark:text-white font-bold">LIKES</span>
          </div>
          <div class="flex items-center gap-1">
            <div class="w-6 h-6 bg-blue-500 dark:bg-blue-600 flex items-center justify-center border border-black dark:border-white">
              <span class="text-black font-bold text-xs">23</span>
            </div>
            <span class="text-black dark:text-white font-bold">REPLIES</span>
          </div>
        </div>
        <div class="flex justify-end gap-2">
          <button class="bg-yellow-400 hover:bg-yellow-500 dark:bg-yellow-600 dark:hover:bg-yellow-700 text-black font-bold py-1 px-3 text-sm border border-black dark:border-white">REPLY</button>
          <button class="bg-cyan-400 hover:bg-cyan-500 dark:bg-cyan-600 dark:hover:bg-cyan-700 text-black font-bold py-1 px-3 text-sm border border-black dark:border-white">SHARE</button>
        </div>
      </div>
    </div>
    
    <!-- Post 3 -->
    <div class="bg-white dark:bg-zinc-800 p-5 mb-6 border-4 border-black dark:border-zinc-600 transform -rotate-0.3">
      <div class="flex justify-between items-start mb-4">
        <div class="flex gap-3">
          <div class="w-12 h-12 border-2 border-black dark:border-white overflow-hidden">
            <img src="https://randomuser.me/api/portraits/men/18.jpg" alt="User avatar" class="w-full h-full object-cover">
          </div>
          <div>
            <h3 class="font-extrabold text-black dark:text-white">RAW_THOUGHTS</h3>
            <p class="text-sm text-zinc-500 dark:text-zinc-400">Posted 7 hours ago in GENERAL</p>
          </div>
        </div>
      </div>
      <div class="mb-4">
        <h4 class="text-xl font-black text-black dark:text-white mb-2 uppercase">UNPOPULAR OPINION: MINIMALISM IS OVERRATED</h4>
        <p class="text-black dark:text-zinc-200">I think we've gone too far with minimalism in design. Everything looks the same now. We need more personality, more chaos, more CHARACTER in our designs!</p>
      </div>
      <div class="mt-6 grid grid-cols-2">
        <div class="flex gap-6">
          <div class="flex items-center gap-1">
            <div class="w-6 h-6 bg-red-500 dark:bg-red-600 flex items-center justify-center border border-black dark:border-white">
              <span class="text-black font-bold text-xs">36</span>
            </div>
            <span class="text-black dark:text-white font-bold">LIKES</span>
          </div>
          <div class="flex items-center gap-1">
            <div class="w-6 h-6 bg-blue-500 dark:bg-blue-600 flex items-center justify-center border border-black dark:border-white">
              <span class="text-black font-bold text-xs">19</span>
            </div>
            <span class="text-black dark:text-white font-bold">REPLIES</span>
          </div>
        </div>
        <div class="flex justify-end gap-2">
          <button class="bg-yellow-400 hover:bg-yellow-500 dark:bg-yellow-600 dark:hover:bg-yellow-700 text-black font-bold py-1 px-3 text-sm border border-black dark:border-white">REPLY</button>
          <button class="bg-cyan-400 hover:bg-cyan-500 dark:bg-cyan-600 dark:hover:bg-cyan-700 text-black font-bold py-1 px-3 text-sm border border-black dark:border-white">SHARE</button>
        </div>
      </div>
    </div>
  </div>
  
  <!-- Load More -->
  <div class="text-center">
    <button class="bg-purple-500 hover:bg-purple-600 dark:bg-purple-600 dark:hover:bg-purple-700 text-black font-black py-3 px-6 border-4 border-black dark:border-white uppercase text-lg transform rotate-1 w-full md:w-auto">
      LOAD MORE POSTS!
    </button>
  </div>
</div>

インタラクティブコンポーネントコンポーネント

ブルータリズムスタイルでデザインされたインタラクティブコンポーネントで、ダークテーマをサポートする作品や製品の展示に適しています。

開けるプレビュー

                <div class="bg-gray-800 text-white p-8 rounded-lg shadow-lg">  <h1 class="text-3xl font-bold mb-6">My Portfolio</h1>  <div class="grid grid-cols-1 md:grid-cols-3 gap-6">    <div class="bg-gray-700 p-4 rounded-lg">      <img class="w-full h-32 object-cover rounded-t-lg" src="https://picsum.photos/300/200?random=1" alt="Project 1">      <h2 class="text-xl font-semibold mt-2">Project Title 1</h2>      <p class="text-gray-300">A short description of the project with high contrast and bold layout.</p>      <div class="mt-4 flex justify-between items-center">        <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">        <a href="#" class="text-blue-400 hover:underline">View More</a>      </div>    </div>    <div class="bg-gray-700 p-4 rounded-lg">      <img class="w-full h-32 object-cover rounded-t-lg" src="https://picsum.photos/300/200?random=2" alt="Project 2">      <h2 class="text-xl font-semibold mt-2">Project Title 2</h2>      <p class="text-gray-300">A short description of the project with high contrast and bold layout.</p>      <div class="mt-4 flex justify-between items-center">        <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar">        <a href="#" class="text-blue-400 hover:underline">View More</a>      </div>    </div>    <div class="bg-gray-700 p-4 rounded-lg">      <img class="w-full h-32 object-cover rounded-t-lg" src="https://picsum.photos/300/200?random=3" alt="Project 3">      <h2 class="text-xl font-semibold mt-2">Project Title 3</h2>      <p class="text-gray-300">A short description of the project with high contrast and bold layout.</p>      <div class="mt-4 flex justify-between items-center">        <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar">        <a href="#" class="text-blue-400 hover:underline">View More</a>      </div>    </div>  </div>  <div class="mt-8 text-center">    <button class="bg-blue-600 text-white py-2 px-4 rounded-lg hover:bg-blue-500">Load More Projects</button>  </div></div>

データテーブルコンポーネント

ダークモードのレスポンシブデータテーブル

開けるプレビュー

                <div class="container mx-auto p-4">
  <div class="border rounded-lg overflow-hidden">
    <table class="min-w-full bg-white dark:bg-gray-800">
      <thead>
        <tr>
          <th class="px-4 py-2 border-b-2 border-gray-200 dark:border-gray-700 bg-gray-100 dark:bg-gray-700 text-left text-sm leading-4 font-semibold text-gray-600 dark:text-gray-300 uppercase tracking-wider">Title</th>
          <th class="px-4 py-2 border-b-2 border-gray-200 dark:border-gray-700 bg-gray-100 dark:bg-gray-700 text-left text-sm leading-4 font-semibold text-gray-600 dark:text-gray-300 uppercase tracking-wider">Author</th>
          <th class="px-4 py-2 border-b-2 border-gray-200 dark:border-gray-700 bg-gray-100 dark:bg-gray-700 text-left text-sm leading-4 font-semibold text-gray-600 dark:text-gray-300 uppercase tracking-wider">Date</th>
        </tr>
      </thead>
      <tbody>
        <tr class="hover:bg-gray-50 dark:hover:bg-gray-900">
          <td class="px-4 py-2 border-b border-gray-200 dark:border-gray-700 text-sm leading-5 text-gray-900 dark:text-gray-300">Blog Post Title 1</td>
          <td class="px-4 py-2 border-b border-gray-200 dark:border-gray-700 text-sm leading-5 text-gray-900 dark:text-gray-300">John Doe</td>
          <td class="px-4 py-2 border-b border-gray-200 dark:border-gray-700 text-sm leading-5 text-gray-900 dark:text-gray-300">2023-10-27</td>
        </tr>
        <tr class="hover:bg-gray-50 dark:hover:bg-gray-900">
          <td class="px-4 py-2 border-b border-gray-200 dark:border-gray-700 text-sm leading-5 text-gray-900 dark:text-gray-300">Blog Post Title 2</td>
          <td class="px-4 py-2 border-b border-gray-200 dark:border-gray-700 text-sm leading-5 text-gray-900 dark:text-gray-300">Jane Smith</td>
          <td class="px-4 py-2 border-b border-gray-200 dark:border-gray-700 text-sm leading-5 text-gray-900 dark:text-gray-300">2023-10-26</td>
        </tr>
        <tr class="hover:bg-gray-50 dark:hover:bg-gray-900">
          <td class="px-4 py-2 border-b border-gray-200 dark:border-gray-700 text-sm leading-5 text-gray-900 dark:text-gray-300">Blog Post Title 3</td>
          <td class="px-4 py-2 border-b border-gray-200 dark:border-gray-700 text-sm leading-5 text-gray-900 dark:text-gray-300">Peter Jones</td>
          <td class="px-4 py-2 border-b border-gray-200 dark:border-gray-700 text-sm leading-5 text-gray-900 dark:text-gray-300">2023-10-25</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

ニューモーフィックバイブラントフッター

シンプルでレスポンシブなフッターコンポーネントで、ニューモルフィックなデザイン原則と鮮やかな色でスタイル付けされています。繊細な影のある柔らかく押し出された外観が特徴で、彩度の高いアクセントカラーを維持しています。フッターには、サイトナビゲーション、ソーシャルリンク、およびダークモードを完全にサポートする著作権情報の基本セクションが含まれています。

開けるプレビュー

                <!-- Neumorphic Vibrant Footer -->
<footer class="w-full py-8 bg-gray-100 dark:bg-gray-800 transition-colors duration-300">
  <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
    <!-- Main Footer Content -->
    <div class="rounded-2xl bg-gray-200 dark:bg-gray-700 p-8 shadow-[8px_8px_16px_#d1d1d1,_-8px_-8px_16px_#ffffff] dark:shadow-[8px_8px_16px_#1a1a1a,_-8px_-8px_16px_#333333]">
      
      <!-- Logo & Tagline -->
      <div class="flex flex-col md:flex-row justify-between items-center mb-8">
        <div class="mb-6 md:mb-0">
          <h2 class="text-2xl font-bold text-fuchsia-600 dark:text-fuchsia-400">Blog Title</h2>
          <p class="text-gray-600 dark:text-gray-300 mt-1">Insights & Stories</p>
        </div>
        
        <!-- Newsletter Signup -->
        <div class="flex items-center space-x-2">
          <input 
            type="email" 
            placeholder="Your email" 
            class="px-4 py-2 rounded-xl bg-gray-300 dark:bg-gray-600 text-gray-700 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-fuchsia-500 shadow-inner"
          >
          <button class="px-4 py-2 rounded-xl bg-gradient-to-br from-fuchsia-500 to-purple-600 text-white font-medium shadow-[3px_3px_6px_#d1d1d1,_-3px_-3px_6px_#ffffff] dark:shadow-[3px_3px_6px_#1a1a1a,_-3px_-3px_6px_#333333] hover:opacity-90 transition-opacity">
            Subscribe
          </button>
        </div>
      </div>
      
      <!-- Navigation Links -->
      <div class="grid grid-cols-2 md:grid-cols-4 gap-6 mb-8">
        <div>
          <h3 class="font-semibold text-lg mb-3 text-cyan-600 dark:text-cyan-400">Content</h3>
          <ul class="space-y-2 text-gray-600 dark:text-gray-300">
            <li><a href="#" class="hover:text-fuchsia-500 dark:hover:text-fuchsia-400 transition-colors">Articles</a></li>
            <li><a href="#" class="hover:text-fuchsia-500 dark:hover:text-fuchsia-400 transition-colors">Tutorials</a></li>
            <li><a href="#" class="hover:text-fuchsia-500 dark:hover:text-fuchsia-400 transition-colors">Stories</a></li>
          </ul>
        </div>
        
        <div>
          <h3 class="font-semibold text-lg mb-3 text-emerald-600 dark:text-emerald-400">Company</h3>
          <ul class="space-y-2 text-gray-600 dark:text-gray-300">
            <li><a href="#" class="hover:text-fuchsia-500 dark:hover:text-fuchsia-400 transition-colors">About</a></li>
            <li><a href="#" class="hover:text-fuchsia-500 dark:hover:text-fuchsia-400 transition-colors">Team</a></li>
            <li><a href="#" class="hover:text-fuchsia-500 dark:hover:text-fuchsia-400 transition-colors">Careers</a></li>
          </ul>
        </div>
        
        <div>
          <h3 class="font-semibold text-lg mb-3 text-amber-600 dark:text-amber-400">Support</h3>
          <ul class="space-y-2 text-gray-600 dark:text-gray-300">
            <li><a href="#" class="hover:text-fuchsia-500 dark:hover:text-fuchsia-400 transition-colors">Help Center</a></li>
            <li><a href="#" class="hover:text-fuchsia-500 dark:hover:text-fuchsia-400 transition-colors">Contact</a></li>
            <li><a href="#" class="hover:text-fuchsia-500 dark:hover:text-fuchsia-400 transition-colors">Privacy</a></li>
          </ul>
        </div>
        
        <div>
          <h3 class="font-semibold text-lg mb-3 text-blue-600 dark:text-blue-400">Connect</h3>
          <div class="flex space-x-4">
            <!-- Social Icons -->
            <a href="#" class="w-10 h-10 rounded-xl flex items-center justify-center bg-gray-300 dark:bg-gray-600 text-fuchsia-500 dark:text-fuchsia-400 shadow-[3px_3px_6px_#d1d1d1,_-3px_-3px_6px_#ffffff] dark:shadow-[3px_3px_6px_#1a1a1a,_-3px_-3px_6px_#333333] hover:bg-fuchsia-500 hover:text-white dark:hover:bg-fuchsia-500 dark:hover:text-white transition-all">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
                <path d="M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.667c0-.955.192-1.333 1.115-1.333h2.885v-5h-3.808c-3.596 0-5.192 1.583-5.192 4.615v3.385z"/>
              </svg>
            </a>
            <a href="#" class="w-10 h-10 rounded-xl flex items-center justify-center bg-gray-300 dark:bg-gray-600 text-cyan-500 dark:text-cyan-400 shadow-[3px_3px_6px_#d1d1d1,_-3px_-3px_6px_#ffffff] dark:shadow-[3px_3px_6px_#1a1a1a,_-3px_-3px_6px_#333333] hover:bg-cyan-500 hover:text-white dark:hover:bg-cyan-500 dark:hover:text-white transition-all">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
                <path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/>
              </svg>
            </a>
            <a href="#" class="w-10 h-10 rounded-xl flex items-center justify-center bg-gray-300 dark:bg-gray-600 text-pink-500 dark:text-pink-400 shadow-[3px_3px_6px_#d1d1d1,_-3px_-3px_6px_#ffffff] dark:shadow-[3px_3px_6px_#1a1a1a,_-3px_-3px_6px_#333333] hover:bg-pink-500 hover:text-white dark:hover:bg-pink-500 dark:hover:text-white transition-all">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
                <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/>
              </svg>
            </a>
          </div>
        </div>
      </div>
      
      <!-- Footer Bottom -->
      <div class="pt-6 border-t border-gray-300 dark:border-gray-600 flex flex-col sm:flex-row justify-between items-center space-y-4 sm:space-y-0">
        <p class="text-gray-600 dark:text-gray-300 text-sm">
          © 2023 Blog Title. All rights reserved.
        </p>
        <div class="flex space-x-4 text-sm text-gray-500 dark:text-gray-400">
          <a href="#" class="hover:text-fuchsia-500 dark:hover:text-fuchsia-400 transition-colors">Terms</a>
          <a href="#" class="hover:text-fuchsia-500 dark:hover:text-fuchsia-400 transition-colors">Privacy</a>
          <a href="#" class="hover:text-fuchsia-500 dark:hover:text-fuchsia-400 transition-colors">Cookies</a>
        </div>
      </div>
      
    </div>
  </div>
</footer>

マテリアルデザインナビゲーションコンポーネント

グレースケールの配色を使用したソーシャルメディアインターフェース用のシンプルでレスポンシブなマテリアルデザインナビゲーションコンポーネント。ロゴ、ナビゲーションリンク、検索バー、ユーザーアバターを備えたすっきりとしたレイアウトが特徴です。Tailwind の dark: プレフィックスを使用したダークモードのサポートが含まれています。

開けるプレビュー

                <!-- Material Design Navigation Component for Social Media -->
<nav class="w-full bg-white dark:bg-gray-900 shadow-md transition-colors duration-200">
  <div class="max-w-6xl mx-auto px-4">
    <div class="flex justify-between items-center h-16">
      <!-- Logo and Brand -->
      <div class="flex items-center">
        <div class="flex-shrink-0">
          <span class="text-gray-800 dark:text-white font-medium text-xl">SocialConnect</span>
        </div>
        
        <!-- Desktop Navigation Links -->
        <div class="hidden md:block ml-10">
          <div class="flex items-center space-x-4">
            <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200">Home</a>
            <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200">Explore</a>
            <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200">Messages</a>
            <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200">Notifications</a>
          </div>
        </div>
      </div>
      
      <!-- Search Bar -->
      <div class="hidden md:block flex-1 max-w-xs mx-4">
        <div class="relative">
          <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
            <svg class="h-5 w-5 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path>
            </svg>
          </div>
          <input type="text" class="block w-full pl-10 pr-3 py-2 border border-gray-300 dark:border-gray-700 rounded-md leading-5 bg-gray-100 dark:bg-gray-800 placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-500 dark:focus:ring-gray-400 focus:border-gray-500 dark:focus:border-gray-400 text-sm text-gray-900 dark:text-white transition-colors duration-200" placeholder="Search">
        </div>
      </div>
      
      <!-- Right side - User profile and mobile menu button -->
      <div class="flex items-center">
        <!-- User Avatar -->
        <div class="ml-3 flex items-center">
          <div class="relative">
            <img class="h-8 w-8 rounded-full ring-2 ring-gray-200 dark:ring-gray-700" src="https://randomuser.me/api/portraits/women/72.jpg" alt="User avatar">
            <span class="absolute bottom-0 right-0 block h-2 w-2 rounded-full ring-1 ring-white dark:ring-gray-800 bg-green-400"></span>
          </div>
        </div>
        
        <!-- Mobile menu button -->
        <button type="button" class="md:hidden ml-4 inline-flex items-center justify-center p-2 rounded-md text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-gray-500 dark:focus:ring-gray-400 transition-colors duration-200">
          <svg class="h-6 w-6" 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 6h16M4 12h16M4 18h16"></path>
          </svg>
        </button>
      </div>
    </div>
    
    <!-- Mobile Search Bar (visible on mobile only) -->
    <div class="md:hidden py-2">
      <div class="relative">
        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
          <svg class="h-5 w-5 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path>
          </svg>
        </div>
        <input type="text" class="block w-full pl-10 pr-3 py-2 border border-gray-300 dark:border-gray-700 rounded-md leading-5 bg-gray-100 dark:bg-gray-800 placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-500 dark:focus:ring-gray-400 focus:border-gray-500 dark:focus:border-gray-400 text-sm text-gray-900 dark:text-white transition-colors duration-200" placeholder="Search">
      </div>
    </div>
  </div>
  
  <!-- Mobile Navigation Menu (hidden by default) -->
  <div class="hidden md:hidden bg-white dark:bg-gray-900 border-t border-gray-200 dark:border-gray-800">
    <div class="px-2 pt-2 pb-3 space-y-1">
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-900 dark:text-white bg-gray-100 dark:bg-gray-800">Home</a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors duration-200">Explore</a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors duration-200">Messages</a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors duration-200">Notifications</a>
    </div>
  </div>
</nav>

1 ... 146 147 148 149 150 ... 315

検索コンポーネント

カテゴリ

すべてのコンポーネント

メディア埋め込みコンポーネント

ミニマリストプログレスバー

Glassmorphism カートボタンに追加

グレースケールソーシャルメディアタイムライン

3Dソーシャルオーサーカード

ブルータリストコミュニティフォーラムコンポーネント

インタラクティブコンポーネントコンポーネント

データテーブルコンポーネント

ニューモーフィックバイブラントフッター

マテリアルデザインナビゲーションコンポーネント