検索コンポーネント

すべてのコンポーネント

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

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

ダークモードUIとパステルカラースキームを備えたソーシャルメディアインターフェイス用に設計されたレスポンシブタグクラウドコンポーネント。

                <div class="bg-gray-900 text-gray-200 p-6 rounded-lg shadow-lg max-w-lg mx-auto">
  <h2 class="text-2xl font-bold mb-4">Explore Tags</h2>
  <div class="flex flex-wrap">
    <span class="bg-pink-300 text-gray-900 hover:bg-pink-400 hover:text-white rounded-full px-4 py-2 m-2 transition duration-300">#WebDevelopment</span>
    <span class="bg-blue-300 text-gray-900 hover:bg-blue-400 hover:text-white rounded-full px-4 py-2 m-2 transition duration-300">#ReactJS</span>
    <span class="bg-green-300 text-gray-900 hover:bg-green-400 hover:text-white rounded-full px-4 py-2 m-2 transition duration-300">#TailwindCSS</span>
    <span class="bg-yellow-300 text-gray-900 hover:bg-yellow-400 hover:text-white rounded-full px-4 py-2 m-2 transition duration-300">#JavaScript</span>
    <span class="bg-purple-300 text-gray-900 hover:bg-purple-400 hover:text-white rounded-full px-4 py-2 m-2 transition duration-300">#CSS</span>
    <span class="bg-red-300 text-gray-900 hover:bg-red-400 hover:text-white rounded-full px-4 py-2 m-2 transition duration-300">#Frontend</span>
  </div>
  <div class="mt-6">
    <h3 class="text-xl font-semibold mb-2">Popular Users</h3>
    <div class="flex items-center mb-4">
      <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
      <span class="ml-3 text-lg">Jane Doe</span>
    </div>
    <div class="flex items-center mb-4">
      <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
      <span class="ml-3 text-lg">John Smith</span>
    </div>
    <div class="flex items-center mb-4">
      <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/78.jpg" alt="User Avatar">
      <span class="ml-3 text-lg">Alice Johnson</span>
    </div>
  </div>
  <div class="mt-4">
    <h3 class="text-xl font-semibold mb-2">Featured Posts</h3>
    <img class="w-full rounded-lg mb-2" src="https://picsum.photos/500/300" alt="Featured Post">
    <img class="w-full rounded-lg mb-2" src="https://picsum.photos/500/301" alt="Featured Post">
    <img class="w-full rounded-lg mb-2" src="https://picsum.photos/500/302" alt="Featured Post">
  </div>
</div>

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

Brutalismスタイルでデザインされたレスポンシブフィルターコンポーネントで、ダッシュボード設定のグレースケールカラースキームを備えています。インタラクティブなフィルターオプションが含まれており、ダークテーマをサポートしています。

開けるプレビュー

                <div class="bg-gray-800 dark:bg-gray-900 p-6 rounded-lg shadow-lg">
    <h2 class="text-xl font-bold text-white mb-4">Filters</h2>
    <div class="grid grid-cols-2 gap-4">
        <div class="flex flex-col">
            <label class="text-gray-300 dark:text-gray-400 mb-2">Date Range:</label>
            <input type="date" class="p-2 border border-gray-600 rounded bg-gray-700 dark:bg-gray-800 text-white" />
            <input type="date" class="p-2 mt-2 border border-gray-600 rounded bg-gray-700 dark:bg-gray-800 text-white" />
        </div>
        <div class="flex flex-col">
            <label class="text-gray-300 dark:text-gray-400 mb-2">User:</label>
            <input type="text" class="p-2 border border-gray-600 rounded bg-gray-700 dark:bg-gray-800 text-white" placeholder="Search by user..." />
        </div>
        <div class="flex flex-col">
            <label class="text-gray-300 dark:text-gray-400 mb-2">Status:</label>
            <select class="p-2 border border-gray-600 rounded bg-gray-700 dark:bg-gray-800 text-white">
                <option class="bg-gray-700 dark:bg-gray-800">All</option>
                <option class="bg-gray-700 dark:bg-gray-800">Active</option>
                <option class="bg-gray-700 dark:bg-gray-800">Inactive</option>
            </select>
        </div>
        <div class="flex flex-col">
            <label class="text-gray-300 dark:text-gray-400 mb-2">Category:</label>
            <select class="p-2 border border-gray-600 rounded bg-gray-700 dark:bg-gray-800 text-white">
                <option class="bg-gray-700 dark:bg-gray-800">Select category...</option>
                <option class="bg-gray-700 dark:bg-gray-800">Category 1</option>
                <option class="bg-gray-700 dark:bg-gray-800">Category 2</option>
            </select>
        </div>
    </div>
    <button class="mt-4 p-2 bg-gray-600 hover:bg-gray-500 text-white rounded">Apply Filters</button>
