検索コンポーネント

すべてのコンポーネント

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

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

レスポンシブデザインとダークモードをサポートするニューモーフィックサイトマップコンポーネント。

                <div class="container mx-auto p-4 bg-gray-200 dark:bg-gray-800 shadow-neumorphic-light dark:shadow-neumorphic-dark rounded-lg">
  <h2 class="text-2xl font-bold mb-4 text-gray-800 dark:text-white">Site Map</h2>
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
    <div class="bg-gray-300 dark:bg-gray-700 p-4 rounded-lg shadow-neumorphic-light dark:shadow-neumorphic-dark">
      <h3 class="font-semibold text-gray-700 dark:text-gray-200">Section 1</h3>
      <ul class="mt-2 space-y-2 text-gray-600 dark:text-gray-300">
        <li><a href="#" class="hover:text-blue-600 dark:hover:text-blue-400">Link 1</a></li>
        <li><a href="#" class="hover:text-blue-600 dark:hover:text-blue-400">Link 2</a></li>
        <li><a href="#" class="hover:text-blue-600 dark:hover:text-blue-400">Link 3</a></li>
      </ul>
    </div>
    <div class="bg-gray-300 dark:bg-gray-700 p-4 rounded-lg shadow-neumorphic-light dark:shadow-neumorphic-dark">
      <h3 class="font-semibold text-gray-700 dark:text-gray-200">Section 2</h3>
      <ul class="mt-2 space-y-2 text-gray-600 dark:text-gray-300">
        <li><a href="#" class="hover:text-blue-600 dark:hover:text-blue-400">Link A</a></li>
        <li><a href="#" class="hover:text-blue-600 dark:hover:text-blue-400">Link B</a></li>
        <li><a href="#" class="hover:text-blue-600 dark:hover:text-blue-400">Link C</a></li>
      </ul>
    </div>
    <div class="bg-gray-300 dark:bg-gray-700 p-4 rounded-lg shadow-neumorphic-light dark:shadow-neumorphic-dark">
      <h3 class="font-semibold text-gray-700 dark:text-gray-200">Section 3</h3>
      <ul class="mt-2 space-y-2 text-gray-600 dark:text-gray-300">
        <li><a href="#" class="hover:text-blue-600 dark:hover:text-blue-400">Page X</a></li>
        <li><a href="#" class="hover:text-blue-600 dark:hover:text-blue-400">Page Y</a></li>
        <li><a href="#" class="hover:text-blue-600 dark:hover:text-blue-400">Page Z</a></li>
      </ul>
    </div>
  </div>
</div>

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

ダークテーマ、レスポンシブデザイン、JavaScript なしのナビゲーションコンポーネント。

