検索コンポーネント

すべてのコンポーネント

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

イメージライトボックスコンポーネント

マテリアルデザインスタイルでデザインされたレスポンシブ画像ライトボックスコンポーネントで、トライアドカラースキームとダークモードのサポートが特徴です。作品や製品を展示するポートフォリオに適しています。

                <div class="flex flex-col items-center justify-center min-h-screen p-4 bg-gray-100 dark:bg-gray-900">
    <h2 class="mb-4 text-2xl font-semibold text-gray-800 dark:text-gray-200">Portfolio Showcase</h2>
    <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
        <div class="relative group">
            <img src="https://picsum.photos/300/200?random=1" alt="Portfolio Image 1" class="w-full h-auto rounded-lg shadow-md cursor-pointer transition-transform transform duration-200 hover:scale-105">
            <div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-0 group-hover:bg-opacity-50 transition-opacity duration-200">
                <button class="px-4 py-2 text-white bg-blue-500 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity">View</button>
            </div>
        </div>
        <div class="relative group">
            <img src="https://picsum.photos/300/200?random=2" alt="Portfolio Image 2" class="w-full h-auto rounded-lg shadow-md cursor-pointer transition-transform transform duration-200 hover:scale-105">
            <div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-0 group-hover:bg-opacity-50 transition-opacity duration-200">
                <button class="px-4 py-2 text-white bg-blue-500 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity">View</button>
            </div>
        </div>
        <div class="relative group">
            <img src="https://picsum.photos/300/200?random=3" alt="Portfolio Image 3" class="w-full h-auto rounded-lg shadow-md cursor-pointer transition-transform transform duration-200 hover:scale-105">
            <div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-0 group-hover:bg-opacity-50 transition-opacity duration-200">
                <button class="px-4 py-2 text-white bg-blue-500 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity">View</button>
            </div>
        </div>
        <div class="relative group">
            <img src="https://picsum.photos/300/200?random=4" alt="Portfolio Image 4" class="w-full h-auto rounded-lg shadow-md cursor-pointer transition-transform transform duration-200 hover:scale-105">
            <div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-0 group-hover:bg-opacity-50 transition-opacity duration-200">
                <button class="px-4 py-2 text-white bg-blue-500 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity">View</button>
            </div>
        </div>
        <div class="relative group">
            <img src="https://picsum.photos/300/200?random=5" alt="Portfolio Image 5" class="w-full h-auto rounded-lg shadow-md cursor-pointer transition-transform transform duration-200 hover:scale-105">
            <div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-0 group-hover:bg-opacity-50 transition-opacity duration-200">
                <button class="px-4 py-2 text-white bg-blue-500 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity">View</button>
            </div>
        </div>
        <div class="relative group">
            <img src="https://picsum.photos/300/200?random=6" alt="Portfolio Image 6" class="w-full h-auto rounded-lg shadow-md cursor-pointer transition-transform transform duration-200 hover:scale-105">
            <div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-0 group-hover:bg-opacity-50 transition-opacity duration-200">
                <button class="px-4 py-2 text-white bg-blue-500 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity">View</button>
            </div>
        </div>
    </div>
</div>

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

Tailwind CSS を使用したダークモードをサポートするレスポンシブデータテーブルコンポーネント

