検索コンポーネント

すべてのコンポーネント

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

ボタンコンポーネント

                <div class="flex flex-wrap gap-4 p-4 bg-gray-100 dark:bg-gray-900">

  <!-- Primary Button -->
  <button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-lg shadow-md transition duration-300 ease-in-out dark:bg-blue-700 dark:hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
    Primary Button
  </button>

  <!-- Secondary Button -->
  <button class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-3 px-6 rounded-lg shadow-md transition duration-300 ease-in-out dark:bg-gray-600 dark:hover:bg-gray-500 dark:text-white focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-opacity-50">
    Secondary Button
  </button>

  <!-- Success Button -->
  <button class="bg-green-600 hover:bg-green-700 text-white font-bold py-3 px-6 rounded-lg shadow-md transition duration-300 ease-in-out dark:bg-green-700 dark:hover:bg-green-800 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-50">
    Success Button
  </button>

  <!-- Danger Button -->
  <button class="bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-6 rounded-lg shadow-md transition duration-300 ease-in-out dark:bg-red-700 dark:hover:bg-red-800 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50">
    Danger Button
  </button>

  <!-- Outline Button -->
  <button class="bg-transparent hover:bg-blue-200 text-blue-700 font-semibold py-3 px-6 border border-blue-600 rounded-lg shadow-md transition duration-300 ease-in-out dark:border-blue-400 dark:text-blue-400 dark:hover:bg-blue-900 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
    Outline Button
  </button>

  <!-- Disabled Button -->
  <button class="bg-gray-300 text-gray-600 font-bold py-3 px-6 rounded-lg cursor-not-allowed shadow-md dark:bg-gray-700 dark:text-gray-500" disabled>
    Disabled Button
  </button>

</div>

通知コンポーネント

マテリアルデザインの原則とeコマースアプリケーション向けの単色の配色で設計された通知コンポーネントで、レスポンシブデザインとダークテーマのサポートが特徴です。

開けるプレビュー

                <div class="fixed inset-0 z-50 flex items-end justify-center p-4 space-x-4 sm:items-start">
  <div class="w-full max-w-sm">
    <div class="bg-gray-800 dark:bg-gray-900 rounded-lg drop-shadow-lg p-4">
      <div class="flex items-center space-x-2">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full">
        <div class="flex-1">
          <h2 class="text-white text-lg font-semibold">New Message</h2>
          <p class="text-gray-300">You have a new message from a seller.</p>
        </div>
        <button class="text-gray-400 hover:text-gray-200">
          <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="M6 18L18 6M6 6l12 12" /></svg>
        </button>
      </div>
      <img src="https://picsum.photos/200/100" alt="Product Image" class="rounded-md mt-2" />
      <div class="mt-2">
        <span class="inline-block px-2 py-1 text-xs font-semibold text-gray-700 bg-gray-300 rounded-full">E-commerce</span>
        <span class="inline-block px-2 py-1 text-xs font-semibold text-gray-700 bg-gray-300 rounded-full float-right">5 min ago</span>
      </div>
    </div>
  </div>
  <div class="w-full max-w-sm">
    <div class="bg-gray-800 dark:bg-gray-900 rounded-lg drop-shadow-lg p-4">
      <div class="flex items-center space-x-2">
        <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full">
        <div class="flex-1">
          <h2 class="text-white text-lg font-semibold">Order Shipped</h2>
          <p class="text-gray-300">Your order #12345 has been shipped.</p>
        </div>
        <button class="text-gray-400 hover:text-gray-200">
          <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="M6 18L18 6M6 6l12 12" /></svg>
        </button>
      </div>
      <img src="https://picsum.photos/200/100?random=1" alt="Product Image" class="rounded-md mt-2" />
      <div class="mt-2">
        <span class="inline-block px-2 py-1 text-xs font-semibold text-gray-700 bg-gray-300 rounded-full">E-commerce</span>
        <span class="inline-block px-2 py-1 text-xs font-semibold text-gray-700 bg-gray-300 rounded-full float-right">10 min ago</span>
      </div>
    </div>
  </div>
</div>

