検索コンポーネント

すべてのコンポーネント

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

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

ユーザーメンションダークモードをサポートするコンポーネントで、レスポンシブエフェクトとダークテーマのサポートが特徴です。画像には picsum.photos のランダムなプレースホルダー画像を使用し、アバターには randomuser.me を使用します。

開けるプレビュー

                <div class="bg-gray-900 text-white p-4 rounded-lg">
  <h2 class="text-xl font-bold mb-4">User Mentions</h2>
  <div class="space-y-4">
    <div class="flex items-center">
      <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
      <div>
        <p class="font-semibold">John Doe</p>
        <p class="text-gray-400 text-sm">Mentioned you in a comment</p>
      </div>
    </div>
    <div class="flex items-center">
      <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar">
      <div>
        <p class="font-semibold">Jane Smith</p>
        <p class="text-gray-400 text-sm">Mentioned you in a post</p>
      </div>
    </div>
    <div class="flex items-center">
      <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/19.jpg" alt="Avatar">
      <div>
        <p class="font-semibold">Peter Jones</p>
        <p class="text-gray-400 text-sm">Mentioned you in a message</p>
      </div>
    </div>
  </div>
</div>

ダークモードタブコンポーネント

ダークモードを念頭に置いて設計されたレスポンシブタブコンポーネントで、Tailwind CSSを利用しています。

開けるプレビュー

                <div class="bg-gray-900 text-white rounded-lg p-4">
  <div class="flex space-x-2">
    <button class="tab-button active bg-gray-700 rounded-lg px-4 py-2 focus:outline-none">Tab 1</button>
    <button class="tab-button bg-gray-700 rounded-lg px-4 py-2 focus:outline-none">Tab 2</button>
    <button class="tab-button bg-gray-700 rounded-lg px-4 py-2 focus:outline-none">Tab 3</button>
  </div>
  <div class="tab-content mt-4">
    <div class="content active">
      <h2 class="text-lg font-semibold">Content for Tab 1</h2>
      <img src="https://picsum.photos/400/200?random=1" alt="Random placeholder" class="mt-2 rounded-lg">
      <p class="mt-2">This is the content for the first tab. Here you can add more information, images, etc.</p>
    </div>
    <div class="content hidden">
      <h2 class="text-lg font-semibold">Content for Tab 2</h2>
      <img src="https://picsum.photos/400/200?random=2" alt="Random placeholder" class="mt-2 rounded-lg">
      <p class="mt-2">This is the content for the second tab. More details can be added here.</p>
    </div>
    <div class="content hidden">
      <h2 class="text-lg font-semibold">Content for Tab 3</h2>
      <img src="https://picsum.photos/400/200?random=3" alt="Random placeholder" class="mt-2 rounded-lg">
      <p class="mt-2">Here is the content for the third tab, where additional insights can be included.</p>
    </div>
  </div>
</div>
<style>
  .tab-button.active {
    background-color: #1f2937;
    border: 1px solid #4b5563;
  }
  .tab-button:hover {
    background-color: #374151;
  }
  .content.hidden {
    display: none;
  }
  .content.active {
    display: block;
  }
</style>

ボタンコンポーネント

レスポンシブエフェクトとダークテーマのサポートを特徴とするレトロ/ビンテージスタイルのボタンコンポーネントで、80年代と90年代の美学からのノスタルジアを呼び起こすように設計されています。

開けるプレビュー

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800 p-5">
    <h1 class="text-4xl font-bold text-center text-gray-800 dark:text-gray-200 mb-4">Retro/Vintage Buttons</h1>
    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
        <button class="bg-pink-500 text-white font-bold py-2 px-4 rounded-full shadow-lg transform transition-transform duration-200 hover:scale-105 hover:bg-pink-400 dark:bg-pink-600 dark:hover:bg-pink-500">
            Retro Pink Button
        </button>
        <button class="bg-blue-500 text-white font-bold py-2 px-4 rounded-full shadow-lg transform transition-transform duration-200 hover:scale-105 hover:bg-blue-400 dark:bg-blue-600 dark:hover:bg-blue-500">
            Vintage Blue Button
        </button>
        <button class="bg-green-500 text-white font-bold py-2 px-4 rounded-full shadow-lg transform transition-transform duration-200 hover:scale-105 hover:bg-green-400 dark:bg-green-600 dark:hover:bg-green-500">
            Nostalgic Green Button
        </button>
        <button class="bg-purple-500 text-white font-bold py-2 px-4 rounded-full shadow-lg transform transition-transform duration-200 hover:scale-105 hover:bg-purple-400 dark:bg-purple-600 dark:hover:bg-purple-500">
            Retro Purple Button
        </button>
    </div>
    <div class="mt-8">
        <img class="w-32 h-32 rounded-full border-4 border-gray-300 dark:border-gray-600 mb-4" src="https://picsum.photos/200/200" alt="Random Placeholder" />
        <p class="text-center text-gray-600 dark:text-gray-300">Nostalgic Image</p>
    </div>
    <div class="mt-4">
        <img class="w-16 h-16 rounded-full border-4 border-gray-300 dark:border-gray-600 mb-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Random User Avatar" />
        <p class="text-center text-gray-600 dark:text-gray-300">User Avatar</p>
    </div>
