検索コンポーネント

すべてのコンポーネント

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

メガメニューコンポーネント

ダークテーマをサポートする作品や製品を紹介するために設計されたミニマリストのメガメニューコンポーネント。

                <nav class="bg-white dark:bg-gray-800 shadow-md">
    <div class="max-w-screen-xl mx-auto px-4 py-2 flex justify-between items-center">
        <h1 class="text-xl font-bold text-gray-800 dark:text-white">Portfolio</h1>
        <div class="relative">
            <button class="text-gray-700 dark:text-gray-300 focus:outline-none">
                Menu
            </button>
            <div class="absolute left-0 z-10 hidden bg-white dark:bg-gray-800 shadow-lg rounded-lg mt-2 transition-opacity ease-in-out duration-200">
                <div class="grid grid-cols-3 gap-4 p-4">
                    <div class="flex flex-col items-start">
                        <h2 class="text-lg font-semibold text-gray-800 dark:text-white">Category 1</h2>
                        <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100">Item 1</a>
                        <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100">Item 2</a>
                    </div>
                    <div class="flex flex-col items-start">
                        <h2 class="text-lg font-semibold text-gray-800 dark:text-white">Category 2</h2>
                        <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100">Item 1</a>
                        <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100">Item 2</a>
                    </div>
                    <div class="flex flex-col items-start">
                        <h2 class="text-lg font-semibold text-gray-800 dark:text-white">More</h2>
                        <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100">Contact</a>
                        <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100">About</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</nav>
<section class="bg-gray-100 dark:bg-gray-900 py-10">
    <div class="max-w-screen-xl mx-auto px-4">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-white text-center">Featured Works</h2>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-6">
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
                <img class="w-full h-48 object-cover" src="https://picsum.photos/400/300?random=1" alt="Work 1">
                <div class="p-4">
                    <h3 class="font-semibold text-gray-800 dark:text-white">Project Title 1</h3>
                    <p class="text-gray-600 dark:text-gray-300">Short description of the project.</p>
                </div>
            </div>
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
                <img class="w-full h-48 object-cover" src="https://picsum.photos/400/300?random=2" alt="Work 2">
                <div class="p-4">
                    <h3 class="font-semibold text-gray-800 dark:text-white">Project Title 2</h3>
                    <p class="text-gray-600 dark:text-gray-300">Short description of the project.</p>
                </div>
            </div>
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
                <img class="w-full h-48 object-cover" src="https://picsum.photos/400/300?random=3" alt="Work 3">
                <div class="p-4">
                    <h3 class="font-semibold text-gray-800 dark:text-white">Project Title 3</h3>
                    <p class="text-gray-600 dark:text-gray-300">Short description of the project.</p>
                </div>
            </div>
        </div>
    </div>
</section>

メガメニューコンポーネント

ブログ/コンテンツ Web サイト用のニューモーフィズムスタイルのメガメニューコンポーネントで、類似の配色と中程度の複雑さを使用します。ダークテーマをサポートするレスポンシブデザイン。JavaScript はありません。

開けるプレビュー

                <nav class="bg-gray-200 dark:bg-gray-800 transition-colors duration-300 ease-in-out">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex items-center justify-between h-16">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <span class="text-2xl font-bold text-gray-800 dark:text-gray-200">Blog Name</span>
                </div>
                <div class="hidden md:block">
                    <div class="ml-10 flex items-baseline space-x-4">
                        <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium neu neu-pressed">Home</a>
                        <div class="relative group">
                            <button class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium neu neu-pressed">Categories</button>
                            <div class="absolute z-10 left-0 mt-2 w-60 bg-gray-200 dark:bg-gray-700 rounded-md shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-opacity duration-300 ease-in-out neu">
                                <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600 neu-pressed">Technology</a>
                                <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600 neu-pressed">Travel</a>
                                <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600 neu-pressed">Food</a>
                            </div>
                        </div>
                        <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium neu neu-pressed">About</a>
                        <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium neu neu-pressed">Contact</a>
                    </div>
                </div>
            </div>
            <div class="-mr-2 flex md:hidden">
                <button class="inline-flex items-center justify-center p-2 rounded-md text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white hover:bg-gray-300 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-gray-500 neu neu-pressed">
                    <span class="sr-only">Open main menu</span>
                    <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
                    </svg>
                </button>
            </div>
        </div>
    </div>

    <div class="md:hidden" id="mobile-menu">
        <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
            <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium neu neu-pressed">Home</a>
            <div class="group">
                <button class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium w-full text-left neu neu-pressed">Categories</button>
                <div class="pl-4 mt-2 space-y-1">
                    <a href="#" class="block px-3 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600 rounded-md neu-pressed">Technology</a>
                    <a href="#" class="block px-3 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600 rounded-md neu-pressed">Travel</a>
                    <a href="#" class="block px-3 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600 rounded-md neu-pressed">Food</a>
                </div>
            </div>
            <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium neu neu-pressed">About</a>
            <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium neu neu-pressed">Contact</a>
        </div>
    </div>

    <style>
        .neu {
            box-shadow: 5px 5px 10px #a7a7a7, -5px -5px 10px #ffffff;
        }
        .dark .neu {
            box-shadow: 5px 5px 10px #4b4b4b, -5px -5px 10px #333333;
        }
        .neu-pressed {
             box-shadow: inset 5px 5px 10px #a7a7a7, inset -5px -5px 10px #ffffff;
        }
        .dark .neu-pressed {
            box-shadow: inset 5px 5px 10px #4b4b4b, inset -5px -5px 10px #333333;
        }
    </style>