ポートフォリオ用のマテリアルデザインスタイル、パステルカラースキーム、および複雑な複雑さのレベルを備えたアラートメッセージコンポーネント。ダークテーマをサポートするレスポンシブデザイン。JavaScriptコードは必要なく、Tailwindクラスを含むHTMLのみが必要です。ダークモードでは、スタイリングにTailwindのdark:プレフィックスを使用します。画像にはpicsum.photosを使用し、アバターには randomuser.me を使用します。

開けるプレビュー

                <div class="container mx-auto p-4">
  <!-- Success Alert -->
  <div class="flex items-center bg-green-200 dark:bg-green-700 text-green-800 dark:text-green-200 px-4 py-3 rounded shadow-md mb-4" role="alert">
    <svg class="fill-current w-4 h-4 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M12.432 0c1.34 0 2.01.912 2.01 1.957 0 1.305-1.164 2.512-2.66 2.512-1.27 0-2.01-.733-2.01-1.831 0-1.008 1.102-1.942 2.01-1.942zm-.432 9.024c0 1.32.826 2.12 1.905 2.12 1.04 0 1.9-.851 1.9-2.12v-.97c0-1.6.792-2.012 1.936-2.012 1.04 0 1.9.851 1.9 2.12v.97c0 1.32-.826 2.12-1.905 2.12-1.04 0-1.9-.851-1.9-2.12v-.97c0-1.6-.792-2.012-1.936-2.012-1.04 0-1.9.851-1.9 2.12v.97z"/></svg>
    <p class="text-sm">Success! Your action was completed.</p>
  </div>

  <!-- Info Alert -->
  <div class="flex items-center bg-blue-200 dark:bg-blue-700 text-blue-800 dark:text-blue-200 px-4 py-3 rounded shadow-md mb-4" role="alert">
    <svg class="fill-current w-4 h-4 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M12.432 0c1.34 0 2.01.912 2.01 1.957 0 1.305-1.164 2.512-2.66 2.512-1.27 0-2.01-.733-2.01-1.831 0-1.008 1.102-1.942 2.01-1.942zm-.432 9.024c0 1.32.826 2.12 1.905 2.12 1.04 0 1.9-.851 1.9-2.12v-.97c0-1.6.792-2.012 1.936-2.012 1.04 0 1.9.851 1.9 2.12v.97c0 1.32-.826 2.12-1.905 2.12-1.04 0-1.9-.851-1.9-2.12v-.97c0-1.6-.792-2.012-1.936-2.012-1.04 0-1.9.851-1.9 2.12v.97z"/></svg>
    <p class="text-sm">Information: This is an important message.</p>
  </div>

  <!-- Warning Alert -->
  <div class="flex items-center bg-yellow-200 dark:bg-yellow-700 text-yellow-800 dark:text-yellow-200 px-4 py-3 rounded shadow-md mb-4" role="alert">
    <svg class="fill-current w-4 h-4 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M2.93 17.07A10 10 0 1 1 17.07 2.93A10 10 0 0 1 2.93 17.07zm12.73-1.41A8 8 0 1 0 4.34 4.34a8 8 0 0 0 11.32 11.32zM9 11V9h2v6H9v-4zm0-6h2v2H9V5z"/></svg>
    <p class="text-sm">Warning: Something needs your attention.</p>
  </div>

  <!-- Danger Alert -->
  <div class="flex items-center bg-red-200 dark:bg-red-700 text-red-800 dark:text-red-200 px-4 py-3 rounded shadow-md" role="alert">
    <svg class="fill-current w-4 h-4 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16zM8.28 7.22a.75.75 0 0 0-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 1 0 1.06 1.06L10 11.06l1.72 1.72a.75.75 0 1 0 1.06-1.06L11.06 10l1.72-1.72a.75.75 0 0 0-1.06-1.06L10 8.94z"/></svg>
    <p class="text-sm">Error: Something went wrong.</p>
  </div>
</div>

アクティビティフィードコンポーネント

