検索コンポーネント

すべてのコンポーネント

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

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

アーストーンカラー、マイクロインタラクション、ダークモードのサポートを備えたシンプルなデータテーブルコンポーネントで、ソーシャルメディアインターフェイスに適しています。

                <div class="container mx-auto p-4">
  <div class="bg-white dark:bg-gray-800 shadow rounded-lg overflow-hidden">
    <table class="min-w-full leading-normal">
      <thead>
        <tr>
          <th class="px-5 py-3 border-b-2 border-gray-200 dark:border-gray-700 bg-gray-100 dark:bg-gray-700 text-left text-xs font-semibold text-gray-600 dark:text-gray-300 uppercase tracking-wider">
            User
          </th>
          <th class="px-5 py-3 border-b-2 border-gray-200 dark:border-gray-700 bg-gray-100 dark:bg-gray-700 text-left text-xs font-semibold text-gray-600 dark:text-gray-300 uppercase tracking-wider">
            Status
          </th>
          <th class="px-5 py-3 border-b-2 border-gray-200 dark:border-gray-700 bg-gray-100 dark:bg-gray-700 text-left text-xs font-semibold text-gray-600 dark:text-gray-300 uppercase tracking-wider">
            Joined
          </th>
        </tr>
      </thead>
      <tbody>
        <tr class="hover:bg-gray-50 dark:hover:bg-gray-700 transition duration-150 ease-in-out">
          <td class="px-5 py-5 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm">
            <div class="flex items-center">
              <div class="flex-shrink-0 w-10 h-10">
                <img class="w-full h-full rounded-full"
                     src="https://randomuser.me/api/portraits/men/85.jpg"
                     alt="" />
              </div>
              <div class="ml-3">
                <p class="text-gray-900 dark:text-white whitespace-no-wrap">
                  John Doe
                </p>
              </div>
            </div>
          </td>
          <td class="px-5 py-5 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm">
            <p class="text-gray-900 dark:text-white whitespace-no-wrap">
              Active
            </p>
          </td>
          <td class="px-5 py-5 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm">
            <p class="text-gray-900 dark:text-white whitespace-no-wrap">
              Jan 10, 2023
            </p>
          </td>
        </tr>
        <tr class="hover:bg-gray-50 dark:hover:bg-gray-700 transition duration-150 ease-in-out">
          <td class="px-5 py-5 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm">
            <div class="flex items-center">
              <div class="flex-shrink-0 w-10 h-10">
                <img class="w-full h-full rounded-full"
                     src="https://randomuser.me/api/portraits/women/45.jpg"
                     alt="" />
              </div>
              <div class="ml-3">
                <p class="text-gray-900 dark:text-white whitespace-no-wrap">
                  Jane Smith
                </p>
              </div>
            </div>
          </td>
          <td class="px-5 py-5 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm">
            <p class="text-gray-900 dark:text-white whitespace-no-wrap">
              Pending
            </p>
          </td>
          <td class="px-5 py-5 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm">
            <p class="text-gray-900 dark:text-white whitespace-no-wrap">
              Feb 15, 2023
            </p>
          </td>
        </tr>
        <tr class="hover:bg-gray-50 dark:hover:bg-gray-700 transition duration-150 ease-in-out">
          <td class="px-5 py-5 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm">
            <div class="flex items-center">
              <div class="flex-shrink-0 w-10 h-10">
                <img class="w-full h-full rounded-full"
                     src="https://randomuser.me/api/portraits/men/60.jpg"
                     alt="" />
              </div>
              <div class="ml-3">
                <p class="text-gray-900 dark:text-white whitespace-no-wrap">
                  Peter Jones
                </p>
              </div>
            </div>
          </td>
          <td class="px-5 py-5 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm">
            <p class="text-gray-900 dark:text-white whitespace-no-wrap">
              Inactive
            </p>
          </td>
          <td class="px-5 py-5 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm">
            <p class="text-gray-900 dark:text-white whitespace-no-wrap">
              Mar 20, 2023
            </p>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

ヘッダーコンポーネント

マイクロインタラクションと鮮やかな色を備えたダッシュボード用のレスポンシブヘッダーコンポーネントで、ダークテーマをサポートします。