開けるプレビュー

                <nav class="bg-gray-800">
  <div class="mx-auto max-w-7xl px-2 sm:px-6 lg:px-8">
    <div class="relative flex h-16 items-center justify-between">
      <div class="absolute inset-y-0 left-0 flex items-center sm:hidden">
        <!-- Mobile menu button-->
        <button type="button" class="inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white" aria-controls="mobile-menu" aria-expanded="false">
          <span class="sr-only">Open main menu</span>
          <svg class="block h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-3.75 17.25h16.5" />
          </svg>
          <svg class="hidden h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      </div>
      <div class="flex flex-1 items-center justify-center sm:items-stretch sm:justify-start">
        <div class="flex flex-shrink-0 items-center">
          <img class="block h-8 w-auto lg:hidden" src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=500" alt="Your Company">
          <img class="hidden h-8 w-auto lg:block" src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=500" alt="Your Company">
        </div>
        <div class="hidden sm:ml-6 sm:block">
          <div class="flex space-x-4">
            <!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" -->
            <a href="#" class="bg-gray-900 text-white rounded-md px-3 py-2 text-sm font-medium" aria-current="page">Dashboard</a>
            <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white rounded-md px-3 py-2 text-sm font-medium">Team</a>
            <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white rounded-md px-3 py-2 text-sm font-medium">Projects</a>
            <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white rounded-md px-3 py-2 text-sm font-medium">Calendar</a>
          </div>
        </div>
      </div>
      <div class="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0">
        <button type="button" class="rounded-full bg-gray-800 p-1 text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800">
          <span class="sr-only">View notifications</span>
          <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.248 24.248 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0" />
          </svg>
        </button>

        <!-- Profile dropdown -->
        <div class="relative ml-3">
          <div>
            <button type="button" class="flex rounded-full bg-gray-800 text-sm focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800" id="user-menu-button" aria-expanded="false" aria-haspopup="true">
              <span class="sr-only">Open user menu</span>
              <img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
            </button>
          </div>

          <!--
            Dropdown menu, show/hide based on menu state.

            Entering: "transition ease-out duration-100"
              From: "transform opacity-0 scale-95"
              To: "transform opacity-100 scale-100"
            Leaving: "transition ease-in duration-75"
              From: "transform opacity-100 scale-100"
              To: "transform opacity-0 scale-95"
          -->
          <div class="absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button" tabindex="-1">
            <!-- Active: "bg-gray-100", Not Active: "" -->
            <a href="#" class="block px-4 py-2 text-sm text-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-0">Your Profile</a>
            <a href="#" class="block px-4 py-2 text-sm text-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-1">Settings</a>
            <a href="#" class="block px-4 py-2 text-sm text-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-2">Sign out</a>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Mobile menu, show/hide based on menu state. -->
  <div class="sm:hidden" id="mobile-menu">
    <div class="space-y-1 px-2 pb-3 pt-2">
      <!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" -->
      <a href="#" class="bg-gray-900 text-white block rounded-md px-3 py-2 text-base font-medium" aria-current="page">Dashboard</a>
      <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block rounded-md px-3 py-2 text-base font-medium">Team</a>
      <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block rounded-md px-3 py-2 text-base font-medium">Projects</a>
      <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block rounded-md px-3 py-2 text-base font-medium">Calendar</a>
    </div>
  </div>
</nav>

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

Tailwind CSSを使用した魅力的なマイクロインタラクションとダークテーマのサポートを備えたレスポンシブインフォグラフィックコンポーネント。

開けるプレビュー

                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 m-4 transition-all duration-300">
  <h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4">Engaging Infographics</h2>
  <div class="flex flex-col md:flex-row gap-4">
    <div class="bg-gray-200 dark:bg-gray-700 rounded-lg overflow-hidden shadow hover:shadow-lg transition-shadow duration-300 ease-in-out">
      <img src="https://picsum.photos/300/200?random=1" alt="Infographic Image" class="w-full">
      <div class="p-4">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-white">Infographic 1</h3>
        <p class="text-gray-600 dark:text-gray-300">Description of infographic 1.</p>
      </div>
    </div>
    <div class="bg-gray-200 dark:bg-gray-700 rounded-lg overflow-hidden shadow hover:shadow-lg transition-shadow duration-300 ease-in-out">
      <img src="https://picsum.photos/300/200?random=2" alt="Infographic Image" class="w-full">
      <div class="p-4">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-white">Infographic 2</h3>
        <p class="text-gray-600 dark:text-gray-300">Description of infographic 2.</p>
      </div>
    </div>
  </div>
  <div class="mt-4 flex items-center">
    <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 class="ml-3">
      <h4 class="text-md font-semibold text-gray-800 dark:text-white">John Doe</h4>
      <span class="text-sm text-gray-500 dark:text-gray-400">Created: 2 hours ago</span>
    </div>
  </div>
</div>

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

Tailwind CSS を使用したダークモード UI 用に設計されたレスポンシブアクティビティフィードコンポーネント。