レトロ/ビンテージ80年代/90年代の美学、単色の配色、ブログ/コンテンツの消費のための適度な複雑さを備えたアクティビティフィードコンポーネント。Tailwind CSSを使用したダークモードサポートのレスポンシブデザイン。画像はpicsum.photosから、アバターは randomuser.me から。

開けるプレビュー

                <div class="container mx-auto px-4 py-8 bg-gray-200 dark:bg-gray-800">
  <h2 class="text-2xl font-bold mb-6 text-gray-800 dark:text-gray-200">Activity Feed</h2>

  <!-- Activity Item -->
  <div class="bg-white dark:bg-gray-700 p-6 rounded-lg shadow-md mb-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="font-bold text-gray-800 dark:text-gray-200">John Doe</p>
        <p class="text-sm text-gray-600 dark:text-gray-400">posted a new article</p>
      </div>
    </div>
    <h3 class="text-xl font-semibold mb-2 text-gray-800 dark:text-gray-200">The Future of Web Development</h3>
    <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-between items-center text-sm text-gray-600 dark:text-gray-400">
      <span>2 hours ago</span>
      <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Read more</a>
    </div>
  </div>

  <!-- Activity Item -->
  <div class="bg-white dark:bg-gray-700 p-6 rounded-lg shadow-md mb-6">
    <div class="flex items-center mb-4">
      <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-4">
      <div>
        <p class="font-bold text-gray-800 dark:text-gray-200">Jane Smith</p>
        <p class="text-sm text-gray-600 dark:text-gray-400">commented on a post</p>
      </div>
    </div>
    <p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4">Great insightful article, John! I learned a lot.</p>
    <div class="flex justify-between items-center text-sm text-gray-600 dark:text-gray-400">
      <span>4 hours ago</span>
      <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">View post</a>
    </div>
  </div>

  <!-- Activity Item -->
  <div class="bg-white dark:bg-gray-700 p-6 rounded-lg shadow-md">
    <div class="flex items-center mb-4">
      <img src="https://randomuser.me/api/portraits/men/50.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-4">
      <div>
        <p class="font-bold text-gray-800 dark:text-gray-200">Peter Jones</p>
        <p class="text-sm text-gray-600 dark:text-gray-400">liked an article</p>
      </div>
    </div>
    <h3 class="text-xl font-semibold mb-2 text-gray-800 dark:text-gray-200">10 Tips for Better Productivity</h3>
    <div class="flex justify-between items-center text-sm text-gray-600 dark:text-gray-400">
      <span>6 hours ago</span>
      <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">View article</a>
    </div>
  </div>
</div>

ファイルビューアコンポーネント

画像とファイルの詳細を表示するeコマース用のニューモーフィックスタイルのファイルビューア。ダークテーマのサポートにより、ソフト UI エクスペリエンスを提供します。

開けるプレビュー

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-200 dark:bg-gray-800 p-6">
    <div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg p-5 w-full max-w-md text-center">
        <div class="mb-4 rounded-lg overflow-hidden bg-gray-100 dark:bg-gray-700 shadow-inner">
            <img class="object-cover w-full h-32" src="https://picsum.photos/400/200" alt="File Preview">
        </div>
        <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">File Name.jpg</h2>
        <p class="text-gray-600 dark:text-gray-400">Size: 2.5 MB</p>
        <p class="text-gray-600 dark:text-gray-400">Uploaded by: <img class="inline-block w-6 h-6 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar"> John Doe</p>
        <div class="mt-4 text-center">
            <button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded shadow-md focus:outline-none focus:shadow-outline">Download</button>
        </div>
    </div>
</div>

シンプルなブルータリズムチャットウィンドウ

ブルータリストのシンプルなグレースケールチャットウィンドウコンポーネントで、ダークモードとレスポンシブデザインでブログコンテンツを消費

