検索コンポーネント

すべてのコンポーネント

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

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

現実世界の対応物を模倣するように設計されたスキューモーフィックイメージライトボックスコンポーネントで、レスポンシブエフェクトと Tailwind CSS を使用したダークテーマのサポートが特徴です。

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
    <div class="relative group w-full max-w-2xl bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden">
        <img src="https://picsum.photos/600/400" alt="Lightbox Image" class="w-full h-auto rounded-lg transition ease-in-out duration-300 transform group-hover:scale-105" />
        <div class="absolute inset-0 bg-black opacity-0 group-hover:opacity-50 transition-opacity duration-300 rounded-lg"></div>
        <div class="absolute bottom-0 left-0 right-0 p-4 text-white">
            <h2 class="font-bold text-lg">Image Title</h2>
            <p class="text-sm">Image description goes here.</p>
        </div>
    </div>

    <div class="mt-4">
        <button class="p-2 px-4 bg-blue-600 text-white rounded hover:bg-blue-500 dark:bg-blue-700 dark:hover:bg-blue-600 shadow-lg">
            <span class="flex items-center">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-6 h-6 rounded-full mr-2" />
                View User's Images
            </span>
        </button>
    </div>
</div>

パスワードリセットコンポーネント

レスポンシブデザインとTailwind CSSを使用したダークテーマのサポートを備えたミニマリストのパスワードリセットコンポーネント。

開けるプレビュー

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800">
    <div class="bg-white dark:bg-gray-900 shadow-md rounded-lg p-8 w-96">
        <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 text-center">Reset Password</h2>
        <p class="text-gray-600 dark:text-gray-400 text-center mb-6">Please enter your email address to receive a password reset link.</p>
        <form>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300 mb-2" for="email">Email</label>
                <input type="email" id="email" class="w-full p-2 border border-gray-300 dark:border-gray-600 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400" placeholder="[email protected]" required>
            </div>
            <button type="submit" class="w-full bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 rounded focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-500">Send Reset Link</button>
        </form>
        <div class="mt-4 text-center">
            <p class="text-gray-500 dark:text-gray-400">Remembered your password? <a href="#" class="text-blue-500 hover:underline">Login</a></p>
        </div>
    </div>
</div>

ブルータリズムソーシャルシェアボタン

ブルータリズムスタイル、レスポンシブエフェクト、ダークテーマのサポートを備えたソーシャルシェアボタンコンポーネント、JavaScriptは必要ありません