</div>

インフォグラフィックコンポーネント

ニューモーフィズムスタイルのインフォグラフィックコンポーネント、グレースケールの配色、シンプルなレイアウト、ダッシュボード用、ダークテーマ対応のレスポンシブ

開けるプレビュー

                <div class="p-4 md:p-8 bg-gray-200 dark:bg-gray-800 antialiased font-sans">
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
    <!-- Card 1 -->
    <div class="rounded-lg p-6 shadow-neumorphism-light dark:shadow-neumorphism-dark">
      <div class="text-gray-700 dark:text-gray-300 mb-4">
        <h3 class="text-lg font-semibold mb-2">Total Users</h3>
        <p class="text-3xl font-bold">15,250</p>
      </div>
      <div class="flex items-center justify-between text-gray-600 dark:text-gray-400 text-sm">
        <span>Since last month</span>
        <span class="text-green-500 dark:text-green-400">+ 5.2%</span>
      </div>
    </div>

    <!-- Card 2 -->
    <div class="rounded-lg p-6 shadow-neumorphism-light dark:shadow-neumorphism-dark">
      <div class="text-gray-700 dark:text-gray-300 mb-4">
        <h3 class="text-lg font-semibold mb-2">Revenue</h3>
        <p class="text-3xl font-bold">$150,000</p>
      </div>
      <div class="flex items-center justify-between text-gray-600 dark:text-gray-400 text-sm">
        <span>Since last month</span>
        <span class="text-green-500 dark:text-green-400">+ 8.1%</span>
      </div>
    </div>

    <!-- Card 3 -->
    <div class="rounded-lg p-6 shadow-neumorphism-light dark:shadow-neumorphism-dark">
      <div class="text-gray-700 dark:text-gray-300 mb-4">
        <h3 class="text-lg font-semibold mb-2">New Orders</h3>
        <p class="text-3xl font-bold">750</p>
      </div>
      <div class="flex items-center justify-between text-gray-600 dark:text-gray-400 text-sm">
        <span>Since last month</span>
        <span class="text-red-500 dark:text-red-400">- 2.5%</span>
      </div>
    </div>
  </div>

  <!-- Include custom shadow styles for Neumorphism -->
  <style>
    .shadow-neumorphism-light {
      box-shadow: 7px 7px 15px #bebebe, -7px -7px 15px #ffffff;
    }
    .dark .shadow-neumorphism-dark {
      box-shadow: 7px 7px 15px #444444, -7px -7px 15px #666666;
    }
  </style>
</div>

コンテンツリンクコンポーネントにスキップする

3D 要素、アーストーンで設計され、ダッシュボードインターフェイス用に調整されたコンテンツリンクコンポーネントにスキップします。明るいテーマと暗いテーマの両方のスタイルが含まれています。

開けるプレビュー

                <div class="flex flex-col gap-4 p-4 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg transform transition-all duration-300 hover:scale-105">
    <a href="#content" class="flex items-center justify-center h-12 px-4 font-medium text-white bg-brown-700 rounded-full shadow-md dark:bg-green-600 hover:bg-brown-600 dark:hover:bg-green-500 transition duration-300">
        Skip to Content
    </a>
    <p class="text-gray-800 dark:text-gray-300">
        Use this link to quickly navigate to the main content of the dashboard.
    </p>
    <img src="https://picsum.photos/200/100" alt="Dashboard Image" class="rounded-lg shadow-md" />
    <div class="flex items-center gap-4">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-600" />
        <span class="text-gray-800 dark:text-gray-300">User: John Doe</span>
    </div>
</div>

サイトマップコンポーネント