開けるプレビュー

                <div class="container mx-auto p-4 dark:bg-gray-900">

  <div class="data-table bg-white shadow-lg rounded-lg overflow-hidden dark:bg-gray-800">
    <table class="min-w-full leading-normal">
      <thead>
        <tr class="bg-gradient-to-br from-purple-500 to-pink-500 text-white">
          <th
            class="px-5 py-3 border-b-2 border-gray-200 text-left text-xs font-semibold uppercase tracking-wider dark:border-gray-700"
          >
            Name
          </th>
          <th
            class="px-5 py-3 border-b-2 border-gray-200 text-left text-xs font-semibold uppercase tracking-wider dark:border-gray-700"
          >
            Role
          </th>
          <th
            class="px-5 py-3 border-b-2 border-gray-200 text-left text-xs font-semibold uppercase tracking-wider dark:border-gray-700"
          >
            Status
          </th>
          <th
            class="px-5 py-3 border-b-2 border-gray-200 text-left text-xs font-semibold uppercase tracking-wider dark:border-gray-700"
          >
            Created At
          </th>
        </tr>
      </thead>
      <tbody>
        <tr class="hover:bg-gray-100 dark:hover:bg-gray-700">
          <td
            class="px-5 py-5 border-b border-gray-200 text-sm dark:border-gray-700 dark:text-white"
          >
            <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/1.jpg"
                  alt=""
                />
              </div>
              <div class="ml-3">
                <p class="text-gray-900 whitespace-no-wrap dark:text-white">
                  John Doe
                </p>
              </div>
            </div>
          </td>
          <td
            class="px-5 py-5 border-b border-gray-200 text-sm dark:border-gray-700 dark:text-white"
          >
            <p class="text-gray-900 whitespace-no-wrap dark:text-white">Admin</p>
          </td>
          <td
            class="px-5 py-5 border-b border-gray-200 text-sm dark:border-gray-700 dark:text-white"
          >
            <span
              class="relative inline-block px-3 py-1 font-semibold text-green-900 leading-tight"
            >
              <span
                aria-hidden
                class="absolute inset-0 bg-green-200 opacity-50 rounded-full"
              ></span>
              <span class="relative">Active</span>
            </span>
          </td>
          <td
            class="px-5 py-5 border-b border-gray-200 text-sm dark:border-gray-700 dark:text-white"
          >
            <p class="text-gray-900 whitespace-no-wrap dark:text-white">
              2023-10-27
            </p>
          </td>
        </tr>
        <tr class="hover:bg-gray-100 dark:hover:bg-gray-700">
          <td
            class="px-5 py-5 border-b border-gray-200 text-sm dark:border-gray-700 dark:text-white"
          >
            <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/2.jpg"
                  alt=""
                />
              </div>
              <div class="ml-3">
                <p class="text-gray-900 whitespace-no-wrap dark:text-white">
                  Jane Smith
                </p>
              </div>
            </div>
          </td>
          <td
            class="px-5 py-5 border-b border-gray-200 text-sm dark:border-gray-700 dark:text-white"
          >
            <p class="text-gray-900 whitespace-no-wrap dark:text-white">
              Editor
            </p>
          </td>
          <td
            class="px-5 py-5 border-b border-gray-200 text-sm dark:border-gray-700 dark:text-white"
          >
            <span
              class="relative inline-block px-3 py-1 font-semibold text-orange-900 leading-tight"
            >
              <span
                aria-hidden
                class="absolute inset-0 bg-orange-200 opacity-50 rounded-full"
              ></span>
              <span class="relative">Pending</span>
            </span>
          </td>
          <td
            class="px-5 py-5 border-b border-gray-200 text-sm dark:border-gray-700 dark:text-white"
          >
            <p class="text-gray-900 whitespace-no-wrap dark:text-white">
              2023-10-27
            </p>
          </td>
        </tr>
        <tr class="hover:bg-gray-100 dark:hover:bg-gray-700">
          <td
            class="px-5 py-5 border-b border-gray-200 text-sm dark:border-gray-700 dark:text-white"
          >
            <div class="flex items-center">
              <div class="flex-shrink-0 w-10 h-10">
                <img
                  class="w-full h-10 h-10 rounded-full"
                  src="https://randomuser.me/api/portraits/men/3.jpg"
                  alt=""
                />
              </div>
              <div class="ml-3">
                <p class="text-gray-900 whitespace-no-wrap dark:text-white">
                  Peter Jones
                </p>
              </div>
            </div>
          </td>
          <td
            class="px-5 py-5 border-b border-gray-200 text-sm dark:border-gray-700 dark:text-white"
          >
            <p class="text-gray-900 whitespace-no-wrap dark:text-white">
              Viewer
            </p>
          </td>
          <td
            class="px-5 py-5 border-b border-gray-200 text-sm dark:border-gray-700 dark:text-white"
          >
            <span
              class="relative inline-block px-3 py-1 font-semibold text-red-900 leading-tight"
            >
              <span
                aria-hidden
                class="absolute inset-0 bg-red-200 opacity-50 rounded-full"
              ></span>
              <span class="relative">Inactive</span>
            </span>
          </td>
          <td
            class="px-5 py-5 border-b border-gray-200 text-sm dark:border-gray-700 dark:text-white"
          >
            <p class="text-gray-900 whitespace-no-wrap dark:text-white">
              2023-10-27
            </p>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

OAuth ボタンコンポーネント

ダークモード用に設計されたレスポンシブ OAuth ボタンコンポーネントで、類似のカラースキームで、ソーシャルメディア用の複数のインタラクティブ要素を備えています。