開けるプレビュー

                <div class="flex flex-wrap justify-center gap-4 p-4 bg-zinc-200 dark:bg-zinc-800">
  <a href="#" class="inline-flex items-center justify-center w-12 h-12 text-white bg-red-600 border-4 border-black dark:border-white shadow-[4px_4px_0_0_#000] dark:shadow-[4px_4px_0_0_#fff] transition duration-200 ease-in-out hover:bg-red-700 dark:hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-black dark:focus:ring-white focus:ring-offset-2 dark:focus:ring-offset-zinc-800">
    <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
      <path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.35-.012-.52A8.358 8.358 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.363 8.363 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.4-4.286 4.106 4.106 0 001.27 5.477A4.073 4.073 0 014 10.59v.053a4.106 4.106 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84"/>
    </svg>
  </a>
  <a href="#" class="inline-flex items-center justify-center w-12 h-12 text-white bg-blue-600 border-4 border-black dark:border-white focus:outline-none focus:ring-2 focus:ring-black dark:focus:ring-white focus:ring-offset-2 dark:focus:ring-offset-zinc-800 shadow-[4px_4px_0_0_#000] dark:shadow-[4px_4px_0_0_#fff] transition duration-200 ease-in-out hover:bg-blue-700 dark:hover:bg-blue-700">
    <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
      <path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.418 2.867 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.164-1.11-1.478-1.11-1.478-.908-.62.062-.606.062-.606 1.003-.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.681-.103-.253-.446-1.272.098-2.65 0 0 .84-.268 2.75 1.022A9.61 9.61 0 0112 6.865c.85.004 1.705.115 2.504.337 1.909-1.29 2.747-1.022 2.747-1.022.546 1.379.202 2.398.1 2.651.64.693 1.029 1.59 1.029 2.681 0 3.84-2.339 4.69-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd"/>
    </svg>
  </a>
  <a href="#" class="inline-flex items-center justify-center w-12 h-12 text-white bg-cyan-500 border-4 border-black dark:border-white focus:outline-none focus:ring-2 focus:ring-black dark:focus:ring-white focus:ring-offset-2 dark:focus:ring-offset-zinc-800 shadow-[4px_4px_0_0_#000] dark:shadow-[4px_4px_0_0_#fff] transition duration-200 ease-in-out hover:bg-cyan-600 dark:hover:bg-cyan-600">
    <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
      <path d="M22.162 5.656a8.384 8.384 0 01-2.402.658A4.196 4.196 0 0021.6 4c-.8.5-1.7.8-2.6.9a4.162 4.162 0 00-7.1 3.85A11.763 11.763 0 013.8 6.4c-.4 1-.6 2.1-.6 3.3 0 2.3 1.2 4.3 2.9 5.5a4.165 4.165 0 01-1.9-.5v.05c0 2 1.4 3.7 3.3 4.1a4.221 4.221 0 01-1.9.05c.5 1.6 2 2.8 3.7 2.9A8.368 8.368 0 0018 18.3c1.6-.9 2.9-2.6 2.9-4.5v-.5c.5-.4.9-.8 1.3-1.3z"/>
    </svg>
  </a>
</div>

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

Tailwind CSS で設計された Neumorphism スタイルのファイルビューアコンポーネント。レスポンシブデザインとダークテーマのサポートが特徴です。

開けるプレビュー

                <div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900 p-5">
    <div class="bg-white dark:bg-gray-800 shadow-2xl rounded-lg p-6 w-full max-w-lg">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-4">File Viewer</h2>
        <div class="flex items-center space-x-4 mb-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full shadow-lg">
            <div>
                <p class="text-gray-800 dark:text-gray-200 font-medium">John Doe</p>
                <p class="text-gray-600 dark:text-gray-400 text-sm">Uploaded on April 20, 2023</p>
            </div>
        </div>
        <div class="flex flex-col">
            <div class="bg-gray-200 dark:bg-gray-700 shadow-inner rounded-lg p-4 mb-4">
                <p class="text-gray-700 dark:text-gray-300">File Name: example-document.pdf</p>
                <p class="text-gray-600 dark:text-gray-400">File Size: 1.2 MB</p>
            </div>
            <div class="bg-gray-200 dark:bg-gray-700 shadow-inner rounded-lg p-4 mb-4">
                <img src="https://picsum.photos/200/100" alt="Preview" class="w-full h-auto rounded-lg shadow-md mb-2">
                <p class="text-gray-700 dark:text-gray-300">Preview of the document</p>
            </div>
            <div class="bg-gray-200 dark:bg-gray-700 shadow-inner rounded-lg p-4">
                <button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-full shadow-md focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-50">Download</button>
            </div>
        </div>
    </div>
</div>

Skeuomorphic Timeline コンポーネント

レスポンシブエフェクトとダークテーマをサポートする Skeuomorphic Timeline コンポーネントで、Tailwind CSS を使用して構築されています。JavaScriptは不要で、HTMLとCSSのみが必要です。