開けるプレビュー

                <div class="bg-gray-800 text-white p-6 rounded-lg shadow-lg">
    <h2 class="text-2xl font-bold mb-4">Activity Feed</h2>
    <ul class="space-y-4">
        <li class="flex items-start">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
            <div class="bg-gray-700 p-4 rounded-lg flex-1">
                <p class="font-semibold">John Doe</p>
                <p class="text-gray-400">Commented on your post</p>
                <span class="text-gray-500 text-sm">2 hours ago</span>
            </div>
        </li>
        <li class="flex items-start">
            <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
            <div class="bg-gray-700 p-4 rounded-lg flex-1">
                <p class="font-semibold">Jane Smith</p>
                <p class="text-gray-400">Liked your photo</p>
                <span class="text-gray-500 text-sm">4 hours ago</span>
            </div>
        </li>
        <li class="flex items-start">
            <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
            <div class="bg-gray-700 p-4 rounded-lg flex-1">
                <p class="font-semibold">Sam Wilson</p>
                <p class="text-gray-400">Started following you</p>
                <span class="text-gray-500 text-sm">6 hours ago</span>
            </div>
        </li>
        <li class="flex items-start">
            <img src="https://randomuser.me/api/portraits/women/4.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
            <div class="bg-gray-700 p-4 rounded-lg flex-1">
                <p class="font-semibold">Lisa Ray</p>
                <p class="text-gray-400">Shared your article</p>
                <span class="text-gray-500 text-sm">1 day ago</span>
            </div>
        </li>
        <li class="flex items-start">
            <img src="https://randomuser.me/api/portraits/men/5.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
            <div class="bg-gray-700 p-4 rounded-lg flex-1">
                <p class="font-semibold">Michael Brown</p>
                <p class="text-gray-400">Added a photo</p>
                <span class="text-gray-500 text-sm">2 days ago</span>
            </div>
        </li>
    </ul>
</div>

スキューモーフィックカードコンポーネント

Skeuomorphismに触発された次のカードコンポーネントは、ダークテーマのサポートにより完全にレスポンシブです。ダークモードの場合、CSSのサポートで十分です。JavaScriptは必要ありません。

開けるプレビュー

                <div class="flex flex-wrap justify-center items-center min-h-screen bg-gray-100 dark:bg-gray-900 p-10">

  <!-- Card 1 -->
  <div class="m-4 w-72 bg-white dark:bg-gray-800 rounded-lg shadow-xl dark:shadow-xl-dark overflow-hidden">
    <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/card1/300/200" alt="Random image">
    <div class="p-6">
      <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2">Skeuomorphic Card</h3>
      <p class="text-gray-700 dark:text-gray-300 text-base">This is a skeuomorphic-inspired card with a subtle shadow and rounded corners, designed to look like a physical object.</p>
      <div class="mt-4 flex items-center">
        <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar of random user">
        <div class="text-sm">
          <p class="text-gray-900 dark:text-white leading-none">John Doe</p>
          <p class="text-gray-600 dark:text-gray-400">Developer</p>
        </div>
      </div>
    </div>
  </div>

  <!-- Card 2 -->
  <div class="m-4 w-72 bg-white dark:bg-gray-800 rounded-lg shadow-xl dark:shadow-xl-dark overflow-hidden">
    <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/card2/300/200" alt="Random image">
    <div class="p-6">
      <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2">Interactive Design</h3>
      <p class="text-gray-700 dark:text-gray-300 text-base">Combining modern web practices with classic design principles, this card offers a visually engaging experience.</p>
        <div class="mt-4 flex items-center">
        <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar of random user">
        <div class="text-sm">
          <p class="text-gray-900 dark:text-white leading-none">Jane Smith</p>
          <p class="text-gray-600 dark:text-gray-400">Designer</p>
        </div>
      </div>
    </div>
  </div>

    <!-- Card 3 -->
  <div class="m-4 w-72 bg-white dark:bg-gray-800 rounded-lg shadow-xl dark:shadow-xl-dark overflow-hidden">
    <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/card3/300/200" alt="Random image">
    <div class="p-6">
      <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2">Responsive Layout</h3>
      <p class="text-gray-700 dark:text-gray-300 text-base">This card is built with responsiveness in mind, ensuring it looks great on all devices, from desktops to mobile phones.</p>
            <div class="mt-4 flex items-center">
        <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/47.jpg" alt="Avatar of random user">
        <div class="text-sm">
          <p class="text-gray-900 dark:text-white leading-none">Peter Jones</p>
          <p class="text-gray-600 dark:text-gray-400">Project Manager</p>
        </div>
      </div>
    </div>
  </div>

</div>

<style>
/* Custom dark shadow for dark mode skeuomorphism */
.dark\:shadow-xl-dark {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.6), 0 4px 6px -2px rgba(0, 0, 0, 0.4);
}
</style>

機能コンポーネントコンポーネント

3D デザイン、レスポンシブエフェクト、ダークモードのサポートを備えた機能コンポーネントで、Tailwind CSS を使用して実装されています。