</div>

検索ボックスコンポーネント

レスポンシブデザインとダークテーマをサポートするダークモード検索ボックスコンポーネント。JavaScriptは使用しておりません。画像はプレースホルダー画像です。

開けるプレビュー

                <form class="flex items-center w-full max-w-md mx-auto mt-10">
  <label for="simple-search" class="sr-only">Search</label>
  <div class="relative w-full">
    <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
      <svg aria-hidden="true" class="w-5 h-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" id="simple-search" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5  dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Search" required>
  </div>
  <button type="submit" class="p-2.5 ml-2 text-sm font-medium text-white bg-blue-700 rounded-lg border border-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
    <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 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
    </svg>
    <span class="sr-only">Search</span>
  </button>
</form>

エラーメッセージコンポーネント

スキューモーフィックなデザインのエラーメッセージコンポーネントで、リアルなアラートアイコンと影付きの境界線が特徴です。レスポンシブレイアウトをサポートし、ダークモード用の明確なスタイルが含まれているため、さまざまなテーマで読みやすさと視覚的に適切な外観が保証されます。

開けるプレビュー

                <div class="rounded-lg shadow-lg bg-gradient-to-br from-red-500 to-red-700 p-6 max-w-sm mx-auto mt-10 relative overflow-hidden dark:from-gray-700 dark:to-gray-900">
    <div class="absolute top-0 left-0 w-full h-full pointer-events-none" style="background: radial-gradient(circle at top left, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 50%);"></div>
    <div class="flex items-center space-x-4">
        <div class="flex-shrink-0">
            <!-- Skeuomorphic Error Icon -->
            <svg class="h-8 w-8 text-white filter drop-shadow-md dark:text-red-400" 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 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.306 16c-.77 1.333.192 3 1.732 3z" />
            </svg>
        </div>
        <div>
            <h3 class="text-lg leading-6 font-medium text-white drop-shadow dark:text-red-50">
                Error Occurred
            </h3>
            <p class="mt-2 text-sm text-red-100 dark:text-red-200">
                An unexpected error has occurred. Please try again later.
            </p>
        </div>
    </div>
</div>

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

ユーザーが言及するコンポーネントは、レスポンシブデザインとダークモードのサポートを備えたGlassmorphismスタイルを実装しています。

開けるプレビュー

                <div class="flex items-center p-4 bg-white bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-lg shadow-lg dark:bg-gray-800 dark:bg-opacity-20 transition-all duration-300 ease-in-out">
  <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
  <div class="flex-grow">
    <p class="text-white font-semibold text-lg dark:text-white">John Doe</p>
    <p class="text-gray-200 text-sm dark:text-gray-300">@johndoe</p>
  </div>
  <button class="px-3 py-1 bg-blue-500 text-white text-sm rounded hover:bg-blue-600 transition duration-300 ease-in-out dark:bg-blue-700 dark:hover:bg-blue-800">
    Follow
  </button>
</div>

レトロナビゲーションコンポーネント

80 年代 / 90 年代のヴィンテージの美学を備えたレトロなスタイルのナビゲーションコンポーネントで、レスポンシブデザインと Tailwind CSS を使用したダークテーマのサポートが特徴です。