ソーシャルメディアインターフェース用のマテリアルデザインスタイルのサイトマップコンポーネントで、Tailwind CSS を使用した応答性とダークモードのサポートを特徴としています。ソーシャルネットワーキングプラットフォーム用のアースカラーと中程度の複雑さを組み込んでいます。

開けるプレビュー

                <div class="bg-stone-100 text-stone-800 p-8 dark:bg-stone-800 dark:text-stone-200">
  <div class="container mx-auto">
    <h2 class="text-3xl font-bold mb-6">Site Map</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      <div>
        <h3 class="text-xl font-semibold mb-4">General</h3>
        <ul>
          <li class="mb-2"><a href="#" class="hover:underline">Home</a></li>
          <li class="mb-2"><a href="#" class="hover:underline">About Us</a></li>
          <li class="mb-2"><a href="#" class="hover:underline">Contact</a></li>
          <li class="mb-2"><a href="#" class="hover:underline">Blog</a></li>
        </ul>
      </div>
      <div>
        <h3 class="text-xl font-semibold mb-4">Account</h3>
        <ul>
          <li class="mb-2"><a href="#" class="hover:underline">Profile</a></li>
          <li class="mb-2"><a href="#" class="hover:underline">Settings</a></li>
          <li class="mb-2"><a href="#" class="hover:underline">Privacy</a></li>
          <li class="mb-2"><a href="#" class="hover:underline">Security</a></li>
        </ul>
      </div>
      <div>
        <h3 class="text-xl font-semibold mb-4">Social</h3>
        <ul>
          <li class="mb-2"><a href="#" class="hover:underline">Feed</a></li>
          <li class="mb-2"><a href="#" class="hover:underline">Messages</a></li>
          <li class="mb-2"><a href="#" class="hover:underline">Friends</a></li>
          <li class="mb-2"><a href="#" class="hover:underline">Groups</a></li>
        </ul>
      </div>
      <div>
        <h3 class="text-xl font-semibold mb-4">Resources</h3>
        <ul>
          <li class="mb-2"><a href="#" class="hover:underline">Help Center</a></li>
          <li class="mb-2"><a href="#" class="hover:underline">FAQs</a></li>
          <li class="mb-2"><a href="#" class="hover:underline">Terms of Service</a></li>
          <li class="mb-2"><a href="#" class="hover:underline">Privacy Policy</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>

列コンポーネント

アースカラーのブルータリズムスタイルでデザインされたレスポンシブなColumns Componentは、eコマース向けに調整され、中程度の複雑さとダークテーマのサポートを特徴としています。