開けるプレビュー

                <div class="flex flex-wrap justify-center items-center h-screen bg-gray-200 dark:bg-gray-800">
  <div class="bg-white dark:bg-gray-700 rounded-lg shadow-xl transform transition-transform duration-500 hover:scale-105 perspective-1000 group w-64 m-6">
    <div class="relative transform transition-transform duration-500 rotate-y-0 group-hover:rotate-y-10 h-40 bg-gray-300 dark:bg-gray-600 rounded-t-lg">
      <img src="https://picsum.photos/id/237/200/300" alt="Placeholder image" class="w-full h-full object-cover rounded-t-lg">
    </div>
    <div class="p-6 transform transition-transform duration-500 translate-z-20">
      <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-2">Component Title</h2>
      <p class="text-gray-700 dark:text-gray-300">This is a description of the component, showcasing its features and design.</p>
    </div>
  </div>
   <div class="bg-white dark:bg-gray-700 rounded-lg shadow-xl transform transition-transform duration-500 hover:scale-105 perspective-1000 group w-64 m-6">
    <div class="relative transform transition-transform duration-500 rotate-y-0 group-hover:rotate-y-10 h-40 bg-gray-300 dark:bg-gray-600 rounded-t-lg">
      <img src="https://picsum.photos/id/238/200/300" alt="Placeholder image" class="w-full h-full object-cover rounded-t-lg">
    </div>
    <div class="p-6 transform transition-transform duration-500 translate-z-20">
      <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-2">Component Title</h2>
      <p class="text-gray-700 dark:text-gray-300">This is a description of the component, showcasing its features and design.</p>
    </div>
  </div>
</div>

ページネーションコンポーネント

3D 要素でデザインされたレスポンシブページネーションコンポーネントで、Tailwind CSS を使用したダークテーマのサポート。

開けるプレビュー

                <div class="flex justify-center items-center mt-6">
    <nav aria-label="Pagination">
        <ul class="flex space-x-4">
            <li>
                <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-md bg-white text-sm font-medium text-gray-700 hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-700 transition-transform transform hover:scale-105">
                    <span class="material-icons">chevron_left</span>
                </a>
            </li>
            <li>
                <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-md bg-white text-sm font-medium text-gray-700 hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-700 transition-transform transform hover:scale-105">1</a>
            </li>
            <li>
                <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-md bg-white text-sm font-medium text-gray-700 hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-700 transition-transform transform hover:scale-105">2</a>
            </li>
            <li>
                <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-md bg-white text-sm font-medium text-gray-700 hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-700 transition-transform transform hover:scale-105">3</a>
            </li>
            <li>
                <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-md bg-white text-sm font-medium text-gray-700 hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-700 transition-transform transform hover:scale-105">...</a>
            </li>
            <li>
                <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-md bg-white text-sm font-medium text-gray-700 hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-700 transition-transform transform hover:scale-105">10</a>
            </li>
            <li>
                <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-md bg-white text-sm font-medium text-gray-700 hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-700 transition-transform transform hover:scale-105">
                    <span class="material-icons">chevron_right</span>
                </a>
            </li>
        </ul>
    </nav>
</div>

<style>
@media (prefers-color-scheme: dark) {
    .bg-white {
        background-color: #1f2937;
    }
    .text-gray-700 {
        color: #e5e7eb;
    }
    .border-gray-300 {
        border-color: #4b5563;
    }
}
</style>

進行状況インジケータコンポーネント

レスポンシブデザインとTailwind CSSを使用したダークテーマのサポートを特徴とするレトロ/ビンテージスタイルのプログレスインジケーターコンポーネント。

