検索コンポーネント

すべてのコンポーネント

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

Monospace_Booking_Navigation_Complex_Triadic

モノスペース/開発者の美学を備えた複雑な予約/予約ナビゲーションコンポーネント。トライアドカラースキーム、レスポンシブデザイン、ダークモードのサポートが特徴で、アポイントメントシステムに最適です。

                <div class="font-mono min-h-screen bg-gray-50 text-gray-900 dark:bg-gray-900 dark:text-gray-100 flex flex-col">
  <!-- Header Navigation -->
  <header class="bg-emerald-600 dark:bg-emerald-800 text-white p-4 shadow-lg z-10">
    <div class="container mx-auto flex flex-col md:flex-row items-center justify-between">
      <div class="text-2xl font-bold tracking-tight mb-2 md:mb-0">[BOOK.]_SYSTEM</div>
      <nav class="flex flex-wrap justify-center gap-4 text-sm font-medium">
        <a href="#" class="px-3 py-2 rounded-md hover:bg-emerald-700 dark:hover:bg-emerald-700 transition-colors duration-200">_Dashboard</a>
        <a href="#" class="px-3 py-2 rounded-md hover:bg-emerald-700 dark:hover:bg-emerald-700 transition-colors duration-200">_Bookings</a>
        <a href="#" class="px-3 py-2 rounded-md hover:bg-emerald-700 dark:hover:bg-emerald-700 transition-colors duration-200">_Services</a>
        <a href="#" class="px-3 py-2 rounded-md hover:bg-emerald-700 dark:hover:bg-emerald-700 transition-colors duration-200">_Clients</a>
        <a href="#" class="px-3 py-2 rounded-md hover:bg-emerald-700 dark:hover:bg-emerald-700 transition-colors duration-200">_Reports</a>
      </nav>
      <div class="mt-4 md:mt-0 flex items-center gap-4">
        <button class="p-2 rounded-full bg-emerald-700 dark:bg-emerald-900 hover:bg-emerald-800 dark:hover:bg-emerald-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-emerald-600 focus:ring-white" aria-label="Notifications">
          <svg class="w-5 h-5" 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="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0V6a2 2 0 012-2h2a2 2 0 012 2v5a6.002 6.002 0 014 5.158V14a2 2 0 00-2-2h-3l-1-1H7l-1-1H3a2 2 0 00-2 2v5a2 2 0 002 2h2a2 2 0 002-2v-5a2 2 0 002-2h-3l-1-1H7l-1-1H3a2 2 0 00-2 2v5a2 2 0 002 2h2a2 2 0 002-2v-5a2 2 0 002-2h-3l-1-1H7l-1-1H3a2 2 0 00-2 2v5a2 2 0 002 2h2a2 2 0 002-2v-5a2 2 0 002-2h-3l-1-1H7l-1-1H3a2 2 0 00-2 2v5a2 2 0 002 2h2a2 2 0 002-2v-5a2 2 0 002-2h-3l-1-1H7l-1-1H3a2 2 0 00-2 2v5a2 2 0 002 2h2a2 2 0 002-2v-5a2 2 0 002-2h-3l-1-1H7l-1-1H3a2 2 0 00-2 2v5a2 2 0 002 2h2a2 2 0 002-2v-5a2 2 0 002-2h-3l-1-1H7l-1-1H3a2 2 0 00-2 2v5a2 2 0 002 2h2a2 2 0 002-2v-5a2 2 0 002-2h-3l-1-1H7l-1-1H3a2 2 0 00-2 2v5a2 2 0 0"></path></svg>
        </button>
        <img class="w-8 h-8 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar">
      </div>
    </div>
  </header>

  <!-- Main Content Area -->
  <main class="flex-1 container mx-auto p-4 md:p-6 lg:p-8 flex flex-col lg:flex-row gap-6">

    <!-- Sidebar / Contextual Controls -->
    <aside class="w-full lg:w-1/4 bg-blue-50 dark:bg-blue-950 p-6 rounded-lg border-2 border-dashed border-blue-200 dark:border-blue-800 shadow-md">
      <h2 class="text-xl font-bold mb-4 text-blue-800 dark:text-blue-200 underline">_Filter_Bookings</h2>
      <div class="mb-6">
        <label for="service-type" class="block text-sm font-medium mb-2 text-blue-700 dark:text-blue-300">[SERVICE]</label>
        <select id="service-type" class="w-full p-2 rounded-md bg-blue-100 dark:bg-blue-900 border border-blue-300 dark:border-blue-700 focus:ring-blue-500 focus:border-blue-500 text-blue-900 dark:text-blue-100 placeholder-blue-400 dark:placeholder-blue-600 outline-none">
          <option>All Services</option>
          <option>Consultation</option>
          <option>Maintenance</option>
          <option>Deployment</option>
        </select>
      </div>
      <div class="mb-6">
        <label for="date-range" class="block text-sm font-medium mb-2 text-blue-700 dark:text-blue-300">[DATE_RANGE]</label>
        <input type="range" id="date-range" min="0" max="100" value="50" class="w-full h-2 bg-blue-200 rounded-lg appearance-none cursor-pointer dark:bg-blue-700 accent-blue-600">
        <div class="flex justify-between text-xs text-blue-600 dark:text-blue-400 mt-1">
          <span>Past</span>
          <span>Future</span>
        </div>
      </div>
      <div class="mb-6">
        <label for="status-filter" class="block text-sm font-medium mb-2 text-blue-700 dark:text-blue-300">[STATUS]</label>
        <div class="flex flex-col gap-2">
          <label class="inline-flex items-center">
            <input type="checkbox" class="form-checkbox h-4 w-4 text-blue-600 rounded dark:bg-blue-800 dark:border-blue-700 focus:ring-blue-500" checked><span class="ml-2 text-blue-900 dark:text-blue-100">Pending</span>
          </label>
          <label class="inline-flex items-center">
            <input type="checkbox" class="form-checkbox h-4 w-4 text-emerald-600 rounded dark:bg-emerald-800 dark:border-emerald-700 focus:ring-emerald-500" checked><span class="ml-2 text-blue-900 dark:text-blue-100">Confirmed</span>
          </label>
          <label class="inline-flex items-center">
            <input type="checkbox" class="form-checkbox h-4 w-4 text-rose-600 rounded dark:bg-rose-800 dark:border-rose-700 focus:ring-rose-500"><span class="ml-2 text-blue-900 dark:text-blue-100">Cancelled</span>
          </label>
        </div>
      </div>
      <button class="w-full bg-blue-600 dark:bg-blue-700 text-white py-2 rounded-md hover:bg-blue-700 dark:hover:bg-blue-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-blue-50 dark:focus:ring-offset-blue-950 focus:ring-blue-500">_APPLY_FILTERS</button>
    </aside>

    <!-- Main Content Panel -->
    <section class="flex-1 bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md border-2 border-gray-200 dark:border-gray-700">
      <h1 class="text-2xl md:text-3xl font-bold mb-6 text-gray-800 dark:text-gray-100 flex items-center">
        <span class="mr-2 text-emerald-500 dark:text-emerald-400">&#9608;</span> UPCOMING_BOOKINGS
      </h1>

      <!-- Booking List/Table -->
      <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
          <thead class="bg-gray-50 dark:bg-gray-700">
            <tr>
              <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">[ID]</th>
              <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">[CLIENT]</th>
              <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">[SERVICE]</th>
              <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">[DATE]</th>
              <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">[TIME]</th>
              <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">[STATUS]</th>
              <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">[ACTIONS]</th>
            </tr>
          </thead>
          <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
            <!-- Booking Row 1 -->
            <tr>
              <td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">#0x1A2B3C</td>
              <td class="px-4 py-4 whitespace-nowrap">
                <div class="flex items-center">
                  <div class="flex-shrink-0 h-8 w-8">
                    <img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/women/67.jpg" alt="">
                  </div>
                  <div class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-100">Alice_Smith</div>
                </div>
              </td>
              <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">_Consultation_V2</td>
              <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">2024-07-28</td>
              <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">10:00_AM</td>
              <td class="px-4 py-4 whitespace-nowrap">
                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-emerald-100 text-emerald-800 dark:bg-emerald-900 dark:text-emerald-300">
                  CONFIRMED
                </span>
              </td>
              <td class="px-4 py-4 whitespace-nowrap text-left text-sm font-medium">
                <a href="#" class="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-200 mr-4">_EDIT</a>
                <a href="#" class="text-rose-600 hover:text-rose-900 dark:text-rose-400 dark:hover:text-rose-200">_CANCEL</a>
              </td>
            </tr>
            <!-- Booking Row 2 -->
            <tr>
              <td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">#0x1D4E5F</td>
              <td class="px-4 py-4 whitespace-nowrap">
                <div class="flex items-center">
                  <div class="flex-shrink-0 h-8 w-8">
                    <img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/men/22.jpg" alt="">
                  </div>
                  <div class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-100">Bob_Johnson</div>
                </div>
              </td>
              <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">_System_Setup</td>
              <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">2024-07-29</td>
              <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">02:00_PM</td>
              <td class="px-4 py-4 whitespace-nowrap">
                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-300">
                  PENDING
                </span>
              </td>
              <td class="px-4 py-4 whitespace-nowrap text-left text-sm font-medium">
                <a href="#" class="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-200 mr-4">_EDIT</a>
                <a href="#" class="text-rose-600 hover:text-rose-900 dark:text-rose-400 dark:hover:text-rose-200">_CANCEL</a>
              </td>
            </tr>
            <!-- Booking Row 3 -->
            <tr>
              <td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">#0x2F6A7B</td>
              <td class="px-4 py-4 whitespace-nowrap">
                <div class="flex items-center">
                  <div class="flex-shrink-0 h-8 w-8">
                    <img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="">
                  </div>
                  <div class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-100">Carol_White</div>
                </div>
              </td>
              <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">_Debugging_Svc</td>
              <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">2024-08-01</td>
              <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">09:30_AM</td>
              <td class="px-4 py-4 whitespace-nowrap">
                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-emerald-100 text-emerald-800 dark:bg-emerald-900 dark:text-emerald-300">
                  CONFIRMED
                </span>
              </td>
              <td class="px-4 py-4 whitespace-nowrap text-left text-sm font-medium">
                <a href="#" class="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-200 mr-4">_EDIT</a>
                <a href="#" class="text-rose-600 hover:text-rose-900 dark:text-rose-400 dark:hover:text-rose-200">_CANCEL</a>
              </td>
            </tr>
            <!-- Booking Row 4 -->
            <tr>
              <td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">#0x3B8C9D</td>
              <td class="px-4 py-4 whitespace-nowrap">
                <div class="flex items-center">
                  <div class="flex-shrink-0 h-8 w-8">
                    <img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/men/78.jpg" alt="">
                  </div>
                  <div class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-100">David_King</div>
                </div>
              </td>
              <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">_Data_Migration</td>
              <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">2024-08-05</td>
              <td class="px-4 py-4 whitespace-nowrap text-sm flex items-center justify-start text-rose-500 dark:text-rose-400">
                CANCELED
              </td>
              <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">01:00_PM</td>
              <td class="px-4 py-4 whitespace-nowrap text-left text-sm font-medium">
                <a href="#" class="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-200 mr-4">_VIEW</a>
                <a href="#" class="text-gray-400 dark:text-gray-600 cursor-not-allowed">_Rebook</a>
              </td>
            </tr>
          </tbody>
        </table>
      </div>

      <div class="mt-8 flex flex-col sm:flex-row justify-between items-center text-sm">
        <div class="text-gray-600 dark:text-gray-400 mb-4 sm:mb-0">Showing 1 to 4 of 12 Results</div>
        <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
          <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-700 text-sm font-medium text-gray-500 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors duration-200">
            <span class="sr-only">Previous</span>
            <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
              <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
            </svg>
          </a>
          <a href="#" aria-current="page" class="relative inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-700 bg-emerald-500 text-white text-sm font-medium hover:bg-emerald-600 transition-colors duration-200 z-10">1</a>
          <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-700 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors duration-200">2</a>
          <a href="#" class="relative hidden md:inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-700 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors duration-200">3</a>
          <span class="relative inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-700 text-sm font-medium text-gray-700 dark:text-gray-300">...</span>
          <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-700 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors duration-200">12</a>
          <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-700 text-sm font-medium text-gray-500 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors duration-200">
            <span class="sr-only">Next</span>
            <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
              <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10l-3.293-3.293a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
            </svg>
          </a>
        </nav>
      </div>

    </section>

  </main>

  <!-- Footer Component -->
  <footer class="bg-rose-600 dark:bg-rose-800 text-white p-4 text-center text-sm opacity-90">
    <div class="container mx-auto">
      &copy; 2024 <span class="font-bold">[BOOK._SYS]</span>. All rights reserved. <span class="text-opacity-70">//_end_of_transmission</span>
    </div>
  </footer>