開けるプレビュー

                <div class="flex flex-col h-screen bg-white dark:bg-black border border-black dark:border-white">
  <!-- Chat Header -->
  <div class="flex justify-between items-center p-4 bg-gray-200 dark:bg-gray-800 border-b border-black dark:border-white">
    <div class="flex items-center">
      <img class="w-8 h-8 rounded-full mr-2 border border-black dark:border-white" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
      <h2 class="text-lg font-bold text-black dark:text-white">Simple Chat</h2>
    </div>
    <button class="text-black dark:text-white font-bold">X</button>
  </div>

  <!-- Chat Body -->
  <div class="flex-1 overflow-y-auto p-4">
    <!-- Incoming Message -->
    <div class="flex mb-4">
      <div class="bg-gray-300 dark:bg-gray-700 p-3 rounded-lg max-w-xs border border-black dark:border-white">
        <p class="text-sm text-black dark:text-white">Hey, this is a simple message.</p>
      </div>
    </div>

    <!-- Outgoing Message -->
    <div class="flex justify-end mb-4">
      <div class="bg-black dark:bg-white text-white dark:text-black p-3 rounded-lg max-w-xs border border-black dark:border-white">
        <p class="text-sm">This is a reply message.</p>
      </div>
    </div>

    <!-- Incoming Message -->
    <div class="flex mb-4">
      <div class="bg-gray-300 dark:bg-gray-700 p-3 rounded-lg max-w-xs border border-black dark:border-white">
        <p class="text-sm text-black dark:text-white">Another simple incoming message to show the scroll.</p>
      </div>
    </div>

      <!-- Outgoing Message -->
    <div class="flex justify-end mb-4">
      <div class="bg-black dark:bg-white text-white dark:text-black p-3 rounded-lg max-w-xs border border-black dark:border-white">
        <p class="text-sm max-w-xs">And a longer outgoing message to test wrapping and responsiveness. It should wrap when the screen is smaller.</p>
      </div>
    </div>

  </div>

  <!-- Chat Footer -->
  <div class="flex p-4 bg-gray-200 dark:bg-gray-800 border-t border-black dark:border-white">
    <input type="text" placeholder="Type a message..." class="flex-1 p-2 rounded-lg border border-black dark:border-white bg-white dark:bg-black text-black dark:text-white placeholder-gray-500 dark:placeholder-gray-400">
    <button class="ml-2 px-4 py-2 bg-black dark:bg-white text-white dark:text-black font-bold rounded-lg border border-black dark:border-white">Send</button>
  </div>
</div>

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

GlassmorphismでデザインされたレスポンシブなProduct Galleryコンポーネントで、ぼかし効果と補色スキームを備えたすりガラスのような半透明の要素が特徴です。これには、ダークモードをサポートするeコマースに適した複数のインタラクティブ要素が含まれています。

開けるプレビュー

                <div class="bg-gray-800 dark:bg-gray-900 min-h-screen p-6 flex flex-col items-center justify-center">
    <h1 class="text-2xl font-bold text-white mb-6">Product Gallery</h1>
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
        <!-- Product Card -->
        <div class="bg-white dark:bg-gray-800 backdrop-blur-md border border-gray-300 dark:border-gray-700 rounded-lg shadow-lg p-4">
            <img src="https://picsum.photos/300/200" alt="Product" class="rounded-lg">
            <h2 class="text-lg font-semibold mt-4 dark:text-white">Product Name 1</h2>
            <p class="text-gray-600 dark:text-gray-300">$29.99</p>
            <button class="mt-2 bg-blue-500 dark:bg-blue-700 text-white font-semibold py-2 px-4 rounded hover:bg-blue-600 dark:hover:bg-blue-800 transition duration-200">Add to Cart</button>
        </div>
        <!-- Product Card -->
        <div class="bg-white dark:bg-gray-800 backdrop-blur-md border border-gray-300 dark:border-gray-700 rounded-lg shadow-lg p-4">
            <img src="https://picsum.photos/300/201" alt="Product" class="rounded-lg">
            <h2 class="text-lg font-semibold mt-4 dark:text-white">Product Name 2</h2>
            <p class="text-gray-600 dark:text-gray-300">$39.99</p>
            <button class="mt-2 bg-blue-500 dark:bg-blue-700 text-white font-semibold py-2 px-4 rounded hover:bg-blue-600 dark:hover:bg-blue-800 transition duration-200">Add to Cart</button>
        </div>
        <!-- Product Card -->
        <div class="bg-white dark:bg-gray-800 backdrop-blur-md border border-gray-300 dark:border-gray-700 rounded-lg shadow-lg p-4">
            <img src="https://picsum.photos/300/202" alt="Product" class="rounded-lg">
            <h2 class="text-lg font-semibold mt-4 dark:text-white">Product Name 3</h2>
            <p class="text-gray-600 dark:text-gray-300">$49.99</p>
            <button class="mt-2 bg-blue-500 dark:bg-blue-700 text-white font-semibold py-2 px-4 rounded hover:bg-blue-600 dark:hover:bg-blue-800 transition duration-200">Add to Cart</button>
        </div>
        <!-- Product Card -->
        <div class="bg-white dark:bg-gray-800 backdrop-blur-md border border-gray-300 dark:border-gray-700 rounded-lg shadow-lg p-4">
            <img src="https://picsum.photos/300/203" alt="Product" class="rounded-lg">
            <h2 class="text-lg font-semibold mt-4 dark:text-white">Product Name 4</h2>
            <p class="text-gray-600 dark:text-gray-300">$59.99</p>
            <button class="mt-2 bg-blue-500 dark:bg-blue-700 text-white font-semibold py-2 px-4 rounded hover:bg-blue-600 dark:hover:bg-blue-800 transition duration-200">Add to Cart</button>
        </div>
    </div>
    <div class="mt-10 flex space-x-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-white dark:border-gray-800">
        <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-white dark:border-gray-800">
    </div>