開けるプレビュー

                <header class="bg-blue-600 dark:bg-gray-800 p-4 flex justify-between items-center transition-all duration-300">
    <div class="flex items-center space-x-4">
        <img src="https://picsum.photos/40/40" alt="Logo" class="rounded-full h-10 w-10 hover:scale-110 transition-transform duration-300">
        <h1 class="text-white text-xl font-bold hover:text-blue-300 transition-colors duration-300">Dashboard</h1>
    </div>
    <nav class="hidden md:flex space-x-6">
        <a href="#" class="text-white hover:text-blue-300 transition-colors duration-300">Home</a>
        <a href="#" class="text-white hover:text-blue-300 transition-colors duration-300">Reports</a>
        <a href="#" class="text-white hover:text-blue-300 transition-colors duration-300">Settings</a>
    </nav>
    <div class="flex items-center space-x-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full h-10 w-10 border-2 border-white hover:border-blue-300 transition-all duration-300">
        <button class="bg-blue-700 dark:bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-500 transition-colors duration-300">Logout</button>
    </div>
</header>

トースト通知

レスポンシブでダークテーマと互換性のあるトースト通知コンポーネントで、Eコマース向けのミニマリスト/フラットデザインで、補色スキームを使用しています。

開けるプレビュー

                <div class="fixed bottom-4 right-4 space-y-2">

  <!-- Success Toast (Example) -->
  <div class="bg-green-500 text-white px-4 py-3 rounded-lg shadow-md dark:bg-green-700">
    <div class="flex items-center justify-between">
      <div class="flex items-center">
        <svg class="h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
        </svg>
        <div>
          <p class="font-bold">Success!</p>
          <p class="text-sm">Item added to cart successfully.</p>
        </div>
      </div>
    </div>
  </div>

  <!-- Error Toast (Example) -->
  <div class="bg-red-500 text-white px-4 py-3 rounded-lg shadow-md dark:bg-red-700">
    <div class="flex items-center justify-between">
      <div class="flex items-center">
        <svg class="h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l7-7m0 0l7 7m0-7l-7 7m7-7L7 7"></path>
        </svg>
        <div>
          <p class="font-bold">Error!</p>
          <p class="text-sm">Failed to add item to cart.</p>
        </div>
      </div>
    </div>
  </div>

    <!-- Info Toast (Example) -->
  <div class="bg-blue-500 text-white px-4 py-3 rounded-lg shadow-md dark:bg-blue-700">
    <div class="flex items-center justify-between">
      <div class="flex items-center">
       <svg class="h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4H12a9 9 0 007.562-3.438 9 9 0 000-10.124A9 9 0 0012 3a9 9 0 00-7.562 3.438A9 9 0 004.062 12a9 9 0 003.438 7.562z"></path>
        </svg>
        <div>
          <p class="font-bold">Info!</p>
          <p class="text-sm">Your item is being processed.</p>
        </div>
      </div>
    </div>
  </div>


</div>

フィードバックコンポーネントコンポーネント

e コマース向けに設計されたミニマリストフィードバックコンポーネントで、柔らかなパステルカラー、レスポンシブデザイン、ダークテーマのサポートが特徴です。このコンポーネントには、入力フィールド、評価システム、送信ボタンを備えたフィードバックフォームが含まれており、すべて Tailwind CSS でスタイル設定されています。