</div>

農業用電子商取引製品カード

農業のeコマースWebサイト向けの遊び心のある陽気な製品カードコンポーネントで、丸みを帯びた要素、オーシャン/ブルーの色調、レスポンシブデザイン、ダークモードのサポートが特徴です。

開けるプレビュー

                <div class="p-4 md:p-8 bg-gradient-to-br from-blue-50 to-sky-100 dark:from-gray-800 dark:to-gray-950 min-h-screen flex items-center justify-center font-sans">
  <div class="max-w-xs sm:max-w-sm md:max-w-md lg:max-w-lg mx-auto bg-white dark:bg-gray-850 rounded-3xl shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-[1.02] border-4 border-blue-200 dark:border-blue-800">
    <div class="relative">
      <img class="w-full h-48 sm:h-56 md:h-64 object-cover object-center rounded-t-2xl" src="https://picsum.photos/600/400?random=1&seed=farming" alt="Fresh Organic Produce">
      <div class="absolute top-3 left-3 bg-blue-500 text-white text-xs font-bold px-3 py-1 rounded-full shadow-md transform -rotate-3">Grows Fast!</div>
      <div class="absolute top-3 right-3 bg-green-400 text-white text-xs font-bold px-3 py-1 rounded-full shadow-md transform rotate-3">Fresh Pick</div>
    </div>
    <div class="p-5 sm:p-6 md:p-7 space-y-4">
      <h3 class="text-xl sm:text-2xl font-extrabold text-blue-800 dark:text-blue-200 leading-tight">Organic Heirloom Tomatoes</h3>
      <p class="text-sm sm:text-base text-gray-600 dark:text-gray-400 leading-relaxed">Cultivated with love and care, these juicy heirloom tomatoes are perfect for your summer salads and sauces.</p>
      <div class="flex items-center justify-between mt-4">
        <span class="text-2xl sm:text-3xl font-extrabold text-green-600 dark:text-green-400">$5.99</span>
        <span class="text-lg text-gray-500 line-through dark:text-gray-600">$7.50</span>
      </div>
      <div class="flex items-center text-yellow-500 mt-2">
        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><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.817 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.817-2.034a1 1 0 00-1.176 0l-2.817 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.725c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><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.817 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.817-2.034a1 1 0 00-1.176 0l-2.817 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.725c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><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.817 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.817-2.034a1 1 0 00-1.176 0l-2.817 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.725c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><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.817 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.817-2.034a1 1 0 00-1.176 0l-2.817 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.725c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
        <svg class="w-5 h-5 text-gray-300 dark:text-gray-600" fill="currentColor" viewBox="0 0 20 20"><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.817 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.817-2.034a1 1 0 00-1.176 0l-2.817 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.725c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
        <span class="text-sm ml-1 text-gray-500 dark:text-gray-400">(4.5)</span>
      </div>
      <button type="button" class="w-full py-3 sm:py-4 px-6 mt-4 bg-blue-600 hover:bg-blue-700 active:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:bg-blue-700 dark:hover:bg-blue-800 dark:focus:ring-blue-900 text-white font-bold rounded-full shadow-lg text-lg sm:text-xl transform transition-transform duration-200 hover:scale-[1.03] flex items-center justify-center space-x-2">
        <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="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
        <span>Add to Basket</span>
      </button>
      <div class="flex items-center mt-5 p-3 bg-blue-50 dark:bg-gray-800 rounded-xl">
        <img class="w-10 h-10 rounded-full object-cover mr-3 border-2 border-blue-300 dark:border-blue-600" src="https://randomuser.me/api/portraits/men/45.jpg" alt="Farmer John">
        <div>
          <p class="font-semibold text-blue-800 dark:text-blue-300">Harvested by Farmer John</p>
          <p class="text-sm text-gray-500 dark:text-gray-400">Local & Sustainable</p>
        </div>
      </div>
    </div>
  </div>