開けるプレビュー

                <div class="container mx-auto p-6">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div class="bg-brown-200 dark:bg-brown-700 p-4 rounded-lg shadow-md">
            <img src="https://picsum.photos/200/300?random=1" alt="Product 1" class="w-full h-48 object-cover rounded-t-lg">
            <h2 class="text-lg font-bold mt-2">Product Title 1</h2>
            <p class="text-gray-800 dark:text-gray-300">Description for product 1. A brief overview of the product features and benefits.</p>
            <div class="flex justify-between items-center mt-4">
                <span class="font-semibold text-xl text-brown-900 dark:text-brown-100">$19.99</span>
                <button class="bg-brown-800 dark:bg-brown-600 text-white py-1 px-3 rounded hover:bg-brown-900 dark:hover:bg-brown-500">Add to Cart</button>
            </div>
        </div>
        <div class="bg-brown-200 dark:bg-brown-700 p-4 rounded-lg shadow-md">
            <img src="https://picsum.photos/200/300?random=2" alt="Product 2" class="w-full h-48 object-cover rounded-t-lg">
            <h2 class="text-lg font-bold mt-2">Product Title 2</h2>
            <p class="text-gray-800 dark:text-gray-300">Description for product 2. A brief overview of the product features and benefits.</p>
            <div class="flex justify-between items-center mt-4">
                <span class="font-semibold text-xl text-brown-900 dark:text-brown-100">$29.99</span>
                <button class="bg-brown-800 dark:bg-brown-600 text-white py-1 px-3 rounded hover:bg-brown-900 dark:hover:bg-brown-500">Add to Cart</button>
            </div>
        </div>
        <div class="bg-brown-200 dark:bg-brown-700 p-4 rounded-lg shadow-md">
            <img src="https://picsum.photos/200/300?random=3" alt="Product 3" class="w-full h-48 object-cover rounded-t-lg">
            <h2 class="text-lg font-bold mt-2">Product Title 3</h2>
            <p class="text-gray-800 dark:text-gray-300">Description for product 3. A brief overview of the product features and benefits.</p>
            <div class="flex justify-between items-center mt-4">
                <span class="font-semibold text-xl text-brown-900 dark:text-brown-100">$39.99</span>
                <button class="bg-brown-800 dark:bg-brown-600 text-white py-1 px-3 rounded hover:bg-brown-900 dark:hover:bg-brown-500">Add to Cart</button>
            </div>
        </div>
        <div class="bg-brown-200 dark:bg-brown-700 p-4 rounded-lg shadow-md">
            <img src="https://picsum.photos/200/300?random=4" alt="Product 4" class="w-full h-48 object-cover rounded-t-lg">
            <h2 class="text-lg font-bold mt-2">Product Title 4</h2>
            <p class="text-gray-800 dark:text-gray-300">Description for product 4. A brief overview of the product features and benefits.</p>
            <div class="flex justify-between items-center mt-4">
                <span class="font-semibold text-xl text-brown-900 dark:text-brown-100">$49.99</span>
                <button class="bg-brown-800 dark:bg-brown-600 text-white py-1 px-3 rounded hover:bg-brown-900 dark:hover:bg-brown-500">Add to Cart</button>
            </div>
        </div>
        <div class="bg-brown-200 dark:bg-brown-700 p-4 rounded-lg shadow-md">
            <img src="https://picsum.photos/200/300?random=5" alt="Product 5" class="w-full h-48 object-cover rounded-t-lg">
            <h2 class="text-lg font-bold mt-2">Product Title 5</h2>
            <p class="text-gray-800 dark:text-gray-300">Description for product 5. A brief overview of the product features and benefits.</p>
            <div class="flex justify-between items-center mt-4">
                <span class="font-semibold text-xl text-brown-900 dark:text-brown-100">$59.99</span>
                <button class="bg-brown-800 dark:bg-brown-600 text-white py-1 px-3 rounded hover:bg-brown-900 dark:hover:bg-brown-500">Add to Cart</button>
            </div>
        </div>
        <div class="bg-brown-200 dark:bg-brown-700 p-4 rounded-lg shadow-md">
            <img src="https://picsum.photos/200/300?random=6" alt="Product 6" class="w-full h-48 object-cover rounded-t-lg">
            <h2 class="text-lg font-bold mt-2">Product Title 6</h2>
            <p class="text-gray-800 dark:text-gray-300">Description for product 6. A brief overview of the product features and benefits.</p>
            <div class="flex justify-between items-center mt-4">
                <span class="font-semibold text-xl text-brown-900 dark:text-brown-100">$69.99</span>
                <button class="bg-brown-800 dark:bg-brown-600 text-white py-1 px-3 rounded hover:bg-brown-900 dark:hover:bg-brown-500">Add to Cart</button>
            </div>
        </div>
    </div>
</div>

2要素認証コンポーネント

魅力的なマイクロインタラクションと補色スキームで設計された2要素認証コンポーネント。レスポンシブでダークモードをサポートしており、ポートフォリオ内の作品や製品を紹介するのに適しています。

開けるプレビュー

                <div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-800 p-6">
    <div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg max-w-md w-full">
        <div class="p-6">
            <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Two-Factor Authentication</h2>
            <p class="text-gray-600 dark:text-gray-400 mb-6">Please enter the verification code sent to your email.</p>
            <div class="flex justify-between items-center mb-4">
                <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
                <span class="text-gray-700 dark:text-gray-300">[email protected]</span>
            </div>
            <form>
                <input type="text" placeholder="Enter your code" class="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring focus:ring-indigo-500 dark:focus:ring-indigo-400 mb-4 transition-all duration-150">
                <button type="submit" class="w-full bg-indigo-600 text-white font-bold py-3 rounded-lg hover:bg-indigo-700 focus:ring-2 focus:ring-indigo-400 focus:outline-none transition-all duration-150">Verify</button>
            </form>
            <div class="mt-4 flex justify-between">
                <a href="#" class="text-indigo-600 dark:text-indigo-400 hover:underline transition-all duration-150">Resend Code</a>
                <a href="#" class="text-indigo-600 dark:text-indigo-400 hover:underline transition-all duration-150">Back to Login</a>
            </div>
        </div>
    </div>