開けるプレビュー

                <div class="max-w-md mx-auto p-6 bg-white rounded-lg shadow-md dark:bg-gray-800">
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Your Feedback Matters!</h2>
    <p class="text-gray-600 dark:text-gray-400 mb-6">We value your opinion. Please leave your feedback below!</p>
    <form class="space-y-4">
        <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300" for="name">Name</label>
            <input id="name" type="text" placeholder="Your Name" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-pink-500 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200" required />
        </div>
        <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300" for="email">Email</label>
            <input id="email" type="email" placeholder="Your Email" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-pink-500 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200" required />
        </div>
        <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300" for="rating">Rating</label>
            <select id="rating" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-pink-500 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200" required>
                <option value="5">⭐⭐⭐⭐⭐</option>
                <option value="4">⭐⭐⭐⭐</option>
                <option value="3">⭐⭐⭐</option>
                <option value="2">⭐⭐</option>
                <option value="1">⭐</option>
            </select>
        </div>
        <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300" for="message">Message</label>
            <textarea id="message" rows="4" placeholder="Your Feedback" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-pink-500 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200" required></textarea>
        </div>
        <div>
            <button type="submit" class="w-full py-2 px-4 bg-pink-500 text-white font-semibold rounded-md shadow-md hover:bg-pink-600 focus:outline-none focus:ring-2 focus:ring-pink-500 dark:bg-pink-600 dark:hover:bg-pink-700">Submit Feedback</button>
        </div>
    </form>
    <div class="mt-6 flex items-center space-x-2">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="h-10 w-10 rounded-full">
        <span class="text-gray-600 dark:text-gray-400">John Doe</span>
    </div>

    <div class="mt-4 text-sm text-gray-500 dark:text-gray-400">
        <p>Feedback received on: <span class="text-gray-800 dark:text-gray-200">10/23/2023</span></p>
    </div>
</div>

ニューモーフィズムライクリアクションボタン

Responsive Like/Reaction Buttons Componentは、ダークテーマのサポートとNeumorphismデザインを備えたブログ/コンテンツ用です。

開けるプレビュー

                <div class="flex items-center justify-center p-4 dark:bg-gray-900">
  <div class="flex space-x-4">
    <!-- Like Button -->
    <button class="flex items-center space-x-2 px-4 py-2 rounded-full text-gray-600 bg-gray-200 dark:text-gray-300 dark:bg-gray-800 shadow-neumorphic-light dark:shadow-neumorphic-dark">
      <svg class="w-5 h-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="M14 10h4.764a2 2 0 011.808 2.808l-7.922 10.604a3 3 0 01-5.371 0L2.428 12.81a2 2 0 011.808-2.808H9M4 5h16a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V6a1 1 0 011-1z"></path></svg>
      <span>Like</span>
    </button>
    <!-- Celebrate Button -->
    <button class="flex items-center space-x-2 px-4 py-2 rounded-full text-gray-600 bg-gray-200 dark:text-gray-300 dark:bg-gray-800 shadow-neumorphic-light dark:shadow-neumorphic-dark">
      <svg class="w-5 h-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="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m0 18v-9"></path></svg>
      <span>Celebrate</span>
    </button>
    <!-- Insightful Button -->
    <button class="flex items-center space-x-2 px-4 py-2 rounded-full text-gray-600 bg-gray-200 dark:text-gray-300 dark:bg-gray-800 shadow-neumorphic-light dark:shadow-neumorphic-dark">
      <svg class="w-5 h-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="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1m-.707 6.364l-.707-.707M12 20h1m-6.364-1.636l-.707.707M3 12H4m-.707-6.364l.707-.707M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m3 0h5M9 7h12a2 2 0 012 2v5a2 2 0 01-2 2H9m0-9v9m4-9v.01"></path></svg>
      <span>Insightful</span>
    </button>
  </div>
</div>

<style>
.shadow-neumorphic-light {
  box-shadow: 5px 5px 10px #a7a7a7, -5px -5px 10px #ffffff;
}
.dark .shadow-neumorphic-dark {
  box-shadow: 5px 5px 10px #1a1a1a, -5px -5px 10px #333333;
}
</style>

ショッピングカートコンポーネント

ソーシャルメディアインターフェース用に最適化されたショッピングカートコンポーネントで、マイクロインタラクション、鮮やかな色、シンプルなレイアウトが特徴です。レスポンシブデザインとダークモードのサポートが含まれています。