</div>

コミュニティフォーラムコンポーネント

エンターテインメント/メディアプラットフォーム向けに設計された、グラデーショントランジションを備えたシンプルで活気のあるコミュニティフォーラムコンポーネント。ダークモードをサポートするレスポンシブレイアウトが特徴です。

開けるプレビュー

                <div class="p-4 sm:p-6 md:p-8 bg-gradient-to-br from-purple-500 via-pink-500 to-red-500 dark:from-gray-900 dark:via-purple-900 dark:to-pink-900 min-h-screen flex items-center justify-center font-sans">
  <div class="w-full max-w-4xl bg-white bg-opacity-90 dark:bg-gray-800 dark:bg-opacity-95 rounded-xl shadow-2xl overflow-hidden transform transition-all duration-300 ease-in-out hover:scale-[1.01]">
    <div class="p-6 sm:p-8 border-b border-gray-200 dark:border-gray-700">
      <h2 class="text-3xl sm:text-4xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-red-600 to-indigo-600 dark:from-red-400 dark:to-indigo-400 mb-2 transition-colors duration-300">
        Cosmic Conversations
      </h2>
      <p class="text-lg sm:text-xl text-gray-700 dark:text-gray-300 transition-colors duration-300">
        Join the vibrant discussion! Your hub for all things entertainment.
      </p>
    </div>

    <div class="p-6 sm:p-8 grid gap-6 sm:gap-8">

      <!-- Forum Post 1 -->
      <div class="bg-white dark:bg-gray-900 rounded-lg p-5 sm:p-6 shadow-lg transform transition-all duration-300 ease-in-out hover:shadow-xl hover:-translate-y-1 border border-gray-100 dark:border-gray-700">
        <div class="flex items-center mb-4">
          <img class="w-12 h-12 rounded-full mr-4 border-2 border-pink-500 dark:border-purple-500" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
          <div>
            <p class="font-semibold text-lg text-gray-900 dark:text-white">Alex 'The Wanderer' Ross</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">Posted 2 hours ago</p>
          </div>
        </div>
        <h3 class="text-xl md:text-2xl font-bold mb-3 text-gray-800 dark:text-gray-100">"Favorite Sci-Fi series of all time?" 🎉</h3>
        <p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4">
          Just finished binge-watching 'Starbound Chronicles' again and it got me thinking. What's everyone's absolute favorite sci-fi series, movies included? The one that changed your view of the universe!
        </p>
        <img class="w-full h-48 object-cover rounded-lg mb-4 shadow" src="https://picsum.photos/600/300?random=1" alt="Placeholder image for post">
        <div class="flex items-center justify-between text-gray-600 dark:text-gray-400 text-sm">
          <div class="flex items-center space-x-4">
            <button class="flex items-center space-x-1 text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300 transition-colors duration-200">
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path></svg>
              <span>154 Likes</span>
            </button>
            <button class="flex items-center space-x-1 text-blue-500 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300 transition-colors duration-200">
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.707 3.293a1 1 0 010 1.414L5.414 7H11a7 7 0 017 7v2a1 1 0 11-2 0v-2a5 5 0 00-5-5H5.414l2.293 2.293a1 1 0 11-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
              <span>48 Comments</span>
            </button>
          </div>
          <a href="#" class="text-indigo-600 hover:text-indigo-800 dark:text-indigo-400 dark:hover:text-indigo-300 font-semibold transition-colors duration-200">Read More</a>
        </div>
      </div>

      <!-- Forum Post 2 -->
      <div class="bg-white dark:bg-gray-900 rounded-lg p-5 sm:p-6 shadow-lg transform transition-all duration-300 ease-in-out hover:shadow-xl hover:-translate-y-1 border border-gray-100 dark:border-gray-700">
        <div class="flex items-center mb-4">
          <img class="w-12 h-12 rounded-full mr-4 border-2 border-green-500 dark:border-teal-500" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
          <div>
            <p class="font-semibold text-lg text-gray-900 dark:text-white">Luna 'The Dreamweaver' Bright</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">Posted 5 hours ago</p>
          </div>
        </div>
        <h3 class="text-xl md:text-2xl font-bold mb-3 text-gray-800 dark:text-gray-100">"Underrated Indie Games for a Weekend Binge?" 🎮✨</h3>
        <p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4">
          Hey fellow gamers! My usual rotation is getting a bit stale. Any recommendations for truly underrated indie games that flew under the radar but deserve some love? Thinking unique art styles or compelling narratives.
        </p>
        <img class="w-full h-48 object-cover rounded-lg mb-4 shadow" src="https://picsum.photos/600/300?random=2" alt="Placeholder image for post">
        <div class="flex items-center justify-between text-gray-600 dark:text-gray-400 text-sm">
          <div class="flex items-center space-x-4">
            <button class="flex items-center space-x-1 text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300 transition-colors duration-200">
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path></svg>
              <span>87 Likes</span>
            </button>
            <button class="flex items-center space-x-1 text-blue-500 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300 transition-colors duration-200">
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.707 3.293a1 1 0 010 1.414L5.414 7H11a7 7 0 017 7v2a1 1 0 11-2 0v-2a5 5 0 00-5-5H5.414l2.293 2.293a1 1 0 11-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
              <span>22 Comments</span>
            </button>
          </div>
          <a href="#" class="text-indigo-600 hover:text-indigo-800 dark:text-indigo-400 dark:hover:text-indigo-300 font-semibold transition-colors duration-200">View Discussion</a>
        </div>
      </div>

    </div>

    <div class="p-6 sm:p-8 border-t border-gray-200 dark:border-gray-700 flex justify-center">
      <button class="px-8 py-3 rounded-full text-white font-bold text-lg 
                     bg-gradient-to-r from-red-500 to-orange-500 
                     hover:from-red-600 hover:to-orange-600 
                     dark:from-pink-600 dark:to-purple-600 
                     dark:hover:from-pink-700 dark:hover:to-purple-700 
                     shadow-lg transform transition-all duration-300 
                     hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 
                     focus:ring-offset-2 focus:ring-red-500 dark:focus:ring-pink-500">
        Create New Post
      </button>
    </div>
  </div>