開けるプレビュー

                <div class="bg-gray-800 p-6 rounded-lg shadow-lg max-w-md mx-auto text-white">
    <h2 class="text-2xl font-bold mb-4">Connect with Social Media</h2>
    <div class="flex flex-col space-y-4">
        <a href="#" class="flex items-center justify-between bg-gradient-to-r from-indigo-600 to-purple-600 rounded-lg p-4 text-white hover:shadow-lg transition-shadow">
            <img src="https://randomuser.me/api/portraits/men/10.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2" />
            <span>Continue with Google</span>
            <i class="fas fa-arrow-right"></i>
        </a>

        <a href="#" class="flex items-center justify-between bg-gradient-to-r from-blue-500 to-purple-500 rounded-lg p-4 text-white hover:shadow-lg transition-shadow">
            <img src="https://randomuser.me/api/portraits/women/10.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2" />
            <span>Continue with Facebook</span>
            <i class="fas fa-arrow-right"></i>
        </a>

        <a href="#" class="flex items-center justify-between bg-gradient-to-r from-green-500 to-blue-500 rounded-lg p-4 text-white hover:shadow-lg transition-shadow">
            <img src="https://randomuser.me/api/portraits/men/20.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2" />
            <span>Continue with Twitter</span>
            <i class="fas fa-arrow-right"></i>
        </a>

        <a href="#" class="flex items-center justify-between bg-gradient-to-r from-red-500 to-orange-500 rounded-lg p-4 text-white hover:shadow-lg transition-shadow">
            <img src="https://randomuser.me/api/portraits/women/20.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2" />
            <span>Continue with LinkedIn</span>
            <i class="fas fa-arrow-right"></i>
        </a>
    </div>
    <p class="text-center mt-4">Or</p>
    <button class="bg-gray-700 hover:bg-gray-600 rounded-lg w-full p-2 mt-2 text-white">Sign Up with Email</button>
</div>

Brutalist Breadcrumb ナビゲーションコンポーネント

鮮やかな配色と複雑なレイアウトを備えたポートフォリオ用のBrutalist Breadcrumbナビゲーションコンポーネントで、レスポンシブデザインとダークモードのサポートが特徴です。

開けるプレビュー

                <nav class="text-sm font-mono">
  <ol class="list-none p-0 inline-flex">
    <li class="flex items-center">
      <a href="#" class="text-blue-500 dark:text-teal- गलती this looks like a typo, will fix to something like: dark:text-teal-300 hover:underline">Home</a>
      <svg class="fill-current w-3 h-3 mx-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 67.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z"/></svg>
    </li>
    <li class="flex items-center">
      <a href="#" class="text-blue-500 dark:text-teal-300 hover:underline">Projects</a>
      <svg class="fill-current w-3 h-3 mx-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 67.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z"/></svg>
    </li>
    <li>
      <span class="text-purple-700 dark:text-pink-400 font-bold">Current Project</span>
    </li>
  </ol>
</nav>

スキューモーフィックメディア埋め込みコンポーネント

スキューモーフィズムデザイン、類似の配色、ビジネスWebサイト向けの適度な複雑さを備えたレスポンシブメディア埋め込みコンポーネント。Tailwind CSS を使用したダークモードのサポートが含まれています。

開けるプレビュー

                <div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-lg shadow-xl">
  <div class="relative pb-9/16 mb-4">
    <iframe class="absolute inset-0 w-full h-full rounded-md shadow-inner" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  </div>
  <div class="flex items-center mb-4">
    <img class="w-12 h-12 rounded-full mr-4 ring-2 ring-gray-400 dark:ring-gray-600" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
    <div>
      <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Skeuomorphic Media Title</h3>
      <p class="text-gray-600 dark:text-gray-400 text-sm">Channel Name</p>
    </div>
  </div>
  <p class="text-gray-700 dark:text-gray-300">
    This is a description of the media content. It provides a brief overview 
    and context for the embedded video or audio. The design features subtle 
    shadows and gradients to mimic a tangible, real-world object.
  </p>
</div>

Glassmorphism評価システム

ソーシャルメディアプラットフォーム向けに設計された、補色を備えたGlassmorphismスタイルの評価システム。レスポンシブレイアウトとTailwind CSSを使用したダークモードのサポートが含まれています。