</nav>

スキューモーフィックナビゲーションバー

スキューモーフィックなデザインスタイルを採用したソーシャルメディア用のシンプルなレスポンシブナビゲーションバーで、類似の配色を利用し、ダークモードをサポートしています。

開けるプレビュー

                <nav class="bg-gray-200 dark:bg-gray-800 p-4 shadow-lg rounded-lg">
    <div class="container mx-auto flex justify-between items-center">
        <div class="flex items-center">
            <img src="https://picsum.photos/40/40" alt="Logo" class="rounded-full mr-2">
            <span class="text-xl font-semibold text-gray-800 dark:text-gray-200">SocialApp</span>
        </div>
        <ul class="flex space-x-4">
            <li><a href="#" class="text-gray-800 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 transition-colors">Home</a></li>
            <li><a href="#" class="text-gray-800 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 transition-colors">About</a></li>
            <li><a href="#" class="text-gray-800 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 transition-colors">Contact</a></li>
            <li><a href="#" class="text-gray-800 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 transition-colors">Profile</a></li>
        </ul>
        <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="rounded-full w-10 h-10 border-2 border-gray-300 dark:border-gray-600">
        </div>
    </div>
</nav>

タグクラウドコンポーネント

グレースケールカラーとマイクロインタラクションを備えたレスポンシブタグクラウドコンポーネントで、ダークテーマをサポートするソーシャルメディアインターフェイス用に設計されています。

開けるプレビュー

                <div class="container mx-auto px-4 py-8 dark:bg-gray-900">
  <div class="text-center mb-8">
    <h2 class="text-3xl font-bold text-gray-800 dark:text-white">Popular Tags</h2>
  </div>
  <div class="flex flex-wrap justify-center gap-4">
    <span class="tag bg-gray-200 text-gray-700 px-4 py-2 rounded-full text-sm font-semibold transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-110 dark:bg-gray-700 dark:text-gray-300">#webdevelopment</span>
    <span class="tag bg-gray-200 text-gray-700 px-4 py-2 rounded-full text-sm font-semibold transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-110 dark:bg-gray-700 dark:text-gray-300">#tailwindcss</span>
    <span class="tag bg-gray-200 text-gray-700 px-4 py-2 rounded-full text-sm font-semibold transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-110 dark:bg-gray-700 dark:text-gray-300">#javascript</span>
    <span class="tag bg-gray-200 text-gray-700 px-4 py-2 rounded-full text-sm font-semibold transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-110 dark:bg-gray-700 dark:text-gray-300">#css3</span>
    <span class="tag bg-gray-200 text-gray-700 px-4 py-2 rounded-full text-sm font-semibold transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-110 dark:bg-gray-700 dark:text-gray-300">#html5</span>
    <span class="tag bg-gray-200 text-gray-700 px-4 py-2 rounded-full text-sm font-semibold transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-110 dark:bg-gray-700 dark:text-gray-300">#react</span>
    <span class="tag bg-gray-200 text-gray-700 px-4 py-2 rounded-full text-sm font-semibold transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-110 dark:bg-gray-700 dark:text-gray-300">#vuejs</span>
    <span class="tag bg-gray-200 text-gray-700 px-4 py-2 rounded-full text-sm font-semibold transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-110 dark:bg-gray-700 dark:text-gray-300">#angular</span>
    <span class="tag bg-gray-200 text-gray-700 px-4 py-2 rounded-full text-sm font-semibold transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-110 dark:bg-gray-700 dark:text-gray-300">#nodejs</span>
    <span class="tag bg-gray-200 text-gray-700 px-4 py-2 rounded-full text-sm font-semibold transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-110 dark:bg-gray-700 dark:text-gray-300">#python</span>
  </div>
</div>

バッジコンポーネント

バッジコンポーネント - レスポンシブダークテーマのeコマースのサポート。