開けるプレビュー

                <div class="container mx-auto px-4 py-8">

  <!-- Skeuomorphic Timeline -->
  <div class="relative">
    <!-- Vertical Line (mimics a physical line) -->
    <div class="border-r-4 border-gray-300 dark:border-gray-700 absolute h-full top-0 left-1/2 transform -translate-x-1/2"></div>

    <!-- Timeline Items -->
    <div class="mb-8 flex justify-between items-center w-full right-timeline">
      <div class="order-1 w-5/12"></div>
      <div class="order-1 w-5/12 px-1 py-4 text-right">
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl px-6 py-4 border border-gray-200 dark:border-gray-700">
          <h3 class="mb-3 font-bold text-gray-800 dark:text-white text-xl">Event Title 1</h3>
          <p class="text-sm leading-snug tracking-wide text-gray-900 dark:text-gray-300 text-opacity-100">Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
        </div>
      </div>
      <!-- Timeline Dot (mimics a physical marker) -->
      <div class="order-1 bg-gray-300 dark:bg-gray-700 rounded-full w-8 h-8 absolute left-1/2 transform -translate-x-1/2 z-10"></div>
    </div>

    <div class="mb-8 flex justify-between items-center w-full left-timeline">
       <div class="order-1 w-5/12 px-1 py-4 text-left">
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl px-6 py-4 border border-gray-200 dark:border-gray-700">
          <h3 class="mb-3 font-bold text-gray-800 dark:text-white text-xl">Event Title 2</h3>
          <p class="text-sm leading-snug tracking-wide text-gray-900 dark:text-gray-300 text-opacity-100">Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
        </div>
      </div>
      <div class="order-1 w-5/12"></div>
       <!-- Timeline Dot (mimics a physical marker) -->
      <div class="order-1 bg-gray-300 dark:bg-gray-700 rounded-full w-8 h-8 absolute left-1/2 transform -translate-x-1/2 z-10"></div>
    </div>

     <div class="mb-8 flex justify-between items-center w-full right-timeline">
      <div class="order-1 w-5/12"></div>
      <div class="order-1 w-5/12 px-1 py-4 text-right">
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl px-6 py-4 border border-gray-200 dark:border-gray-700">
          <h3 class="mb-3 font-bold text-gray-800 dark:text-white text-xl">Event Title 3</h3>
          <p class="text-sm leading-snug tracking-wide text-gray-900 dark:text-gray-300 text-opacity-100">Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
        </div>
      </div>
       <!-- Timeline Dot (mimics a physical marker) -->
      <div class="order-1 bg-gray-300 dark:bg-gray-700 rounded-full w-8 h-8 absolute left-1/2 transform -translate-x-1/2 z-10"></div>
    </div>

      <div class="mb-8 flex justify-between items-center w-full left-timeline">
       <div class="order-1 w-5/12 px-1 py-4 text-left">
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl px-6 py-4 border border-gray-200 dark:border-gray-700">
          <h3 class="mb-3 font-bold text-gray-800 dark:text-white text-xl">Event Title 4</h3>
          <p class="text-sm leading-snug tracking-wide text-gray-900 dark:text-gray-300 text-opacity-100">Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
        </div>
      </div>
      <div class="order-1 w-5/12"></div>
       <!-- Timeline Dot (mimics a physical marker) -->
      <div class="order-1 bg-gray-300 dark:bg-gray-700 rounded-full w-8 h-8 absolute left-1/2 transform -translate-x-1/2 z-10"></div>
    </div>

  </div>
</div>