</div>

Brutalism ブッキングメディアコンポーネント

予約/予約システム用のシンプルなブルータリズムスタイルのメディアコンポーネントで、高コントラストと補色スキームが特徴で、ダークモードをサポートして完全にレスポンシブです。

開けるプレビュー

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center p-4 sm:p-6 lg:p-8 font-sans">
  <div class="w-full max-w-md bg-white dark:bg-gray-800 border-4 border-black dark:border-red-500 shadow-[8px_8px_0_0_#EF4444] dark:shadow-[8px_8px_0_0_#1E3A8A] transition-all duration-300 ease-in-out">
    <div class="relative overflow-hidden bg-red-500 dark:bg-red-700 h-48 sm:h-56 lg:h-64 border-b-4 border-black dark:border-red-500">
      <img src="https://picsum.photos/600/400?random=1" alt="Booking slot preview" class="w-full h-full object-cover grayscale group-hover:grayscale-0 transition-filter duration-300">
      <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent"></div>
      <div class="absolute bottom-0 left-0 p-4">
        <h3 class="text-2xl sm:text-3xl font-extrabold text-yellow-300 dark:text-yellow-200 uppercase leading-none break-words">
          Book Your
          <span class="block">Next Slot</span>
        </h3>
      </div>
    </div>

    <div class="p-4 sm:p-6 border-b-4 border-black dark:border-red-500">
      <p class="text-lg sm:text-xl font-bold text-gray-900 dark:text-gray-100 uppercase mb-2">
        Available now!
      </p>
      <p class="text-sm sm:text-base text-gray-700 dark:text-gray-300 font-medium leading-tight">
        Secure your spot for an exclusive consultation. Limited availability each week.
      </p>
    </div>

    <div class="p-4 sm:p-6 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
      <div class="flex items-center space-x-3">
        <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Facilitator's avatar" class="w-12 h-12 sm:w-16 sm:h-16 rounded-full border-4 border-black dark:border-yellow-400 object-cover grayscale hover:grayscale-0 transition-filter duration-300">
        <div class="text-gray-900 dark:text-gray-100">
          <p class="font-extrabold text-base sm:text-lg uppercase leading-none">Jane Doe</p>
          <p class="text-xs sm:text-sm font-medium text-gray-700 dark:text-gray-400">Senior Consultant</p>
        </div>
      </div>
      <a href="#" class="inline-flex items-center justify-center px-6 py-3 border-4 border-black dark:border-blue-700 bg-yellow-300 dark:bg-yellow-500 text-black dark:text-white font-extrabold text-lg uppercase shadow-[4px_4px_0_0_#000] dark:shadow-[4px_4px_0_0_#1E3A8A] hover:bg-yellow-400 dark:hover:bg-yellow-600 transition-all duration-200 ease-in-out whitespace-nowrap">
        Book Slot
        <svg class="ml-2 -mr-1 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 15.707a1 1 0 010-1.414L14.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path><path fill-rule="evenodd" d="M4.293 15.707a1 1 0 010-1.414L8.586 10 4.293 5.707a1 1 0 011.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
      </a>
    </div>
  </div>
</div>

Follow Button コンポーネント

不動産プラットフォーム向けに設計されたレスポンシブな「フォロー」ボタンコンポーネントで、企業のブルーカラースキーム、ダークモードのサポート、微妙なインタラクティブホバー効果が特徴です。

開けるプレビュー

                <div class="flex items-center justify-center p-4 bg-gray-100 dark:bg-gray-900 min-h-screen">
  <button class="relative flex items-center justify-center px-6 py-2 overflow-hidden font-semibold text-white transition-all duration-300 ease-in-out bg-blue-600 rounded-lg group shadow-lg dark:bg-blue-700 dark:shadow-blue-900/50 hover:shadow-xl hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-900">
    <span class="relative z-10 text-base group-hover:text-white transition-colors duration-200">
      Follow
    </span>
    <svg class="absolute w-0 h-0 transition-all duration-300 ease-in-out transform -translate-x-full opacity-0 group-hover:opacity-100 group-hover:w-6 group-hover:h-6 group-hover:translate-x-0 group-hover:text-white" 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="M17 8l4 4m0 0l-4 4m4-4H3"></path>
    </svg>
    <span class="absolute top-0 left-0 w-full h-full bg-gradient-to-r from-blue-700 to-blue-500 rounded-lg opacity-0 transition-opacity duration-300 ease-in-out group-hover:opacity-100"></span>
  </button>
</div>

Luxury_Pastel_Government_Footer

政府または公共サービスのWebサイト向けのエレガントでレスポンシブなフッターコンポーネントで、パステルカラーの配色とダークモードのサポートを備えた豪華なデザインが特徴です。ナビゲーションリンク、連絡先情報、ソーシャルメディア、著作権が含まれています。