開けるプレビュー

                <div class="flex justify-center items-center h-screen bg-gray-800 dark:bg-gray-900">
  <div class="flex flex-wrap gap-2 p-4 rounded-lg bg-gray-700 dark:bg-gray-800">
    <span class="px-3 py-1 text-sm font-semibold text-amber-100 bg-amber-600 rounded-full dark:bg-amber-700 dark:text-amber-200">New Arrival</span>
    <span class="px-3 py-1 text-sm font-semibold text-teal-100 bg-teal-600 rounded-full dark:bg-teal-700 dark:text-teal-200">Top Rated</span>
    <span class="px-3 py-1 text-sm font-semibold text-fuchsia-100 bg-fuchsia-600 rounded-full dark:bg-fuchsia-700 dark:text-fuchsia-200">Limited Stock</span>
    <span class="px-3 py-1 text-sm font-semibold text-orange-100 bg-orange-600 rounded-full dark:bg-orange-700 dark:text-orange-200">On Sale</span>
    <span class="px-3 py-1 text-sm font-semibold text-rose-100 bg-rose-600 rounded-full dark:bg-rose-700 dark:text-rose-200">Bestseller</span>
  </div>
</div>

列コンポーネント

ソーシャルネットワーキングインターフェイス用に設計されたグレースケールの配色を備えたミニマリストの列コンポーネント。ダークテーマをサポートするレスポンシブレイアウトが特徴です。

開けるプレビュー

                <div class="container mx-auto p-4 md:p-8">
    <h1 class="text-2xl font-semibold text-center text-gray-800 dark:text-gray-200">User Profiles</h1>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-6">
        <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg">
            <img class="rounded-full w-24 h-24 mx-auto" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
            <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 text-center mt-2">John Doe</h2>
            <p class="text-gray-600 dark:text-gray-400 text-center">@johndoe</p>
            <p class="text-gray-500 dark:text-gray-300 text-center mt-2">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
            <img class="mt-4 rounded-lg" src="https://picsum.photos/300/200?random=1" alt="Random Image">
        </div>
        <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg">
            <img class="rounded-full w-24 h-24 mx-auto" src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar">
            <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 text-center mt-2">Jane Smith</h2>
            <p class="text-gray-600 dark:text-gray-400 text-center">@janesmith</p>
            <p class="text-gray-500 dark:text-gray-300 text-center mt-2">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
            <img class="mt-4 rounded-lg" src="https://picsum.photos/300/200?random=2" alt="Random Image">
        </div>
        <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg">
            <img class="rounded-full w-24 h-24 mx-auto" src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar">
            <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 text-center mt-2">Michael Johnson</h2>
            <p class="text-gray-600 dark:text-gray-400 text-center">@michaeljohnson</p>
            <p class="text-gray-500 dark:text-gray-300 text-center mt-2">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
            <img class="mt-4 rounded-lg" src="https://picsum.photos/300/200?random=3" alt="Random Image">
        </div>
    </div>
</div>

製品ギャラリーコンポーネント

ダークモード UI 用に設計されたレスポンシブ製品ギャラリーコンポーネントで、補色が特徴で、ソーシャルメディアネットワーキングインターフェイスに適しています。

開けるプレビュー

                <div class="bg-gray-800 text-white p-6 rounded-lg shadow-lg">
    <h2 class="text-xl font-bold mb-4">Product Gallery</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <!-- Product Item -->
        <div class="bg-gray-700 p-4 rounded-lg transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/200/300?random=1" alt="Product 1" class="w-full h-48 object-cover rounded-t-lg">
            <div class="mt-2">
                <h3 class="text-lg font-semibold">Product 1</h3>
                <p class="text-gray-300">Description of product 1 in this gallery.</p>
                <div class="flex items-center mt-2">
                    <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
                    <span class="text-gray-400">by John Doe</span>
                </div>
            </div>
        </div>
        <!-- Product Item -->
        <div class="bg-gray-700 p-4 rounded-lg transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/200/300?random=2" alt="Product 2" class="w-full h-48 object-cover rounded-t-lg">
            <div class="mt-2">
                <h3 class="text-lg font-semibold">Product 2</h3>
                <p class="text-gray-300">Description of product 2 in this gallery.</p>
                <div class="flex items-center mt-2">
                    <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
                    <span class="text-gray-400">by Jane Doe</span>
                </div>
            </div>
        </div>
        <!-- Product Item -->
        <div class="bg-gray-700 p-4 rounded-lg transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/200/300?random=3" alt="Product 3" class="w-full h-48 object-cover rounded-t-lg">
            <div class="mt-2">
                <h3 class="text-lg font-semibold">Product 3</h3>
                <p class="text-gray-300">Description of product 3 in this gallery.</p>
                <div class="flex items-center mt-2">
                    <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
                    <span class="text-gray-400">by Alex Smith</span>
                </div>
            </div>
        </div>
        <!-- Additional Product Items can go here -->
    </div>
</div>

ユーザープロファイルコンポーネント