開けるプレビュー

                <div class="p-4 bg-white dark:bg-gray-800 rounded-lg">
  <h2 class="text-xl font-bold mb-4 text-indigo-600 dark:text-indigo-400">Shopping Cart</h2>
  <div class="space-y-4">
    <!-- Cart Item -->
    <div class="flex items-center justify-between border-b pb-4 border-gray-200 dark:border-gray-700">
      <div class="flex items-center">
        <img src="https://picsum.photos/seed/item1/50/50" alt="Product Image" class="rounded mr-4">
        <div>
          <p class="font-semibold text-gray-800 dark:text-gray-200">Product Name 1</p>
          <p class="text-gray-600 dark:text-gray-400 text-sm">$19.99</p>
        </div>
      </div>
      <div class="text-indigo-600 dark:text-indigo-400 font-bold animate-bounce">
        x1
      </div>
    </div>
    <!-- Cart Item -->
    <div class="flex items-center justify-between border-b pb-4 border-gray-200 dark:border-gray-700">
      <div class="flex items-center">
        <img src="https://picsum.photos/seed/item2/50/50" alt="Product Image" class="rounded mr-4">
        <div>
          <p class="font-semibold text-gray-800 dark:text-gray-200">Product Name 2</p>
          <p class="text-gray-600 dark:text-gray-400 text-sm">$29.50</p>
        </div>
      </div>
      <div class="text-indigo-600 dark:text-indigo-400 font-bold animate-bounce">
        x2
      </div>
    </div>
  </div>
  <div class="flex justify-between items-center mt-6">
    <p class="text-lg font-bold text-gray-800 dark:text-gray-200">Total:</p>
    <p class="text-lg font-bold text-indigo-600 dark:text-indigo-400">$78.98</p>
  </div>
  <button class="mt-6 w-full bg-indigo-500 hover:bg-indigo-600 text-white py-2 rounded-md transition duration-300">
    Checkout
  </button>
</div>

Glassmorphismハンバーガーメニュー

シンプルでレスポンシブなハンバーガーメニューコンポーネントで、Glassmorphismデザイン、補色スキーム、ダークモードのサポートを備えています。

開けるプレビュー

                <nav class="backdrop-filter backdrop-blur-lg bg-opacity-20 bg-blue-500 dark:bg-gray-800 dark:bg-opacity-20 p-4">
  <div class="container mx-auto flex justify-between items-center">
    <div class="text-white text-lg font-semibold">My Blog</div>
    <button class="text-white focus:outline-none lg:hidden">
      <svg class="w-6 h-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 12h16m-4 6h4"></path>
      </svg>
    </button>
    <div class="hidden lg:flex space-x-4">
      <a href="#" class="text-white hover:text-gray-200">Home</a>
      <a href="#" class="text-white hover:text-gray-200">About</a>
      <a href="#" class="text-white hover:text-gray-200">Contact</a>
    </div>
  </div>
</nav>

レトロなソーシャルメディアナビゲーション

ソーシャルメディア用のダークモードを備えたレスポンシブナビゲーションコンポーネント(レトロ/ビンテージ、アーストーン、中程度の複雑さ)

開けるプレビュー

                <nav class="bg-stone-200 dark:bg-stone-800 p-4">
  <div class="container mx-auto flex items-center justify-between">
    <div class="text-xl font-bold text-stone-800 dark:text-stone-200">SocialApp</div>
    <ul class="flex space-x-4">
      <li><a href="#" class="text-stone-600 dark:text-stone-400 hover:text-stone-800 dark:hover:text-stone-200">Feed</a></li>
      <li><a href="#" class="text-stone-600 dark:text-stone-400 hover:text-stone-800 dark:hover:text-stone-200">Profile</a></li>
      <li><a href="#" class="text-stone-600 dark:text-stone-400 hover:text-stone-800 dark:hover:text-stone-200">Messages</a></li>
      <li><a href="#" class="text-stone-600 dark:text-stone-400 hover:text-stone-800 dark:hover:text-stone-200">Settings</a></li>
    </ul>
  </div>
</nav>

フィルターコンポーネント

現実世界のコントロールを模倣したスキューモーフィックスタイルで設計されたフィルターコンポーネントは、グレースケールの配色を利用しており、複雑なインタラクティブ要素を持つダッシュボードに最適です。