開けるプレビュー

                <footer class="bg-gradient-to-r from-teal-50 to-blue-50 text-gray-700 dark:from-gray-900 dark:to-gray-950 dark:text-gray-300 py-12 px-4 shadow-inner border-t border-gray-200 dark:border-gray-800">
  <div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-10">

    <!-- Logo & Description -->
    <div class="flex flex-col items-start">
      <a href="#" class="flex items-center space-x-3 rtl:space-x-reverse mb-4">
        <svg class="w-8 h-8 text-teal-600 dark:text-teal-400" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" d="M2.25 6a3 3 0 013-3h13.5a3 3 0 013 3v10.5a3 3 0 01-3 3H5.25a3 3 0 01-3-3V6zm3-.75a.75.75 0 00-.75.75v10.5c0 .414.336.75.75.75h13.5a.75.75 0 00.75-.75V6a.75.75 0 00-.75-.75H5.25zM6 9a.75.75 0 01.75-.75h10.5a.75.75 0 01.75.75v4.5a.75.75 0 01-.75.75H6.75a.75.75 0 01-.75-.75V9z" clip-rule="evenodd" />
        </svg>
        <span class="self-center text-3xl font-serif font-semibold whitespace-nowrap text-teal-800 dark:text-teal-200">Government</span>
      </a>
      <p class="text-sm text-gray-600 dark:text-gray-400 leading-relaxed max-w-xs">
        Committed to serving the public with transparency

Memphis_Marketplace_Charts_Component

メンフィスデザインの美学、大胆な補色を備えた複雑で応答性の高いチャートコンポーネントで、マルチベンダーマーケットプレイスに適しています。ダークモードのサポートとインタラクティブな要素が含まれています。