<style>
  /* Styles for a simple skeuomorphic look */
  .left-timeline .bg-white,
  .right-timeline .bg-white {
    box-shadow: 5px 5px 10px #bebebe, -5px -5px 10px #ffffff;
  }

   .dark .left-timeline .bg-gray-800,
  .dark .right-timeline .bg-gray-800 {
    box-shadow: 5px 5px 10px #1a1a1a, -5px -5px 10px #2e2e2e;
  }

  .left-timeline .bg-white.dark\:bg-gray-800,
  .right-timeline .bg-white.dark\:bg-gray-800 {
     border-color: #d1d5db; /* subtle light border */
  }

   .dark .left-timeline .bg-white.dark\:bg-gray-800,
  .dark .right-timeline .bg-white.dark\:bg-gray-800 {
     border-color: #4b5563; /* subtle dark border */
  }


   @media (max-width: 768px) {
      .left-timeline, .right-timeline {
        justify-content: flex-end;
      }

      .left-timeline .w-5/12,
      .right-timeline .w-5/12 {
        width: 100%;
      }

       .left-timeline .px-1,
      .right-timeline .px-1 {
        padding-left: 1rem;
         padding-right: 1rem;
      }


      .left-timeline .text-left,
      .right-timeline .text-right {
        text-align: left;
      }

      .left-timeline .order-1,
      .right-timeline .order-1 {
        order: 1;
      }

      .left-timeline .w-5/12:nth-child(1),
      .right-timeline .w-5/12:nth-child(1) {
        order: 2;
      }


      .left-timeline .rounded-full,
      .right-timeline .rounded-full {
        position: relative;
        left: auto;
        transform: none;
        margin-right: 1rem;
      }

       .border-r-4 {
        border-right-width: 0;
        border-left-width: 4px;
        left: 1rem;
      }
  }
</style>

マテリアルデザイングリッドレイアウト

マテリアルデザインのスタイル設定を備えたレスポンシブグリッドレイアウトコンポーネントで、シャドウエフェクトやダークモードのサポートなど。

開けるプレビュー

                <div class="container mx-auto p-4">
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
    <!-- Card 1 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/picsum1/400/300" alt="Placeholder Image 1">
      <div class="p-4">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-white">Card Title 1</h3>
        <p class="text-gray-600 dark:text-gray-300 mt-2">This is a description for card 1. It provides details about the content.</p>
      </div>
    </div>
    <!-- Card 2 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/picsum2/400/300" alt="Placeholder Image 2">
      <div class="p-4">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-white">Card Title 2</h3>
        <p class="text-gray-600 dark:text-gray-300 mt-2">This is a description for card 2. It provides details about the content.</p>
      </div>
    </div>
    <!-- Card 3 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/picsum3/400/300" alt="Placeholder Image 3">
      <div class="p-4">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-white">Card Title 3</h3>
        <p class="text-gray-600 dark:text-gray-300 mt-2">This is a description for card 3. It provides details about the content.</p>
      </div>
    </div>
     <!-- Card 4 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/picsum4/400/300" alt="Placeholder Image 4">
      <div class="p-4">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-white">Card Title 4</h3>
        <p class="text-gray-600 dark:text-gray-300 mt-2">This is a description for card 4. It provides details about the content.</p>
      </div>
    </div>
    <!-- Card 5 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/picsum5/400/300" alt="Placeholder Image 5">
      <div class="p-4">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-white">Card Title 5</h3>
        <p class="text-gray-600 dark:text-gray-300 mt-2">This is a description for card 5. It provides details about the content.</p>
      </div>
    </div>
    <!-- Card 6 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/picsum6/400/300" alt="Placeholder Image 6">
      <div class="p-4">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-white">Card Title 6</h3>
        <p class="text-gray-600 dark:text-gray-300 mt-2">This is a description for card 6. It provides details about the content.</p>
      </div>
    </div>
  </div>
</div>

価格表示コンポーネント

レスポンシブモードとダークモードをサポートする最小限の価格表示コンポーネント

開けるプレビュー

                <div class="bg-white dark:bg-gray-800 rounded-lg px-6 py-8 ring-1 ring-slate-900/5 shadow-xl">
  <div>
    <span class="inline-flex items-center justify-center p-2 bg-indigo-500 rounded-md shadow-lg">
      <svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"></svg>
    </span>
  </div>
  <h3 class="mt-5 text-base font-medium tracking-tight text-slate-900 dark:text-white">Price</h3>
  <p class="mt-2 text-sm text-slate-500 dark:text-slate-400">
    <span class="text-2xl font-bold text-slate-900 dark:text-white">$99.99</span>/month
  </p>
</div>

スキューモーフィックチャットウィンドウ