</div>

アクティビティフィードコンポーネント

作品や製品を展示するためのレトロ/ビンテージスタイルのアクティビティフィードコンポーネント。このデザインは、ダークテーマをサポートする類似の配色を特徴としています。このコンポーネントはインタラクティブで応答性が高く、ポートフォリオでの使用に適しています。

開けるプレビュー

                <div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-lg max-w-lg mx-auto">
    <h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4">Activity Feed</h2>
    <div class="space-y-4">
        <div class="bg-white dark:bg-gray-700 rounded-lg p-4 flex items-start shadow">
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-4">
            <div class="flex-1">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">John Doe</h3>
                <p class="text-gray-600 dark:text-gray-300">Published a new project: <a href="#" class="text-blue-500 dark:text-blue-300 underline">Retro Aesthetic App</a>.</p>
                <span class="text-sm text-gray-500 dark:text-gray-400">2 hours ago</span>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-700 rounded-lg p-4 flex items-start shadow">
            <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-4">
            <div class="flex-1">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Jane Smith</h3>
                <p class="text-gray-600 dark:text-gray-300">Shared a new blog post: <a href="#" class="text-blue-500 dark:text-blue-300 underline">Top 10 Vintage Designs</a>.</p>
                <span class="text-sm text-gray-500 dark:text-gray-400">3 hours ago</span>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-700 rounded-lg p-4 flex items-start shadow">
            <img src="https://randomuser.me/api/portraits/men/55.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-4">
            <div class="flex-1">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Mark Johnson</h3>
                <p class="text-gray-600 dark:text-gray-300">Created a new collection: <a href="#" class="text-blue-500 dark:text-blue-300 underline">90s Nostalgia Gallery</a>.</p>
                <span class="text-sm text-gray-500 dark:text-gray-400">5 hours ago</span>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-700 rounded-lg p-4 flex items-start shadow">
            <img src="https://randomuser.me/api/portraits/women/34.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-4">
            <div class="flex-1">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Emily Davis</h3>
                <p class="text-gray-600 dark:text-gray-300">Updated her portfolio: <a href="#" class="text-blue-500 dark:text-blue-300 underline">My Retro Journey</a>.</p>
                <span class="text-sm text-gray-500 dark:text-gray-400">8 hours ago</span>
            </div>
        </div>
    </div>
</div>

Like/Reaction Buttons コンポーネント

Neumorphism スタイルの Like/Reaction ボタンコンポーネントで、複雑なデザインとダークモードをサポートするブログ用です。