開けるプレビュー

                <div class="p-4 sm:p-6 md:p-8 bg-pink-100 dark:bg-zinc-900 font-sans min-h-screen flex items-center justify-center">
  <div class="w-full max-w-7xl bg-white dark:bg-zinc-800 rounded-3xl shadow-xl overflow-hidden
              border-4 border-fuchsia-500 dark:border-teal-400
              grid grid-cols-1 lg:grid-cols-3 gap-6 p-6 sm:p-8 lg:p-10
              relative"> 
    
    <!-- Memphis background patterns -->
    <div class="absolute inset-0 pointer-events-none overflow-hidden rounded-3xl">
      <div class="absolute -bottom-16 -left-16 w-64 h-64 bg-teal-400 dark:bg-fuchsia-600 rounded-full mix-blend-multiply opacity-30"></div>
      <div class="absolute -top-20 -right-20 w-80 h-80 bg-fuchsia-500 dark:bg-cyan-500 rounded-full mix-blend-multiply opacity-20"></div>
      <div class="absolute top-1/4 left-1/4 w-32 h-32 bg-yellow-300 dark:bg-purple-600 rounded-lg transform rotate-45 mix-blend-multiply opacity-30"></div>
      <div class="absolute bottom-1/3 right-1/4 w-48 h-12 bg-blue-400 dark:bg-orange-500 rounded-full mix-blend-multiply opacity-20"></div>
    </div>

    <!-- Main Content Grid -->
    <div class="relative z-10 lg:col-span-2 space-y-6">
      
      <!-- Header -->
      <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 border-b-4 border-dashed border-cyan-400 dark:border-yellow-500 pb-6">
        <div>
          <h1 class="text-4xl sm:text-5xl font-extrabold text-fuchsia-600 dark:text-teal-400 mb-2 leading-tight">Marketplace Insights</h1>
          <p class="text-zinc-600 dark:text-zinc-300 text-lg sm:text-xl font-medium">Performance overview for your vendors.</p>
        </div>
        <button class="px-6 py-3 bg-teal-500 dark:bg-fuchsia-600 text-white rounded-xl shadow-lg
                       transform hover:scale-105 transition-all duration-300
                       border-2 border-fuchsia-600 dark:border-teal-500
                       text-lg font-semibold whitespace-nowrap">View All Reports</button>
      </div>

      <!-- Main Charts Section -->
      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        
        <!-- Sales Volume Chart -->
        <div class="bg-violet-100 dark:bg-zinc-700 p-6 rounded-2xl shadow-md border-4 border-fuchsia-400 dark:border-cyan-400">
          <h3 class="text-2xl font-bold text-fuchsia-700 dark:text-teal-300 mb-4">Sales Volume by Category</h3>
          <div class="h-48 sm:h-64 bg-white dark:bg-zinc-900 rounded-xl flex items-center justify-center border-2 border-slate-300 dark:border-zinc-600 relative overflow-hidden">
             <!-- Placeholder for Chart -->
            <div class="absolute inset-0 opacity-20 dark:opacity-10 ">
              <div class="absolute bottom-0 left-0 w-full h-1/2 bg-gradient-to-t from-teal-300 to-transparent dark:from-teal-600"></div>
              <div class="absolute top-0 right-0 w-1/3 h-full bg-gradient-to-l from-fuchsia-300 to-transparent dark:from-fuchsia-600"></div>
            </div>
            <p class="text-zinc-500 dark:text-zinc-400 z-10 text-xl">Chart Placeholder</p>
          </div>
          <div class="text-center mt-4 text-zinc-600 dark:text-zinc-300">
            <p class="font-medium">Total Sales: <span class="text-fuchsia-600 dark:text-teal-400 font-bold">$1.2M</span></p>
          </div>
        </div>

        <!-- Vendor Performance Chart -->
        <div class="bg-yellow-100 dark:bg-zinc-700 p-6 rounded-2xl shadow-md border-4 border-cyan-400 dark:border-fuchsia-400">
          <h3 class="text-2xl font-bold text-cyan-700 dark:text-yellow-300 mb-4">Top 5 Vendor Performance</h3>
          <div class="h-48 sm:h-64 bg-white dark:bg-zinc-900 rounded-xl flex items-center justify-center border-2 border-slate-300 dark:border-zinc-600 relative overflow-hidden">
             <!-- Placeholder for Chart -->
            <div class="absolute inset-0 opacity-20 dark:opacity-10">
              <div class="absolute bottom-0 left-0 w-full h-1/2 bg-gradient-to-t from-fuchsia-300 to-transparent dark:from-fuchsia-600"></div>
              <div class="absolute top-0 right-0 w-1/3 h-full bg-gradient-to-l from-teal-300 to-transparent dark:from-teal-600"></div>
            </div>
            <p class="text-zinc-500 dark:text-zinc-400 z-10 text-xl">Chart Placeholder</p>
          </div>
          <div class="text-center mt-4 text-zinc-600 dark:text-zinc-300">
            <p class="font-medium">Average Rating: <span class="text-cyan-600 dark:text-yellow-400 font-bold">4.7/5</span></p>
          </div>
        </div>
      </div>

      <!-- Quick Stats Section -->
      <div class="bg-indigo-100 dark:bg-zinc-700 p-6 rounded-2xl shadow-md border-4 border-teal-500 dark:border-purple-400">
        <h3 class="text-2xl font-bold text-teal-700 dark:text-purple-300 mb-4">Quick Stats</h3>
        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4">
          <div class="bg-white dark:bg-zinc-800 p-4 rounded-xl text-center border-2 border-teal-400 dark:border-purple-400 shadow-sm">
            <p class="text-3xl font-extrabold text-teal-500 dark:text-purple-300 leading-none">150+</p>
            <p class="text-zinc-600 dark:text-zinc-300 text-sm font-medium">Active Vendors</p>
          </div>
          <div class="bg-white dark:bg-zinc-800 p-4 rounded-xl text-center border-2 border-fuchsia-400 dark:border-cyan-400 shadow-sm">
            <p class="text-3xl font-extrabold text-fuchsia-500 dark:text-cyan-300 leading-none">8k+</p>
            <p class="text-zinc-600 dark:text-zinc-300 text-sm font-medium">Products Listed</p>
          </div>
          <div class="bg-white dark:bg-zinc-800 p-4 rounded-xl text-center border-2 border-yellow-400 dark:border-orange-400 shadow-sm">
            <p class="text-3xl font-extrabold text-yellow-500 dark:text-orange-300 leading-none">$1.8M</p>
            <p class="text-zinc-600 dark:text-zinc-300 text-sm font-medium">Total Commission</p>
          </div>
          <div class="bg-white dark:bg-zinc-800 p-4 rounded-xl text-center border-2 border-blue-400 dark:border-lime-400 shadow-sm">
            <p class="text-3xl font-extrabold text-blue-500 dark:text-lime-300 leading-none">92%</p>
            <p class="text-zinc-600 dark:text-zinc-300 text-sm font-medium">Vendor Retention</p>
          </div>
        </div>
      </div>

    </div>

    <!-- Sidebar / Latest Activity -->
    <div class="relative z-10 lg:col-span-1 space-y-6">
      <div class="bg-orange-100 dark:bg-zinc-700 p-6 rounded-2xl shadow-md border-4 border-purple-500 dark:border-fuchsia-400">
        <h3 class="text-2xl font-bold text-purple-700 dark:text-fuchsia-300 mb-4">Latest Vendor Activity</h3>
        <div class="space-y-4">
          <div class="flex items-center gap-4 bg-white dark:bg-zinc-800 p-3 rounded-xl border-2 border-orange-300 dark:border-purple-400">
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="" class="w-12 h-12 rounded-full border-2 border-purple-400 dark:border-fuchsia-300 shadow-md">
            <div>
              <p class="font-semibold text-zinc-800 dark:text-zinc-200">Vendor A <span class="text-sm text-zinc-500 dark:text-zinc-400 ml-2">15 min ago</span></p>
              <p class="text-zinc-600 dark:text-zinc-300 text-sm">Added <span class="font-bold text-purple-600 dark:text-fuchsia-300">3 new products</span></p>
            </div>
          </div>
           <div class="flex items-center gap-4 bg-white dark:bg-zinc-800 p-3 rounded-xl border-2 border-orange-300 dark:border-purple-400">
            <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="" class="w-12 h-12 rounded-full border-2 border-purple-400 dark:border-fuchsia-300 shadow-md">
            <div>
              <p class="font-semibold text-zinc-800 dark:text-zinc-200">Vendor B <span class="text-sm text-zinc-500 dark:text-zinc-400 ml-2">1 hour ago</span></p>
              <p class="text-zinc-600 dark:text-zinc-300 text-sm">Updated <span class="font-bold text-purple-600 dark:text-fuchsia-300">shipping info</span></p>
            </div>
          </div>
           <div class="flex items-center gap-4 bg-white dark:bg-zinc-800 p-3 rounded-xl border-2 border-orange-300 dark:border-purple-400">
            <img src="https://randomuser.me/api/portraits/women/10.jpg" alt="" class="w-12 h-12 rounded-full border-2 border-purple-400 dark:border-fuchsia-300 shadow-md">
            <div>
              <p class="font-semibold text-zinc-800 dark:text-zinc-200">Vendor C <span class="text-sm text-zinc-500 dark:text-zinc-400 ml-2">3 hours ago</span></p>
              <p class="text-zinc-600 dark:text-zinc-300 text-sm">Sold <span class="font-bold text-purple-600 dark:text-fuchsia-300">5 items</span> (electronics)</p>
            </div>
          </div>
           <div class="flex items-center gap-4 bg-white dark:bg-zinc-800 p-3 rounded-xl border-2 border-orange-300 dark:border-purple-400">
            <img src="https://randomuser.me/api/portraits/men/50.jpg" alt="" class="w-12 h-12 rounded-full border-2 border-purple-400 dark:border-fuchsia-300 shadow-md">
            <div>
              <p class="font-semibold text-zinc-800 dark:text-zinc-200">Vendor D <span class="text-sm text-zinc-500 dark:text-zinc-400 ml-2">Yesterday</span></p>
              <p class="text-zinc-600 dark:text-zinc-300 text-sm">Responded to <span class="font-bold text-purple-600 dark:text-fuchsia-300">2 customer reviews</span></p>
            </div>
          </div>
        </div>
      </div>
      
      <!-- Trending Products -->
      <div class="bg-lime-100 dark:bg-zinc-700 p-6 rounded-2xl shadow-md border-4 border-blue-500 dark:border-orange-400">
        <h3 class="text-2xl font-bold text-blue-700 dark:text-orange-300 mb-4">Trending Products</h3>
        <ul class="space-y-3">
          <li class="flex items-center gap-3 bg-white dark:bg-zinc-800 p-3 rounded-xl border-2 border-blue-300 dark:border-orange-400">
            <img src="https://picsum.photos/id/198/60/60" alt="Product Image" class="w-16 h-16 object-cover rounded-md border-2 border-blue-400 dark:border-orange-300">
            <div>
              <p class="font-semibold text-zinc-800 dark:text-zinc-200">Smart Watch X Pro</p>
              <p class="text-zinc-600 dark:text-zinc-300 text-sm">Sold: <span class="text-blue-600 dark:text-orange-400 font-bold">120 units</span></p>
            </div>
          </li>
          <li class="flex items-center gap-3 bg-white dark:bg-zinc-800 p-3 rounded-xl border-2 border-blue-300 dark:border-orange-400">
            <img src="https://picsum.photos/id/166/60/60" alt="Product Image" class="w-16 h-16 object-cover rounded-md border-2 border-blue-400 dark:border-orange-300">
            <div>
              <p class="font-semibold text-zinc-800 dark:text-zinc-200">Noise Cancelling Headphones</p>
              <p class="text-zinc-600 dark:text-zinc-300 text-sm">Sold: <span class="text-blue-600 dark:text-orange-400 font-bold">95 units</span></p>
            </div>
          </li>
          <li class="flex items-center gap-3 bg-white dark:bg-zinc-800 p-3 rounded-xl border-2 border-blue-300 dark:border-orange-400">
            <img src="https://picsum.photos/id/175/60/60" alt="Product Image" class="w-16 h-16 object-cover rounded-md border-2 border-blue-400 dark:border-orange-300">
            <div>
              <p class="font-semibold text-zinc-800 dark:text-zinc-200">Ergonomic Office Chair</p>
              <p class="text-zinc-600 dark:text-zinc-300 text-sm">Sold: <span class="text-blue-600 dark:text-orange-400 font-bold">78 units</span></p>
            </div>
          </li>
        </ul>
      </div>

    </div>

  </div>