Skeuomorphism と Tailwind CSS でスタイル設定されたチャットウィンドウ Web コンポーネント。レスポンシブレイアウト、CSSによるダークテーマのサポート、丸みを帯びたメッセージバブル、グラデーション、触感のあるシャドウを備えています。プレースホルダーのアバターと画像が含まれています。JavaScript は含まれていません。

開けるプレビュー

                <div class="flex flex-col w-full max-w-sm md:max-w-md lg:max-w-lg mx-auto my-8 rounded-lg overflow-hidden shadow-2xl bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-800 dark:to-gray-900 dark:text-white">
  <!-- Header -->
  <div class="flex items-center p-3 bg-gradient-to-r from-blue-600 to-blue-700 text-white shadow-md dark:from-blue-800 dark:to-blue-900">
    <img class="w-8 h-8 rounded-full mr-3 border-2 border-white shadow" src="https://randomuser.me/api/portraits/thumb/men/75.jpg" alt="User Avatar">
    <span class="font-semibold text-lg">John Doe</span>
  </div>

  <!-- Messages Area -->
  <div class="flex-1 p-4 h-64 overflow-y-auto space-y-4 bg-gray-50 dark:bg-gray-800">
    <!-- Received Message -->
    <div class="flex items-end">
      <img class="w-7 h-7 rounded-full mr-2 shadow-sm border border-gray-200 dark:border-gray-700" src="https://randomuser.me/api/portraits/thumb/women/80.jpg" alt="Other Avatar">
      <div class="max-w-[70%] px-4 py-2 rounded-b-lg rounded-tr-lg bg-gray-300 text-gray-800 shadow-md dark:bg-gray-600 dark:text-white">
        <p>Hey, how's it going?</p>
      </div>
    </div>

    <!-- Sent Message -->
    <div class="flex items-end justify-end">
      <div class="max-w-[70%] px-4 py-2 rounded-b-lg rounded-tl-lg bg-blue-500 text-white shadow-md dark:bg-blue-700">
        <p>I'm doing well, thanks! How about you?</p>
      </div>
       <img class="w-7 h-7 rounded-full ml-2 shadow-sm border border-gray-200 dark:border-gray-700" src="https://randomuser.me/api/portraits/thumb/men/75.jpg" alt="User Avatar">
    </div>

     <!-- Received Image Message -->
    <div class="flex items-end">
      <img class="w-7 h-7 rounded-full mr-2 shadow-sm border border-gray-200 dark:border-gray-700" src="https://randomuser.me/api/portraits/thumb/women/80.jpg" alt="Other Avatar">
      <div class="max-w-[70%] rounded-lg overflow-hidden shadow-md">
          <img src="https://picsum.photos/id/237/200/150" alt="Image message" class="w-full h-auto object-cover">
       </div>
    </div>

     <!-- Sent Image Message -->
    <div class="flex items-end justify-end">
      <div class="max-w-[70%] rounded-lg overflow-hidden shadow-md">
           <img src="https://picsum.photos/id/23/200/150" alt="Image message" class="w-full h-auto object-cover">
       </div>
       <img class="w-7 h-7 rounded-full ml-2 shadow-sm border border-gray-200 dark:border-gray-700" src="https://randomuser.me/api/portraits/thumb/men/75.jpg" alt="User Avatar">
    </div>

     <!-- More messages for scrolling -->
      <div class="flex items-end">
      <img class="w-7 h-7 rounded-full mr-2 shadow-sm border border-gray-200 dark:border-gray-700" src="https://randomuser.me/api/portraits/thumb/women/80.jpg" alt="Other Avatar">
      <div class="max-w-[70%] px-4 py-2 rounded-b-lg rounded-tr-lg bg-gray-300 text-gray-800 shadow-md dark:bg-gray-600 dark:text-white">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
    </div>

    <div class="flex items-end justify-end">
      <div class="max-w-[70%] px-4 py-2 rounded-b-lg rounded-tl-lg bg-blue-500 text-white shadow-md dark:bg-blue-700">
        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
       <img class="w-7 h-7 rounded-full ml-2 shadow-sm border border-gray-200 dark:border-gray-700" src="https://randomuser.me/api/portraits/thumb/men/75.jpg" alt="User Avatar">
    </div>
    <div class="flex items-end">
      <img class="w-7 h-7 rounded-full mr-2 shadow-sm border border-gray-200 dark:border-gray-700" src="https://randomuser.me/api/portraits/thumb/women/80.jpg" alt="Other Avatar">
      <div class="max-w-[70%] px-4 py-2 rounded-b-lg rounded-tr-lg bg-gray-300 text-gray-800 shadow-md dark:bg-gray-600 dark:text-white">
        <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
      </div>
    </div>
      <div class="flex items-end justify-end">
      <div class="max-w-[70%] px-4 py-2 rounded-b-lg rounded-tl-lg bg-blue-500 text-white shadow-md dark:bg-blue-700">
        <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
       <img class="w-7 h-7 rounded-full ml-2 shadow-sm border border-gray-200 dark:border-gray-700" src="https://randomuser.me/api/portraits/thumb/men/75.jpg" alt="User Avatar">
    </div>


  </div>

  <!-- Input Area -->
  <div class="flex items-center p-3 border-t border-gray-300 bg-gray-100 dark:border-gray-600 dark:bg-gray-700">
    <input type="text" placeholder="Type a message..." class="flex-1 rounded-lg px-4 py-2 mr-3 bg-white border border-gray-300 dark:bg-gray-600 dark:border-gray-500 dark:text-white dark:placeholder-gray-400 shadow-inner focus:outline-none focus:ring-2 focus:ring-blue-500">
    <button class="px-4 py-2 bg-gradient-to-r from-green-500 to-green-600 text-white rounded-lg shadow-md hover:from-green-600 hover:to-green-700 dark:from-green-700 dark:to-green-800 dark:hover:from-green-800 dark:hover:to-green-900">Send</button>
  </div>