開けるプレビュー

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
  <div class="bg-white dark:bg-gray-800 backdrop-filter backdrop-blur-lg bg-opacity-20 dark:bg-opacity-20 rounded-xl p-6 shadow-lg text-center w-full max-w-sm border border-gray-200 dark:border-gray-700">
    <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Rate this content</h3>
    <div class="flex justify-center space-x-2">
      <svg class="w-8 h-8 text-yellow-400 dark:text-yellow-500 cursor-pointer" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.546 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.791.565-1.842-.197-1.546-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
      <svg class="w-8 h-8 text-yellow-400 dark:text-yellow-500 cursor-pointer" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.546 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.791.565-1.842-.197-1.546-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
      <svg class="w-8 h-8 text-yellow-400 dark:text-yellow-500 cursor-pointer" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.546 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.791.565-1.842-.197-1.546-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
      <svg class="w-8 h-8 text-gray-300 dark:text-gray-600 cursor-pointer" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.546 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.791.565-1.842-.197-1.546-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
      <svg class="w-8 h-8 text-gray-300 dark:text-gray-600 cursor-pointer" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.546 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.791.565-1.842-.197-1.546-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
    </div>
  </div>
</div>

レトロなCAPTCHAコンポーネント

レトロ/ビンテージの美学とパステルカラーでスタイル設定されたCAPTCHAコンポーネントで、ダークモードをサポートするデータ視覚化ダッシュボード用に設計されています。

開けるプレビュー

                <div class="flex flex-col items-center justify-center p-8 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-lg">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-4">Please Verify You're Not a Robot</h2>
    <p class="text-lg text-gray-600 dark:text-gray-200 mb-6">Select the images containing:</p>
    <div class="grid grid-cols-2 gap-4">
        <img src="https://picsum.photos/200/200?random=1" alt="CAPTCHA Option 1" class="cursor-pointer hover:scale-105 transition-transform duration-200 rounded-lg shadow-md"> 
        <img src="https://picsum.photos/200/200?random=2" alt="CAPTCHA Option 2" class="cursor-pointer hover:scale-105 transition-transform duration-200 rounded-lg shadow-md"> 
        <img src="https://picsum.photos/200/200?random=3" alt="CAPTCHA Option 3" class="cursor-pointer hover:scale-105 transition-transform duration-200 rounded-lg shadow-md"> 
        <img src="https://picsum.photos/200/200?random=4" alt="CAPTCHA Option 4" class="cursor-pointer hover:scale-105 transition-transform duration-200 rounded-lg shadow-md"> 
    </div>
    <div class="flex flex-col items-center mt-6">
        <label class="flex items-center mb-4">
            <input type="checkbox" class="text-purple-500 border-gray-300 dark:border-gray-600 rounded mr-2" />
            <span class="text-gray-800 dark:text-gray-100">I confirm I'm not a robot</span>
        </label>
        <button class="bg-blue-500 hover:bg-blue-400 text-white font-bold py-2 px-4 rounded shadow-md transition duration-200">Verify</button>
    </div>
    <div class="mt-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-600">
    </div>
    <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">User Avatar</p>
</div>

ブルータリズムコメントセクション

ポートフォリオ用のブルータリストスタイルのコメントセクションコンポーネントで、類似の色、適度な複雑さ、応答性、ダークモードのサポートを備えています。