</div>

製品比較コンポーネント

スポーツ/フィットネス製品用の遊び心のあるフレンドリーな製品比較コンポーネントで、温かみのあるニュートラル、丸みを帯びた要素、ダークモードをサポートするレスポンシブデザインが特徴です。

開けるプレビュー

                <div class="font-sans antialiased bg-stone-100 dark:bg-stone-900 min-h-screen p-4 sm:p-6 lg:p-8 flex items-center justify-center">
  <div class="container mx-auto max-w-6xl">
    <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-center mb-8 sm:mb-12 text-stone-800 dark:text-stone-100 leading-tight">
      Choose Your Game-Changer!
    </h2>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8 lg:gap-10">

      <!-- Product Card 1 -->
      <div class="bg-white dark:bg-stone-800 rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-300 p-6 sm:p-8 flex flex-col items-center text-center border border-stone-200 dark:border-stone-700">
        <div class="w-32 h-32 sm:w-40 sm:h-40 rounded-full overflow-hidden mb-6 bg-stone-200 dark:bg-stone-700 flex items-center justify-center p-2">
          <img src="https://picsum.photos/id/1018/300/300" alt="Product A" class="w-full h-full object-cover rounded-full transform hover:scale-105 transition-transform duration-300">
        </div>
        <h3 class="text-2xl sm:text-3xl font-bold text-stone-800 dark:text-stone-100 mb-3">Athlete's Delight</h3>
        <p class="text-stone-600 dark:text-stone-300 text-lg mb-6 leading-relaxed">
          Perfect for daily workouts and casual jogs. Reliable & comfortable.
        </p>
        <ul class="text-left text-stone-700 dark:text-stone-200 text-base space-y-3 mb-8 w-full max-w-xs">
          <li class="flex items-center"><svg class="w-5 h-5 mr-3 text-emerald-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg> Lightweight Design</li>
          <li class="flex items-center"><svg class="w-5 h-5 mr-3 text-emerald-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg> Breathable Fabric</li>
          <li class="flex items-center"><svg class="w-5 h-5 mr-3 text-red-500 transform rotate-45" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 0l-2 2a1 1 0 000 1.414l2 2a1 1 0 001.414-1.414L7.414 10l1.293-1.293a1 1 0 000-1.414z" clip-rule="evenodd"></path></svg> Advanced Grip</li>
        </ul>
        <div class="text-4xl font-extrabold text-stone-800 dark:text-stone-100 mb-6">$79.<span class="text-2xl">99</span></div>
        <button class="px-8 py-4 bg-orange-400 hover:bg-orange-500 text-white font-bold rounded-full shadow-lg transition-all duration-300 transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-4 focus:ring-orange-300 dark:focus:ring-orange-700">
          Select Basic
        </button>
      </div>

      <!-- Product Card 2 (Featured) -->
      <div class="bg-white dark:bg-stone-800 rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-300 p-6 sm:p-8 flex flex-col items-center text-center border-4 border-orange-400 dark:border-orange-500 relative transform scale-105 lg:scale-100">
        <span class="absolute top-0 left-1/2 -mt-4 -translate-x-1/2 bg-orange-400 dark:bg-orange-500 text-white text-sm font-bold px-4 py-2 rounded-full shadow-md tracking-wide uppercase">Best Value!</span>
        <div class="w-32 h-32 sm:w-40 sm:h-40 rounded-full overflow-hidden mb-6 bg-stone-200 dark:bg-stone-700 flex items-center justify-center p-2">
          <img src="https://picsum.photos/id/1025/300/300" alt="Product B" class="w-full h-full object-cover rounded-full transform hover:scale-105 transition-transform duration-300">
        </div>
        <h3 class="text-2xl sm:text-3xl font-bold text-stone-800 dark:text-stone-100 mb-3">Pro Performer</h3>
        <p class="text-stone-600 dark:text-stone-300 text-lg mb-6 leading-relaxed">
          Engineered for peak performance and competitive sports.
        </p>
        <ul class="text-left text-stone-700 dark:text-stone-200 text-base space-y-3 mb-8 w-full max-w-xs">
          <li class="flex items-center"><svg class="w-5 h-5 mr-3 text-emerald-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg> Lightweight Design</li>
          <li class="flex items-center"><svg class="w-5 h-5 mr-3 text-emerald-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg> Breathable Fabric</li>
          <li class="flex items-center"><svg class="w-5 h-5 mr-3 text-emerald-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg> Advanced Grip</li>
        </ul>
        <div class="text-5xl font-extrabold text-stone-800 dark:text-stone-100 mb-6">$129.<span class="text-3xl">99</span></div>
        <button class="px-8 py-4 bg-emerald-500 hover:bg-emerald-600 text-white font-bold rounded-full shadow-lg transition-all duration-300 transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-4 focus:ring-emerald-300 dark:focus:ring-emerald-700">
          Go Pro!
        </button>
      </div>

      <!-- Product Card 3 -->
      <div class="bg-white dark:bg-stone-800 rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-300 p-6 sm:p-8 flex flex-col items-center text-center border border-stone-200 dark:border-stone-700">
        <div class="w-32 h-32 sm:w-40 sm:h-40 rounded-full overflow-hidden mb-6 bg-stone-200 dark:bg-stone-700 flex items-center justify-center p-2">
          <img src="https://picsum.photos/id/1040/300/300" alt="Product C" class="w-full h-full object-cover rounded-full transform hover:scale-105 transition-transform duration-300">
        </div>
        <h3 class="text-2xl sm:text-3xl font-bold text-stone-800 dark:text-stone-100 mb-3">Elite Champion</h3>
        <p class="text-stone-600 dark:text-stone-300 text-lg mb-6 leading-relaxed">
          Top-tier choice for professional athletes and serious competitors.
        </p>
        <ul class="text-left text-stone-700 dark:text-stone-200 text-base space-y-3 mb-8 w-full max-w-xs">
          <li class="flex items-center"><svg class="w-5 h-5 mr-3 text-emerald-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg> Lightweight Design</li>
          <li class="flex items-center"><svg class="w-5 h-5 mr-3 text-emerald-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg> Breathable Fabric</li>
          <li class="flex items-center"><svg class="w-5 h-5 mr-3 text-emerald-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg> Advanced Grip</li>
        </ul>
        <div class="text-4xl font-extrabold text-stone-800 dark:text-stone-100 mb-6">$189.<span class="text-2xl">99</span></div>
        <button class="px-8 py-4 bg-orange-400 hover:bg-orange-500 text-white font-bold rounded-full shadow-lg transition-all duration-300 transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-4 focus:ring-orange-300 dark:focus:ring-orange-700">
          Unlock Elite
        </button>
      </div>

    </div>
  </div>
</div>