</div>

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

マイクロインタラクションスタイル、レスポンシブエフェクト、ダークテーマのサポートを備えたショッピングカートコンポーネント。

開けるプレビュー

                <div class="bg-gray-100 dark:bg-gray-800 min-h-screen p-8">
  <div class="max-w-md mx-auto bg-white dark:bg-gray-700 rounded-lg shadow-lg overflow-hidden md:max-w-lg">
    <div class="md:flex">
      <div class="w-full p-4">
        <div class="flex justify-between items-center">
          <span class="text-gray-700 dark:text-gray-200 text-lg font-semibold">Shopping Cart</span>
          <span class="text-gray-600 dark:text-gray-300">3 items</span>
        </div>
        <hr class="mt-4">
        <div class="mt-8">
          <div class="flex items-center mb-5">
            <div class="w-20 h-20 overflow-hidden rounded-lg">
              <img src="https://picsum.photos/id/1018/80/80" alt="product image" class="object-cover w-full h-full">
            </div>
            <div class="flex-grow ml-4">
              <h2 class="text-gray-900 dark:text-gray-100 text-lg font-semibold">Product Name 1</h2>
              <p class="text-gray-600 dark:text-gray-300 text-sm">Size: M, Color: Red</p>
              <p class="text-gray-800 dark:text-gray-200 mt-1">$25.99</p>
            </div>
            <div class="flex flex-col items-center">
              <button class="text-gray-600 dark:text-gray-300 focus:outline-none focus:text-gray-500 transition ease-in-out duration-150 transform hover:scale-110">
                <svg class="h-5 w-5" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor"><path d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
              </button>
              <span class="text-gray-700 dark:text-gray-200 mx-2">1</span>
              <button class="text-gray-600 dark:text-gray-300 focus:outline-none focus:text-gray-500 transition ease-in-out duration-150 transform hover:scale-110">
                <svg class="h-5 w-5" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor"><path d="M15 12H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
              </button>
            </div>
          </div>
          <div class="flex items-center mb-5">
            <div class="w-20 h-20 overflow-hidden rounded-lg">
              <img src="https://picsum.photos/id/1015/80/80" alt="product image" class="object-cover w-full h-full">
            </div>
            <div class="flex-grow ml-4">
              <h2 class="text-gray-900 dark:text-gray-100 text-lg font-semibold">Product Name 2</h2>
              <p class="text-gray-600 dark:text-gray-300 text-sm">Size: S, Color: Blue</p>
              <p class="text-gray-800 dark:text-gray-200 mt-1">$15.50</p>
            </div>
            <div class="flex flex-col items-center">
              <button class="text-gray-600 dark:text-gray-300 focus:outline-none focus:text-gray-500 transition ease-in-out duration-150 transform hover:scale-110">
                <svg class="h-5 w-5" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor"><path d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
              </button>
              <span class="text-gray-700 dark:text-gray-200 mx-2">1</span>
              <button class="text-gray-600 dark:text-gray-300 focus:outline-none focus:text-gray-500 transition ease-in-out duration-150 transform hover:scale-110">
                <svg class="h-5 w-5" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor"><path d="M15 12H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
              </button>
            </div>
          </div>
           <div class="flex items-center">
            <div class="w-20 h-20 overflow-hidden rounded-lg">
              <img src="https://picsum.photos/id/1019/80/80" alt="product image" class="object-cover w-full h-full">
            </div>
            <div class="flex-grow ml-4">
              <h2 class="text-gray-900 dark:text-gray-100 text-lg font-semibold">Product Name 3</h2>
              <p class="text-gray-600 dark:text-gray-300 text-sm">One Size, Color: Green</p>
              <p class="text-gray-800 dark:text-gray-200 mt-1">$30.00</p>
            </div>
            <div class="flex flex-col items-center">
              <button class="text-gray-600 dark:text-gray-300 focus:outline-none focus:text-gray-500 transition ease-in-out duration-150 transform hover:scale-110">
                <svg class="h-5 w-5" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor"><path d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
              </button>
              <span class="text-gray-700 dark:text-gray-200 mx-2">1</span>
              <button class="text-gray-600 dark:text-gray-300 focus:outline-none focus:text-gray-500 transition ease-in-out duration-150 transform hover:scale-110">
                <svg class="h-5 w-5" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor"><path d="M15 12H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
              </button>
            </div>
          </div>
        </div>
        <hr class="mt-8">
        <div class="mt-4 flex justify-between items-center">
          <span class="text-gray-700 dark:text-gray-200 text-lg font-semibold">Total:</span>
          <span class="text-gray-900 dark:text-gray-100 text-lg font-semibold">$71.49</span>
        </div>
        <button class="mt-6 w-full bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600 focus:outline-none focus:bg-blue-600 transition ease-in-out duration-150">
          Checkout
        </button>
      </div>
    </div>
  </div>
</div>

グラフコンポーネント

レスポンシブデザインとTailwind CSSを使用したダークテーマのサポートを備えたミニマリストチャートコンポーネント。

開けるプレビュー

                <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-4">
  <h2 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">Sales Overview</h2>
  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
    <div class="flex items-center justify-between">
      <div class="text-sm text-gray-500 dark:text-gray-300">Revenue</div>
      <div class="text-lg font-bold text-green-500">$12,450</div>
    </div>
    <div class="flex items-center justify-between">
      <div class="text-sm text-gray-500 dark:text-gray-300">Profit</div>
      <div class="text-lg font-bold text-blue-500">$5,600</div>
    </div>
  </div>
  <div class="mt-4">
    <div class="w-full h-32 bg-gray-200 dark:bg-gray-700 rounded-lg"></div>
  </div>
</div>

1 ... 279 280 281 282 283 ... 315

検索コンポーネント

カテゴリ

すべてのコンポーネント