開けるプレビュー

                <div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-md max-w-md mx-auto">
    <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-white mb-4">Progress Indicators</h2>
    <div class="mb-4">
        <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300">Loading...</h3>
        <div class="w-full bg-gray-300 dark:bg-gray-700 rounded-full h-4 mt-2">
            <div class="bg-blue-500 h-4 rounded-full transition-all duration-500 ease-in-out" style="width: 70%;"></div>
        </div>
        <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">70% Complete</p>
    </div>
    <div class="mb-4">
        <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300">Uploading...</h3>
        <div class="w-full bg-gray-300 dark:bg-gray-700 rounded-full h-4 mt-2">
            <div class="bg-blue-500 h-4 rounded-full transition-all duration-500 ease-in-out" style="width: 50%;"></div>
        </div>
        <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">50% Uploaded</p>
    </div>
    <div class="mb-4">
        <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300">Downloading...</h3>
        <div class="w-full bg-gray-300 dark:bg-gray-700 rounded-full h-4 mt-2">
            <div class="bg-blue-500 h-4 rounded-full transition-all duration-500 ease-in-out" style="width: 30%;"></div>
        </div>
        <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">30% Downloaded</p>
    </div>
    <div class="mt-6">
        <img class="rounded-full w-12 h-12 mx-auto" src="https://picsum.photos/200/200" alt="Random Image" />
        <p class="text-center text-gray-600 dark:text-gray-400 mt-2">Vintage Style Image</p>
    </div>
    <div class="mt-6">
        <img class="rounded-full w-12 h-12 mx-auto" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Random Avatar" />
        <p class="text-center text-gray-600 dark:text-gray-400 mt-2">User Avatar</p>
    </div>
</div>

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

Tailwind CSS を使用したマテリアルデザインの原則でスタイル設定されたレスポンシブファイルビューアコンポーネントで、ダークテーマがサポートされています。

開けるプレビュー

                <div class="bg-white dark:bg-gray-800 shadow rounded-lg p-6 max-w-md mx-auto mt-10">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">File Viewer</h2>
    <div class="border-b border-gray-300 dark:border-gray-600 mb-4">
        <h3 class="text-xl font-semibold text-gray-700 dark:text-gray-200">Document Title</h3>
        <p class="text-gray-600 dark:text-gray-400">Uploaded by: <span class="font-medium">John Doe</span></p>
    </div>
    <div class="flex flex-col items-center mb-4">
        <img src="https://picsum.photos/200/100" alt="File Preview" class="rounded-lg shadow-md mb-4" />
        <p class="text-gray-700 dark:text-gray-300 text-center">File Description: This is a placeholder file viewer that shows brief file details and presentation.</p>
    </div>
    <div class="flex justify-between items-center">
        <span class="text-gray-600 dark:text-gray-400">File Size: 2.3 MB</span>
        <button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded shadow">Download</button>
    </div>
</div>

レトロなツールチップコンポーネント

レトロ/ビンテージをテーマにしたツールチップコンポーネントで、レスポンシブエフェクトとダークモードのサポートを備えています。

開けるプレビュー

                <style>
  @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

  .tooltip-retro {
    font-family: 'Press Start 2P', cursive;
    position: relative;
    display: inline-block;
    cursor: pointer;
  }

  .tooltip-retro .tooltip-content {
    visibility: hidden;
    width: 120px;
    background-color: #33 некоторого number; /* Retro dark background */
    color: #0f0; /* Neon green text */
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 0.3s;
    border: 2px solid #0f0; /* Neon green border */
    box-shadow: 0 0 10px #0f0; /* Neon green glow */
  }

  .tooltip-retro .tooltip-content::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #0f0 transparent transparent transparent; /* Neon green triangle */
  }

  .tooltip-retro:hover .tooltip-content {
    visibility: visible;
    opacity: 1;
  }

  /* Dark Mode */
  @media (prefers-color-scheme: dark) {
    .tooltip-retro .tooltip-content {
      background-color: #0f0; /* Neon green background in dark mode */
      color: #333; /* Dark text in dark mode */
      border-color: #333; /* Dark border in dark mode */
      box-shadow: 0 0 10px #333; /* Dark glow in dark mode */
    }

    .tooltip-retro .tooltip-content::after {
      border-color: #333 transparent transparent transparent; /* Dark triangle in dark mode */
    }
  }

  /* Responsive effects */
  @media (max-width: 600px) {
    .tooltip-retro .tooltip-content {
      width: 80px;
      margin-left: -40px;
    }
  }
</style>

<div class="tooltip-retro">
  Hover over me
  <span class="tooltip-content">Retro Tooltip!</span>
</div>

1 ... 287 288 289 290 291 ... 315

検索コンポーネント

カテゴリ

すべてのコンポーネント