LuxuryPaginationコンポーネント

ドキュメントや Wiki サイト向けに設計されたエレガントで洗練されたページネーションコンポーネントで、高級感やプレミアム感、補色、豊富なインタラクティブ要素を特徴としています。ダークモードのサポートにより完全にレスポンシブ。

開けるプレビュー

                <nav class="flex items-center justify-between p-4 bg-white shadow-xl rounded-xl dark:bg-gray-800 lg:p-6" aria-label="Pagination">
  <div class="flex-1 flex justify-between items-center sm:hidden">
    <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 dark:border-gray-600 dark:text-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 transition-colors duration-200 ease-in-out">
      Previous
    </a>
    <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 ml-3 dark:border-gray-600 dark:text-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 transition-colors duration-200 ease-in-out">
      Next
    </a>
  </div>
  <div class="hidden sm:flex sm:flex-1 sm:items-center sm:justify-between">
    <div>
      <p class="text-sm text-gray-700 dark:text-gray-300">
        Showing
        <span class="font-medium">1</span>
        to
        <span class="font-medium">10</span>
        of
        <span class="font-medium">97</span>
        results
      </p>
    </div>
    <div>
      <ul class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
        <li>
          <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 focus:z-20 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-400 dark:hover:bg-gray-600 transition-colors duration-200 ease-in-out">
            <span class="sr-only">Previous</span>
            <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
              <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
            </svg>
          </a>
        </li>
        <li>
          <a href="#" aria-current="page" class="z-10 bg-indigo-50 border-indigo-500 text-indigo-600 relative inline-flex items-center px-4 py-2 border text-sm font-medium dark:bg-indigo-900 dark:border-indigo-700 dark:text-indigo-300 transition-colors duration-200 ease-in-out">
            1
          </a>
        </li>
        <li>
          <a href="#" class="bg-white border-gray-300 text-gray-700 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600 transition-colors duration-200 ease-in-out">
            2
          </a>
        </li>
        <li>
          <a href="#" class="hidden md:inline-flex bg-white border-gray-300 text-gray-700 hover:bg-gray-50 relative items-center px-4 py-2 border text-sm font-medium dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600 transition-colors duration-200 ease-in-out">
            3
          </a>
        </li>
        <li>
          <span class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300">
            ...
          </span>
        </li>
        <li>
          <a href="#" class="hidden md:inline-flex bg-white border-gray-300 text-gray-700 hover:bg-gray-50 relative items-center px-4 py-2 border text-sm font-medium dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600 transition-colors duration-200 ease-in-out">
            8
          </a>
        </li>
        <li>
          <a href="#" class="bg-white border-gray-300 text-gray-700 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600 transition-colors duration-200 ease-in-out">
            9
          </a>
        </li>
        <li>
          <a href="#" class="bg-white border-gray-300 text-gray-700 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600 transition-colors duration-200 ease-in-out">
            10
          </a>
        </li>
        <li>
          <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 focus:z-20 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-400 dark:hover:bg-gray-600 transition-colors duration-200 ease-in-out">
            <span class="sr-only">Next</span>
            <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
              <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10l-3.293-3.293a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
            </svg>
          </a>
        </li>
      </ul>
    </div>
  </div>
</nav>

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

ビジネス環境に適したシンプルでクリーンで活気のあるタグクラウドコンポーネントで、予約/予約システム用に特別に設計されています。レスポンシブで、ダークモードのサポートが含まれています。

開けるプレビュー

                <div class="p-4 sm:p-6 lg:p-8 bg-white dark:bg-gray-900 rounded-lg shadow-lg max-w-4xl mx-auto font-sans">
  <h2 class="text-2xl sm:text-3xl font-bold text-gray-800 dark:text-white mb-6 text-center">Popular Categories & Services</h2>
  <div class="flex flex-wrap justify-center gap-3 sm:gap-4">
    <button class="px-4 py-2 sm:px-5 sm:py-2.5 rounded-full bg-blue-600 hover:bg-blue-700 text-white text-sm sm:text-base font-medium shadow-md transition duration-300 ease-in-out transform hover:-translate-y-0.5 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75 dark:bg-blue-700 dark:hover:bg-blue-800">
      Consultation
    </button>
    <button class="px-4 py-2 sm:px-5 sm:py-2.5 rounded-full bg-purple-600 hover:bg-purple-700 text-white text-sm sm:text-base font-medium shadow-md transition duration-300 ease-in-out transform hover:-translate-y-0.5 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-75 dark:bg-purple-700 dark:hover:bg-purple-800">
      Meeting
    </button>
    <button class="px-4 py-2 sm:px-5 sm:py-2.5 rounded-full bg-green-600 hover:bg-green-700 text-white text-sm sm:text-base font-medium shadow-md transition duration-300 ease-in-out transform hover:-translate-y-0.5 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-75 dark:bg-green-700 dark:hover:bg-green-800">
      Webinar
    </button>
    <button class="px-4 py-2 sm:px-5 sm:py-2.5 rounded-full bg-yellow-600 hover:bg-yellow-700 text-white text-sm sm:text-base font-medium shadow-md transition duration-300 ease-in-out transform hover:-translate-y-0.5 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-opacity-75 dark:bg-yellow-700 dark:hover:bg-yellow-800">
      Workshop
    </button>
    <button class="px-4 py-2 sm:px-5 sm:py-2.5 rounded-full bg-red-600 hover:bg-red-700 text-white text-sm sm:text-base font-medium shadow-md transition duration-300 ease-in-out transform hover:-translate-y-0.5 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-75 dark:bg-red-700 dark:hover:bg-red-800">
      Demonstration
    </button>
    <button class="px-4 py-2 sm:px-5 sm:py-2.5 rounded-full bg-orange-600 hover:bg-orange-700 text-white text-sm sm:text-base font-medium shadow-md transition duration-300 ease-in-out transform hover:-translate-y-0.5 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-opacity-75 dark:bg-orange-700 dark:hover:bg-orange-800">
      Strategy Session
    </button>
    <button class="px-4 py-2 sm:px-5 sm:py-2.5 rounded-full bg-teal-600 hover:bg-teal-700 text-white text-sm sm:text-base font-medium shadow-md transition duration-300 ease-in-out transform hover:-translate-y-0.5 focus:outline-none focus:ring-2 focus:ring-teal-500 focus:ring-opacity-75 dark:bg-teal-700 dark:hover:bg-teal-800">
      Training
    </button>
    <button class="px-4 py-2 sm:px-5 sm:py-2.5 rounded-full bg-pink-600 hover:bg-pink-700 text-white text-sm sm:text-base font-medium shadow-md transition duration-300 ease-in-out transform hover:-translate-y-0.5 focus:outline-none focus:ring-2 focus:ring-pink-500 focus:ring-opacity-75 dark:bg-pink-700 dark:hover:bg-pink-800">
      Support Call
    </button>
  </div>
</div>

1 ... 69 70 71 72 73 ... 335

検索コンポーネント

カテゴリ

すべてのコンポーネント