開けるプレビュー

                <nav class="bg-white dark:bg-gray-800 shadow-lg p-6 rounded-lg">
    <div class="container mx-auto flex justify-between items-center">
        <div class="flex items-center space-x-4">
            <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
            <span class="text-xl font-bold text-gray-800 dark:text-white">Retro Nav</span>
        </div>
        <div class="hidden md:flex space-x-6">
            <a href="#" class="text-gray-800 dark:text-white hover:text-blue-500 transition duration-300">Home</a>
            <a href="#" class="text-gray-800 dark:text-white hover:text-blue-500 transition duration-300">About</a>
            <a href="#" class="text-gray-800 dark:text-white hover:text-blue-500 transition duration-300">Services</a>
            <a href="#" class="text-gray-800 dark:text-white hover:text-blue-500 transition duration-300">Contact</a>
        </div>
        <div class="md:hidden flex items-center">
            <button class="text-gray-800 dark:text-white focus:outline-none">
                <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-7 6h7"/>
                </svg>
            </button>
        </div>
    </div>
    <div class="mt-4 md:hidden">
        <div class="p-4 bg-gray-200 dark:bg-gray-700 rounded-lg">
            <a href="#" class="block text-gray-800 dark:text-white hover:text-blue-500 transition duration-300 py-2">Home</a>
            <a href="#" class="block text-gray-800 dark:text-white hover:text-blue-500 transition duration-300 py-2">About</a>
            <a href="#" class="block text-gray-800 dark:text-white hover:text-blue-500 transition duration-300 py-2">Services</a>
            <a href="#" class="block text-gray-800 dark:text-white hover:text-blue-500 transition duration-300 py-2">Contact</a>
        </div>
    </div>
</nav>

カートに入れるボタン

Tailwind CSSでデザインされたSkeuomorphicの「Add to Cart」ボタンコンポーネントで、レスポンシブエフェクトとダークテーマのサポートが特徴です。

開けるプレビュー

                <div class="flex items-center justify-center h-screen bg-gray-100 dark:bg-gray-900">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 flex items-center space-x-4 transition-transform transform hover:scale-105">
        <img src="https://picsum.photos/50" alt="Product Image" class="w-12 h-12 rounded-lg shadow">
        <div class="flex-1">
            <h2 class="text-lg font-bold text-gray-800 dark:text-gray-200">Product Name</h2>
            <p class="text-gray-600 dark:text-gray-400">Short description of the product.</p>
        </div>
        <button class="bg-blue-500 text-white font-semibold py-2 px-4 rounded-lg shadow-md hover:bg-blue-400 transition duration-200">
            Add to Cart
        </button>
    </div>
</div>

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

Tailwind CSS を使用して Neumorphism スタイルで設計されたレスポンシブデータテーブルコンポーネントで、ダークテーマのサポートとランダムなプレースホルダーイメージが特徴です。

開けるプレビュー

                <div class="container mx-auto p-4">
    <div class="bg-white dark:bg-gray-800 shadow-2xl rounded-lg p-6 transition ease-in-out duration-300">
        <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4">User Data Table</h2>
        <table class="min-w-full bg-white dark:bg-gray-900 rounded-lg shadow-lg">
            <thead>
                <tr class="w-full bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-sm">
                    <th class="py-3 px-4 text-left">#</th>
                    <th class="py-3 px-4 text-left">Avatar</th>
                    <th class="py-3 px-4 text-left">Name</th>
                    <th class="py-3 px-4 text-left">Email</th>
                    <th class="py-3 px-4 text-left">Phone</th>
                </tr>
            </thead>
            <tbody>
                <tr class="hover:bg-gray-100 dark:hover:bg-gray-700">
                    <td class="py-2 px-4 border-b">1</td>
                    <td class="py-2 px-4 border-b"><img src="https://picsum.photos/40" alt="Avatar" class="rounded-full"/></td>
                    <td class="py-2 px-4 border-b">John Doe</td>
                    <td class="py-2 px-4 border-b">[email protected]</td>
                    <td class="py-2 px-4 border-b">(123) 456-7890</td>
                </tr>
                <tr class="hover:bg-gray-100 dark:hover:bg-gray-700">
                    <td class="py-2 px-4 border-b">2</td>
                    <td class="py-2 px-4 border-b"><img src="https://picsum.photos/40" alt="Avatar" class="rounded-full"/></td>
                    <td class="py-2 px-4 border-b">Jane Smith</td>
                    <td class="py-2 px-4 border-b">[email protected]</td>
                    <td class="py-2 px-4 border-b">(321) 654-0987</td>
                </tr>
                <tr class="hover:bg-gray-100 dark:hover:bg-gray-700">
                    <td class="py-2 px-4 border-b">3</td>
                    <td class="py-2 px-4 border-b"><img src="https://picsum.photos/40" alt="Avatar" class="rounded-full"/></td>
                    <td class="py-2 px-4 border-b">Mike Johnson</td>
                    <td class="py-2 px-4 border-b">[email protected]</td>
                    <td class="py-2 px-4 border-b">(456) 789-0123</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