マイクロインタラクション、グレースケールの配色、複雑なレイアウト、ダークモードのサポート、ランダムな画像/アバターを備えたレスポンシブユーザープロファイルコンポーネント。

開けるプレビュー

                  <div class="relative h-screen bg-gray-100 dark:bg-gray-900 flex flex-col items-center justify-center">
    <div class="container mx-auto p-6">
      <div class="bg-white dark:bg-gray-800 shadow-xl rounded-lg overflow-hidden">
        <div class="relative h-48 bg-gray-300 dark:bg-gray-700">
          <img class="w-full h-full object-cover object-center" src="https://picsum.photos/seed/random/800/400" alt="Background">
          <div class="absolute inset-0 bg-black opacity-25"></div>
        </div>
        <div class="relative px-6 pb-6 mt-[-70px]">
          <div class="flex items-center justify-between">
            <div class="flex items-center space-x-4">
              <div class="w-20 h-20 rounded-full overflow-hidden border-4 border-white dark:border-gray-800">
                <img class="w-full h-full object-cover object-center" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
              </div>
              <h3 class="text-gray-900 dark:text-white text-2xl font-semibold">John Doe</h3>
            </div>
            <button class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition duration-300">
              <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="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
              </svg>
            </button>
          </div>
          <p class="mt-4 text-gray-700 dark:text-gray-300 leading-relaxed">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          <div class="flex justify-around items-center mt-6">
            <div class="text-center">
              <p class="text-gray-900 dark:text-white text-xl font-semibold">1.2K</p>
              <p class="text-gray-600 dark:text-gray-400 text-sm">Followers</p>
            </div>
            <div class="text-center">
              <p class="text-gray-900 dark:text-white text-xl font-semibold">500</p>
              <p class="text-gray-600 dark:text-gray-400 text-sm">Following</p>
            </div>
            <div class="text-center">
              <p class="text-gray-900 dark:text-white text-xl font-semibold">10K</p>
              <p class="text-gray-600 dark:text-gray-400 text-sm">Likes</p>
            </div>
          </div>
          <div class="mt-6">
            <h4 class="text-gray-900 dark:text-white text-lg font-semibold">Recent Activity</h4>
            <ul class="mt-4 space-y-3">
              <li class="flex items-center space-x-3 text-gray-700 dark:text-gray-300">
                <svg class="h-5 w-5" 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="M13 10V3L4 14h7v7l9-11h-7z"></path>
                </svg>
                <span>Posted a new article</span>
              </li>
              <li class="flex items-center space-x-3 text-gray-700 dark:text-gray-300">
                <svg class="h-5 w-5" 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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
                <span>Liked a post</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>

ユーザーメンションコンポーネント

Tailwind CSSを使用したダークテーマをサポートするレスポンシブユーザーメンションコンポーネント。JavaScriptは必要なく、Tailwindクラスを持つHTMLのみが必要です。ダークモードの場合は、スタイル設定にTailwindのdark:プレフィックスを使用します。画像はpicsum.photosから、アバターは randomuser.me から引用しています。

開けるプレビュー

                <div class="bg-gray-100 dark:bg-gray-900 py-8">
  <div class="max-w-3xl mx-auto px-4">
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4">User Mentions</h2>
    
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
      <div class="flex items-center mb-4">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-4">
        <div>
          <p class="text-gray-800 dark:text-white font-semibold">John Doe</p>
          <p class="text-gray-500 dark:text-gray-400 text-sm">@johndoe</p>
        </div>
      </div>
      
      <p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      </p>
      
      <div class="flex justify-end text-gray-500 dark:text-gray-400 text-sm">
        <span>2 days ago</span>
      </div>
    </div>
    
    <!-- Repeat similar blocks for other mentions -->
    
  </div>
</div>

ソーシャルメディアナビゲーションバー

Glassmorphism グレースケールシンプルなソーシャルメディアナビゲーションバーコンポーネント

開けるプレビュー

                <nav class="p-4 bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg dark:bg-gray-800 dark:bg-opacity-10 dark:backdrop-filter dark:backdrop-blur-lg">
  <div class="container mx-auto flex justify-between items-center">
    <div class="text-gray-800 dark:text-white text-xl font-bold">SocialApp</div>
    <div class="flex space-x-4">
      <a href="#" class="text-gray-800 dark:text-white hover:text-gray-600 dark:hover:text-gray-300">Feed</a>
      <a href="#" class="text-gray-800 dark:text-white hover:text-gray-600 dark:hover:text-gray-300">Profile</a>
      <a href="#" class="text-gray-800 dark:text-white hover:text-gray-600 dark:hover:text-gray-300">Messages</a>
    </div>
  </div>
</nav>

1 ... 231 232 233 234 235 ... 315

検索コンポーネント

カテゴリ

すべてのコンポーネント