開けるプレビュー

                <div class="p-5 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-lg">
    <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Filters</h2>
    <div class="flex flex-col space-y-4">
        <div class="flex items-center">
            <label for="search" class="text-gray-600 dark:text-gray-300 w-1/3">Search:</label>
            <input id="search" type="text" class="bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-gray-200 border border-gray-400 dark:border-gray-600  rounded-lg p-2 w-2/3 shadow-md focus:outline-none focus:ring focus:ring-gray-500" placeholder="Search..." />
        </div>
        <div class="flex items-center">
            <label for="date" class="text-gray-600 dark:text-gray-300 w-1/3">Date:</label>
            <input id="date" type="date" class="bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-gray-200 border border-gray-400 dark:border-gray-600 rounded-lg p-2 w-2/3 shadow-md focus:outline-none focus:ring focus:ring-gray-500" />
        </div>
        <div class="flex items-center">
            <label for="category" class="text-gray-600 dark:text-gray-300 w-1/3">Category:</label>
            <select id="category" class="bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-gray-200 border border-gray-400 dark:border-gray-600 rounded-lg p-2 w-2/3 shadow-md focus:outline-none focus:ring focus:ring-gray-500">
                <option>All</option>
                <option>Category 1</option>
                <option>Category 2</option>
                <option>Category 3</option>
            </select>
        </div>
        <div class="flex items-center">
            <label class="text-gray-600 dark:text-gray-300 w-1/3">Status:</label>
            <div class="flex items-center space-x-4 w-2/3">
                <label class="flex items-center">
                    <input type="checkbox" class="form-checkbox h-4 w-4 text-gray-600 dark:text-gray-300">
                    <span class="ml-2 text-gray-800 dark:text-gray-200">Active</span>
                </label>
                <label class="flex items-center">
                    <input type="checkbox" class="form-checkbox h-4 w-4 text-gray-600 dark:text-gray-300">
                    <span class="ml-2 text-gray-800 dark:text-gray-200">Inactive</span>
                </label>
            </div>
        </div>
        <button class="bg-gray-600 dark:bg-gray-400 text-white rounded-lg p-2 hover:bg-gray-700 dark:hover:bg-gray-500 transition duration-200">Apply Filters</button>
    </div>
</div>

サイドバーナビゲーションコンポーネント

ダッシュボード用に設計されたシンプルでレスポンシブなサイドバーナビゲーションコンポーネントで、魅力的なアニメーションと素朴な配色が特徴です。ダークモードをサポートしています。

開けるプレビュー

                <div class="flex flex-col h-screen bg-gray-200 dark:bg-gray-800 border-r border-gray-300 dark:border-gray-700 shadow-lg transition-transform duration-300 ease-in-out">
    <div class="flex items-center justify-center h-16 border-b border-gray-300 dark:border-gray-700 bg-green-600 dark:bg-green-800">
        <h1 class="text-xl text-white font-bold">Dashboard</h1>
    </div>
    <nav class="flex-1 p-4">
        <ul class="space-y-2">
            <li>
                <a href="#" class="flex items-center p-2 text-gray-700 dark:text-gray-300 hover:bg-green-500 dark:hover:bg-green-700 rounded transition-all duration-300 ease-in-out">
                    <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2">
                    <span>Profile</span>
                </a>
            </li>
            <li>
                <a href="#" class="flex items-center p-2 text-gray-700 dark:text-gray-300 hover:bg-green-500 dark:hover:bg-green-700 rounded transition-all duration-300 ease-in-out">
                    <img src="https://picsum.photos/seed/pic1/30/30" alt="Image 1" class="w-8 h-8 rounded-full mr-2">
                    <span>Reports</span>
                </a>
            </li>
            <li>
                <a href="#" class="flex items-center p-2 text-gray-700 dark:text-gray-300 hover:bg-green-500 dark:hover:bg-green-700 rounded transition-all duration-300 ease-in-out">
                    <img src="https://picsum.photos/seed/pic2/30/30" alt="Image 2" class="w-8 h-8 rounded-full mr-2">
                    <span>Settings</span>
                </a>
            </li>
        </ul>
    </nav>
    <div class="p-4 border-t border-gray-300 dark:border-gray-700">
        <a href="#" class="block text-center text-gray-700 dark:text-gray-300 hover:bg-green-500 dark:hover:bg-green-700 rounded p-2 transition-all duration-300 ease-in-out">Logout</a>
    </div>
</div>

1 ... 150 151 152 153 154 ... 315

検索コンポーネント

カテゴリ

すべてのコンポーネント