</div>

レトロビンテージアーストーンモーダル

ダークモードと応答性を備えたダッシュボード用のアーストーンのレトロ/ビンテージモーダルコンポーネント

開けるプレビュー

                <div class="fixed inset-0 bg-gray-900 bg-opacity-50 overflow-y-auto h-full w-full dark:bg-gray-800 dark:bg-opacity-75">
  <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-stone-100 dark:bg-stone-700">
    <div class="mt-3 text-center">
      <div
        class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-emerald-100 dark:bg-emerald-700"
      >
        <svg
          class="h-6 w-6 text-emerald-600 dark:text-emerald-200"
          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="M5 13l4 4L19 7"
          ></path>
        </svg>
      </div>
      <h3
        class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100"
      >
        Dashboard Item Details
      </h3>
      <div class="mt-2 px-7 py-3">
        <p class="text-sm text-gray-500 dark:text-gray-300">
          Detailed information about the selected dashboard item. This is a placeholder for dynamic content.
        </p>
      </div>
      <div class="items-center px-4 py-3">
        <button
          id="ok-btn"
          class="px-4 py-2 bg-emerald-500 text-white text-base font-medium rounded-md w-full shadow-sm hover:bg-emerald-700 focus:outline-none focus:ring-2 focus:ring-emerald-300 dark:focus:ring-emerald-800"
        >
          Close
        </button>
      </div>
    </div>
  </div>
</div>

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

ソーシャルメディア用のシンプルなGlassmorphismフィードバックコンポーネントで、トライアドカラースキーム、レスポンシブデザイン、ダークテーマのサポートが特徴です。JavaScript は必要ありません。

開けるプレビュー

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
  <div class="w-full max-w-sm bg-white dark:bg-gray-800 p-6 rounded-lg shadow-xl bg-opacity-60 dark:bg-opacity-60 glassmorphism-card">
    <h2 class="text-xl font-semibold text-gray-800 dark:text-white mb-4 text-center">Leave Feedback</h2>
    <textarea class="w-full p-3 mb-4 border border-gray-300 dark:border-gray-700 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:text-white dark:bg-gray-700 dark:placeholder-gray-400 bg-white bg-opacity-50 dark:bg-opacity-50 glassmorphism-input" rows="4" placeholder="Your feedback..."></textarea>
    <button class="w-full bg-blue-500 text-white py-2 px-4 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition duration-200 ease-in-out">Submit Feedback</button>
  </div>
</div>

<style>
.glassmorphism-card {
  background-color: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.dark .glassmorphism-card {
  background-color: rgba(31, 41, 55, 0.6);
}

.glassmorphism-input {
  background-color: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.dark .glassmorphism-input {
  background-color: rgba(55, 65, 81, 0.5);
}
</style>

ソーシャルメディアヘッダー

ソーシャルメディアインターフェース用のレスポンシブヘッダーコンポーネントで、トライアドカラースキームと最小限の要素を使用したダークモードUIで設計されています。これには、サイトのタイトル、検索バー、ユーザープロファイルリンクが含まれ、Tailwind CSSを使用したダークモードに適応したスタイルが含まれています。

開けるプレビュー

                <header class="bg-gray-900 text-gray-200 py-4 px-6 shadow-md">
  <div class="container mx-auto flex flex-wrap items-center justify-between">
    <div class="text-xl font-bold">SocialNet</div>
    <div class="flex-grow mx-4 max-w-md">
      <input type="text" placeholder="Search..." class="w-full px-3 py-2 bg-gray-800 text-gray-200 rounded-md focus:outline-none focus:ring focus:border-blue-300 dark:bg-gray-700 dark:text-gray-100 dark:focus:border-blue-600">
    </div>
    <nav>
      <a href="#" class="px-3 py-2 hover:text-blue-400 dark:hover:text-blue-500">Profile</a>
    </nav>
  </div>
</header>

1 ... 217 218 219 220 221 ... 315

検索コンポーネント

カテゴリ

すべてのコンポーネント