開けるプレビュー

                <div class="container mx-auto p-4 bg-stone-100 dark:bg-stone-900 text-stone-800 dark:text-stone-200 shadow-xl">
  <h2 class="text-2xl font-bold mb-6 border-b-4 border-yellow-500 pb-2">Comments</h2>
  <div class="space-y-6">
    <!-- Comment 1 -->
    <div class="bg-stone-200 dark:bg-stone-800 p-4 shadow-md border-2 border-yellow-600">
      <div class="flex items-center mb-4">
        <img class="w-12 h-12 rounded-full mr-4 border-2 border-yellow-500" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
        <div>
          <h4 class="font-bold text-yellow-700 dark:text-yellow-300">John Doe</h4>
          <p class="text-sm text-stone-600 dark:text-stone-400">2 days ago</p>
        </div>
      </div>
      <p class="mb-4">This is a fantastic project! Really impressed with the use of colors and typography.</p>
      <div class="flex justify-end text-sm">
        <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline mr-4">Reply</a>
        <a href="#" class="text-red-600 dark:text-red-400 hover:underline">Report</a>
      </div>
    </div>

    <!-- Comment 2 -->
    <div class="bg-stone-200 dark:bg-stone-800 p-4 shadow-md border-2 border-orange-600">
      <div class="flex items-center mb-4">
        <img class="w-12 h-12 rounded-full mr-4 border-2 border-orange-500" src="https://randomuser.me/api/portraits/women/45.jpg" alt="User Avatar">
        <div>
          <h4 class="font-bold text-orange-700 dark:text-orange-300">Jane Smith</h4>
          <p class="text-sm text-stone-600 dark:text-stone-400">1 day ago</p>
        </div>
      </div>
      <p class="mb-4">Very inspiring work! The brutalist style is really well-executed here.</p>
      <div class="flex justify-end text-sm">
        <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline mr-4">Reply</a>
        <a href="#" class="text-red-600 dark:text-red-400 hover:underline">Report</a>
      </div>
    </div>

        <!-- Add New Comment Form -->
    <div class="bg-stone-300 dark:bg-stone-700 p-6 shadow-inner border-2 border-red-600">
      <h4 class="text-lg font-bold mb-4 text-red-800 dark:text-red-200">Leave a Comment</h4>
      <form>
        <div class="mb-4">
          <label class="block text-stone-700 dark:text-stone-300 text-sm font-bold mb-2" for="name">
            Name
          </label>
          <input class="shadow appearance-none border border-red-500 dark:border-red-700 rounded w-full py-2 px-3 text-stone-700 dark:text-stone-900 leading-tight focus:outline-none focus:shadow-outline bg-yellow-100 dark:bg-yellow-900" id="name" type="text" placeholder="Your Name">
        </div>
        <div class="mb-4">
          <label class="block text-stone-700 dark:text-stone-300 text-sm font-bold mb-2" for="comment">
            Comment
          </label>
          <textarea class="shadow appearance-none border border-red-500 dark:border-red-700 rounded w-full py-2 px-3 text-stone-700 dark:text-stone-900 leading-tight focus:outline-none focus:shadow-outline bg-orange-100 dark:bg-orange-900 h-32" id="comment" placeholder="Your Comment"></textarea>
        </div>
        <div class="flex items-center justify-between">
          <button class="bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline border-2 border-black dark:border-white" type="button">
            Submit Comment
          </button>
        </div>
      </form>
    </div>

  </div>
</div>

セッションタイムアウト警告コンポーネント

魅力的なアニメーションをトリガーするセッションタイムアウトアラートコンポーネント。レスポンシブデザインが特徴で、パステルカラーの配色とダークテーマのサポートを備えたダッシュボードに適しています。これにはインタラクティブな要素が含まれており、ユーザーはセッションを延長したりログアウトしたりできます。

開けるプレビュー

                <div class="fixed inset-0 flex items-center justify-center bg-white dark:bg-gray-800 z-50 rounded-lg shadow-lg transition-all duration-300 p-5">
    <div class="bg-pastel-green rounded-md p-4 shadow-md transition-transform transform hover:scale-105">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Session Timeout Alert</h2>
        <p class="mt-2 text-gray-600 dark:text-gray-400">Your session is about to expire. Would you like to extend it?</p>
        <div class="flex justify-around mt-4">
            <button class="bg-blue-500 text-white dark:bg-blue-700 rounded-md px-4 py-2 transition-colors hover:bg-blue-600 dark:hover:bg-blue-600">Extend</button>
            <button class="bg-red-500 text-white dark:bg-red-700 rounded-md px-4 py-2 transition-colors hover:bg-red-600 dark:hover:bg-red-600">Log Out</button>
        </div>
    </div>
    <div class="absolute bottom-2 right-2">
        <img src="https://picsum.photos/50/50" alt="Illustrative Image" class="rounded-full border-2 border-white dark:border-gray-800 shadow-lg" />
    </div>
</div>

レトロバッジ

補完的な配色を備えたビジネス/企業のWebサイト向けのレトロ/ビンテージバッジコンポーネント。シンプルなレイアウト、ダークテーマをサポートするレスポンシブデザイン。JavaScript はありません。

開けるプレビュー

                <div class="flex flex-wrap gap-2 p-4 bg-gray-100 dark:bg-gray-900">
  <!-- Badge 1 -->
  <span class="px-3 py-1 text-sm font-semibold text-purple-800 bg-purple-200 rounded-full dark:text-purple-200 dark:bg-purple-800">
    Vintage Vibe
  </span>

  <!-- Badge 2 -->
  <span class="px-3 py-1 text-sm font-semibold text-yellow-800 bg-yellow-200 rounded-full dark:text-yellow-200 dark:bg-yellow-800">
    Retro Style
  </span>

  <!-- Badge 3 -->
  <span class="px-3 py-1 text-sm font-semibold text-green-800 bg-green-200 rounded-full dark:text-green-200 dark:bg-green-800">
    Classic Look
  </span>
</div>

1 ... 240 241 242 243 244 ... 315

検索コンポーネント

カテゴリ

すべてのコンポーネント