3D Design フッターナビゲーションコンポーネント

レスポンシブデザインとダークモードをサポートする3Dスタイルのフッターナビゲーションコンポーネント。

開けるプレビュー

                <footer class="bg-gray-100 dark:bg-gray-900 relative">
  <div class="relative max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
    <div class="relative z-10 grid grid-cols-2 md:grid-cols-4 gap-8">
      <div class="transform transition duration-500 hover:scale-105">
        <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Solutions</h3>
        <ul role="list" class="mt-4 space-y-4">
          <li><a href="#" class="text-base text-gray-500 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white transform transition duration-500 hover:translate-x-1">Marketing</a></li>
          <li><a href="#" class="text-base text-gray-500 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white transform transition duration-500 hover:translate-x-1">Analytics</a></li>
          <li><a href="#" class="text-base text-gray-500 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white transform transition duration-500 hover:translate-x-1">Commerce</a></li>
          <li><a href="#" class="text-base text-gray-500 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white transform transition duration-500 hover:translate-x-1">Insights</a></li>
        </ul>
      </div>
      <div class="transform transition duration-500 hover:scale-105">
        <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Support</h3>
        <ul role="list" class="mt-4 space-y-4">
          <li><a href="#" class="text-base text-gray-500 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white transform transition duration-500 hover:translate-x-1">Pricing</a></li>
          <li><a href="#" class="text-base text-gray-500 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white transform transition duration-500 hover:translate-x-1">Documentation</a></li>
          <li><a href="#" class="text-base text-gray-500 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white transform transition duration-500 hover:translate-x-1">Guides</a></li>
          <li><a href="#" class="text-base text-gray-500 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white transform transition duration-500 hover:translate-x-1">API Status</a></li>
        </ul>
      </div>
      <div class="transform transition duration-500 hover:scale-105">
        <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Company</h3>
        <ul role="list" class="mt-4 space-y-4">
          <li><a href="#" class="text-base text-gray-500 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white transform transition duration-500 hover:translate-x-1">About</a></li>
          <li><a href="#" class="text-base text-gray-500 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white transform transition duration-500 hover:translate-x-1">Blog</a></li>
          <li><a href="#" class="text-base text-gray-500 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white transform transition duration-500 hover:translate-x-1">Jobs</a></li>
          <li><a href="#" class="text-base text-gray-500 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white transform transition duration-500 hover:translate-x-1">Press</a></li>
          <li><a href="#" class="text-base text-gray-500 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white transform transition duration-500 hover:translate-x-1">Partners</a></li>
        </ul>
      </div>
      <div class="transform transition duration-500 hover:scale-105">
        <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Legal</h3>
        <ul role="list" class="mt-4 space-y-4">
          <li><a href="#" class="text-base text-gray-500 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white transform transition duration-500 hover:translate-x-1">Claim</a></li>
          <li><a href="#" class="text-base text-gray-500 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white transform transition duration-500 hover:translate-x-1">Privacy</a></li>
          <li><a href="#" class="text-base text-gray-500 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white transform transition duration-500 hover:translate-x-1">Terms</a></li>
        </ul>
      </div>
    </div>
    <div class="mt-8 border-t border-gray-300 dark:border-gray-700 pt-8 md:flex md:items-center md:justify-between">
      <p class="text-base text-gray-500 dark:text-gray-400">&copy; 2023 Your Company, Inc. All rights reserved.</p>
    </div>
  </div>
  <div class="absolute top-0 left-0 w-full h-full overflow-hidden">
    <div class="absolute bottom-0 right-0 transform translate-x-1/2 translate-y-1/2 w-64 h-64 rounded-full bg-blue-500 dark:bg-blue-700 opacity-20 blur-3xl"></div>
    <div class="absolute top-0 left-0 transform -translate-x-1/2 -translate-y-1/2 w-64 h-64 rounded-full bg-purple-500 dark:bg-purple-700 opacity-20 blur-3xl"></div>
  </div>
</footer>

1 ... 290 291 292 293 294 ... 315

検索コンポーネント

カテゴリ

すべてのコンポーネント