開けるプレビュー

                <div class="flex flex-col items-center justify-center p-6 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">React to this Post</h2>
    <div class="grid grid-cols-3 gap-4">
        <button class="flex flex-col items-center justify-center p-4 bg-white dark:bg-gray-700 rounded-lg shadow-md hover:shadow-lg transition-all duration-300">
            <img src="https://picsum.photos/50" alt="Like" class="w-12 h-12 mb-2 rounded-full">
            <span class="text-gray-800 dark:text-gray-200">Like</span>
        </button>
        <button class="flex flex-col items-center justify-center p-4 bg-white dark:bg-gray-700 rounded-lg shadow-md hover:shadow-lg transition-all duration-300">
            <img src="https://picsum.photos/50?random=1" alt="Love" class="w-12 h-12 mb-2 rounded-full">
            <span class="text-gray-800 dark:text-gray-200">Love</span>
        </button>
        <button class="flex flex-col items-center justify-center p-4 bg-white dark:bg-gray-700 rounded-lg shadow-md hover:shadow-lg transition-all duration-300">
            <img src="https://picsum.photos/50?random=2" alt="Haha" class="w-12 h-12 mb-2 rounded-full">
            <span class="text-gray-800 dark:text-gray-200">Haha</span>
        </button>
        <button class="flex flex-col items-center justify-center p-4 bg-white dark:bg-gray-700 rounded-lg shadow-md hover:shadow-lg transition-all duration-300">
            <img src="https://picsum.photos/50?random=3" alt="Wow" class="w-12 h-12 mb-2 rounded-full">
            <span class="text-gray-800 dark:text-gray-200">Wow</span>
        </button>
        <button class="flex flex-col items-center justify-center p-4 bg-white dark:bg-gray-700 rounded-lg shadow-md hover:shadow-lg transition-all duration-300">
            <img src="https://picsum.photos/50?random=4" alt="Sad" class="w-12 h-12 mb-2 rounded-full">
            <span class="text-gray-800 dark:text-gray-200">Sad</span>
        </button>
        <button class="flex flex-col items-center justify-center p-4 bg-white dark:bg-gray-700 rounded-lg shadow-md hover:shadow-lg transition-all duration-300">
            <img src="https://picsum.photos/50?random=5" alt="Angry" class="w-12 h-12 mb-2 rounded-full">
            <span class="text-gray-800 dark:text-gray-200">Angry</span>
        </button>
    </div>
</div>

マテリアルデザインソーシャルログインコンポーネント

マテリアルデザインソーシャルログインコンポーネント、補色配色、適度な複雑さ、ブログ/コンテンツ用、Tailwind CSSを使用したダークモードサポートによるレスポンシブ。

開けるプレビュー

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center">
  <div class="bg-white dark:bg-gray-800 p-8 rounded-lg shadow-md w-96">
    <h2 class="text-2xl font-semibold text-center text-gray-800 dark:text-white mb-6">Login</h2>
    <div class="flex flex-col space-y-4">
      <button class="flex items-center justify-center px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
        <img class="h-5 w-5 mr-2" src="https://fonts.gstatic.com/s/i/productlogos/google/v6/24px.svg" alt="Google logo">
        Sign in with Google
      </button>
      <button class="flex items-center justify-center px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
        <svg class="h-5 w-5 mr-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M12 0C5.373 0 0 5.373 0 12c0 5.083 3.791 9.362 8.75 10l-.002-.002v-.001l.002.001V17h-3v-5h3V9c0-3.306 1.976-5.164 4.936-5.164C15.232 3.836 16.5 4 16.5 4v3h-2.473c-1.742 0-2.527.873-2.527 2.075V12h4.999l-.649 5h-4.35v5.999c5-.638 8.75-4.918 8.75-10C24 5.373 18.627 0 12 0z" />
        </svg>
        Sign in with Facebook
      </button>
    </div>
    <div class="mt-6 text-center text-gray-600 dark:text-gray-400 text-sm">
      Don't have an account? <a href="#" class="text-blue-500 hover:underline">Sign up</a>
    </div>
  </div>
</div>

1 ... 154 155 156 157 158 ... 315

検索コンポーネント

カテゴリ

すべてのコンポーネント