検索コンポーネント

カテゴリ

データテーブル

構造化データの表形式表示

ArtDecoCryptoDataテーブル

アールデコにインスパイアされた幾何学模様と類似の配色で設計された、暗号通貨/ブロックチェーンアプリケーション用のシンプルで応答性の高いデータテーブルコンポーネント。ダークモードのサポートが含まれています。

                <div class="font-sans p-4 sm:p-6 md:p-8 bg-gradient-to-br from-green-50 to-teal-50 dark:from-gray-950 dark:to-teal-950 text-gray-800 dark:text-gray-100 min-h-screen">

  <!-- Table Container -->
  <div class="max-w-6xl mx-auto bg-white dark:bg-gray-800 shadow-xl rounded-lg overflow-hidden border border-green-200 dark:border-teal-700
              transform transition-all duration-300 hover:scale-[1.01] hover:shadow-2xl">
    
    <!-- Header with Art Deco flair -->
    <div class="px-6 py-4 border-b border-green-300 dark:border-teal-700 bg-green-100 dark:bg-gray-900
                relative overflow-hidden">
      <h2 class="text-2xl sm:text-3xl font-bold text-teal-800 dark:text-teal-400 mb-2 tracking-wider uppercase font-serif">
        Crypto Asset Overview
      </h2>
      <p class="text-sm text-green-700 dark:text-teal-300">Live market data for your blockchain journey.</p>
      <!-- Art Deco geometric pattern overlay -->
      <div class="absolute inset-0 opacity-20 dark:opacity-10 pointer-events-none">
        <svg class="w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
          <path d="M0 0 L25 100 L50 0 L75 100 L100 0 Z" fill="none" stroke="currentColor" stroke-width="1" class="text-teal-600 dark:text-teal-400"/>
          <path d="M0 100 L25 0 L50 100 L75 0 L100 100 Z" fill="none" stroke="currentColor" stroke-width="1" class="text-green-600 dark:text-green-400"/>
        </svg>
      </div>
    </div>

    <!-- Table Wrapper -->
    <div class="overflow-x-auto relative">
      <table class="min-w-full divide-y divide-green-200 dark:divide-teal-700">
        <thead class="bg-green-50 dark:bg-gray-850 font-medium text-xs uppercase tracking-wider text-green-700 dark:text-teal-300">
          <tr>
            <th scope="col" class="px-6 py-3 text-left">Asset</th>
            <th scope="col" class="px-6 py-3 text-right">Price</th>
            <th scope="col" class="px-6 py-3 text-right hidden sm:table-cell">24h Change</th>
            <th scope="col" class="px-6 py-3 text-right hidden md:table-cell">Volume (24h)</th>
          </tr>
        </thead>
        <tbody class="bg-white dark:bg-gray-800 divide-y divide-green-100 dark:divide-teal-800">
          
          <!-- Row 1 -->
          <tr class="hover:bg-green-50 dark:hover:bg-teal-900 transition duration-150 ease-in-out">
            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-50">
              <div class="flex items-center">
                <img class="h-8 w-8 rounded-full object-cover mr-3 shadow-sm border border-green-200 dark:border-teal-700" src="https://picsum.photos/id/60/100/100" alt="Bitcoin Logo">
                <span class="font-semibold">Bitcoin</span>
                <span class="text-gray-500 dark:text-gray-400 ml-2 text-xs">BTC</span>
              </div>
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-right text-sm text-gray-700 dark:text-gray-200 font-mono">$65,432.10</td>
            <td class="px-6 py-4 whitespace-nowrap text-right text-sm text-green-600 dark:text-green-400 hidden sm:table-cell">+1.23%</td>
            <td class="px-6 py-4 whitespace-nowrap text-right text-sm text-gray-500 dark:text-gray-400 hidden md:table-cell">$34.5B</td>
          </tr>

          <!-- Row 2 -->
          <tr class="hover:bg-green-50 dark:hover:bg-teal-900 transition duration-150 ease-in-out">
            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-50">
              <div class="flex items-center">
                <img class="h-8 w-8 rounded-full object-cover mr-3 shadow-sm border border-green-200 dark:border-teal-700" src="https://picsum.photos/id/66/100/100" alt="Ethereum Logo">
                <span class="font-semibold">Ethereum</span>
                <span class="text-gray-500 dark:text-gray-400 ml-2 text-xs">ETH</span>
              </div>
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-right text-sm text-gray-700 dark:text-gray-200 font-mono">$3,210.50</td>
            <td class="px-6 py-4 whitespace-nowrap text-right text-sm text-red-600 dark:text-red-400 hidden sm:table-cell">-0.87%</td>
            <td class="px-6 py-4 whitespace-nowrap text-right text-sm text-gray-500 dark:text-gray-400 hidden md:table-cell">$18.2B</td>
          </tr>

          <!-- Row 3 -->
          <tr class="hover:bg-green-50 dark:hover:bg-teal-900 transition duration-150 ease-in-out">
            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-50">
              <div class="flex items-center">
                <img class="h-8 w-8 rounded-full object-cover mr-3 shadow-sm border border-green-200 dark:border-teal-700" src="https://picsum.photos/id/67/100/100" alt="Cardano Logo">
                <span class="font-semibold">Cardano</span>
                <span class="text-gray-500 dark:text-gray-400 ml-2 text-xs">ADA</span>
              </div>
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-right text-sm text-gray-700 dark:text-gray-200 font-mono">$0.4567</td>
            <td class="px-6 py-4 whitespace-nowrap text-right text-sm text-green-600 dark:text-green-400 hidden sm:table-cell">+2.10%</td>
            <td class="px-6 py-4 whitespace-nowrap text-right text-sm text-gray-500 dark:text-gray-400 hidden md:table-cell">$0.5B</td>
          </tr>

          <!-- Row 4 -->
          <tr class="hover:bg-green-50 dark:hover:bg-teal-900 transition duration-150 ease-in-out">
            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-50">
              <div class="flex items-center">
                <img class="h-8 w-8 rounded-full object-cover mr-3 shadow-sm border border-green-200 dark:border-teal-700" src="https://picsum.photos/id/68/100/100" alt="Solana Logo">
                <span class="font-semibold">Solana</span>
                <span class="text-gray-500 dark:text-gray-400 ml-2 text-xs">SOL</span>
              </div>
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-right text-sm text-gray-700 dark:text-gray-200 font-mono">$145.80</td>
            <td class="px-6 py-4 whitespace-nowrap text-right text-sm text-red-600 dark:text-red-400 hidden sm:table-cell">-1.55%</td>
            <td class="px-6 py-4 whitespace-nowrap text-right text-sm text-gray-500 dark:text-gray-400 hidden md:table-cell">$1.2B</td>
          </tr>

        </tbody>
      </table>
    </div>

    <!-- Footer -->
    <div class="px-6 py-3 border-t border-green-200 dark:border-teal-700 bg-green-100 dark:bg-gray-900 text-right text-xs text-green-700 dark:text-teal-300">
      Data provided by Placeholder API. Last updated: <time datetime="2023-10-27T10:00:00Z">Oct 27, 2023</time>
    </div>

  </div>
</div>

Cyberpunk_Fashion_Data_Table

サイバーパンクの美学、落ち着いた配色、ネオンのアクセントを備えたレスポンシブデータテーブルで、ファッションや美容製品のリスティングに適しており、ダークモードのサポートとインタラクティブなホバー効果が特徴です。

開けるプレビュー

                <div class="font-['Electrolize'] bg-gray-950 text-gray-300 min-h-screen p-4 sm:p-8 dark:bg-gray-950 dark:text-gray-300">
  <div class="container mx-auto max-w-7xl relative">
    <!-- Neon Border Effect -->
    <div class="absolute inset-0 bg-gradient-to-br from-purple-600 via-pink-600 to-red-500 opacity-20 filter blur-xl rounded-xl animate-pulse-slow"></div>

    <div class="relative bg-gray-900 rounded-xl shadow-lg border border-purple-800 dark:bg-gray-800 dark:border-purple-900 overflow-hidden">
      <div class="p-4 sm:p-6 bg-gray-800 border-b border-purple-700 dark:bg-gray-700 dark:border-purple-800 flex flex-col sm:flex-row justify-between items-center">
        <h2 class="text-2xl sm:text-3xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-neon-purple to-neon-pink mb-4 sm:mb-0">Product Catalog // <span class="text-purple-400 font-normal text-xl sm:text-2xl">[LIVE]</span></h2>
        <div class="flex space-x-2">
          <button class="px-4 py-2 bg-purple-700 text-white rounded-md text-sm sm:text-base hover:bg-purple-600 transition duration-300 transform hover:scale-105 border border-purple-500 shadow-md shadow-purple-900/50">+</button>
          <button class="px-4 py-2 bg-pink-700 text-white rounded-md text-sm sm:text-base hover:bg-pink-600 transition duration-300 transform hover:scale-105 border border-pink-500 shadow-md shadow-pink-900/50">~</button>
          <button class="px-4 py-2 bg-red-700 text-white rounded-md text-sm sm:text-base hover:bg-red-600 transition duration-300 transform hover:scale-105 border border-red-500 shadow-md shadow-red-900/50">x</button>
        </div>
      </div>

      <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-purple-800 dark:divide-purple-900">
          <thead class="bg-gray-850 dark:bg-gray-750">
            <tr>
              <th scope="col" class="px-4 py-3 sm:px-6 sm:py-4 text-left text-xs font-semibold uppercase tracking-wider text-purple-400 dark:text-purple-500 border-b border-purple-700">
                <input type="checkbox" class="form-checkbox h-4 w-4 text-neon-pink border-purple-600 rounded-sm focus:ring-neon-pink bg-gray-700">
              </th>
              <th scope="col" class="px-4 py-3 sm:px-6 sm:py-4 text-left text-xs font-semibold uppercase tracking-wider text-pink-400 dark:text-pink-500 border-b border-purple-700">
                Product ID
              </th>
              <th scope="col" class="px-4 py-3 sm:px-6 sm:py-4 text-left text-xs font-semibold uppercase tracking-wider text-neon-purple dark:text-neon-purple border-b border-purple-700">
                Image
              </th>
              <th scope="col" class="px-4 py-3 sm:px-6 sm:py-4 text-left text-xs font-semibold uppercase tracking-wider text-neon-pink dark:text-neon-pink border-b border-purple-700">
                Name
              </th>
              <th scope="col" class="px-4 py-3 sm:px-6 sm:py-4 text-left text-xs font-semibold uppercase tracking-wider text-neon-purple dark:text-neon-purple border-b border-purple-700">
                Category
              </th>
              <th scope="col" class="px-4 py-3 sm:px-6 sm:py-4 text-left text-xs font-semibold uppercase tracking-wider text-neon-pink dark:text-neon-pink border-b border-purple-700">
                Price
              </th>
              <th scope="col" class="px-4 py-3 sm:px-6 sm:py-4 text-left text-xs font-semibold uppercase tracking-wider text-neon-purple dark:text-neon-purple border-b border-purple-700">
                Status
              </th>
              <th scope="col" class="relative px-4 py-3 sm:px-6 sm:py-4 border-b border-purple-700">
                <span class="sr-only">Actions</span>
              </th>
            </tr>
          </thead>
          <tbody class="divide-y divide-purple-900 bg-gray-900 dark:bg-gray-800">
            <!-- Row 1 -->
            <tr class="hover:bg-purple-900/30 transition duration-200">
              <td class="px-4 py-4 sm:px-6 sm:py-4 whitespace-nowrap text-sm">
                <input type="checkbox" class="form-checkbox h-4 w-4 text-neon-pink border-purple-600 rounded-sm focus:ring-neon-pink bg-gray-700">
              </td>
              <td class="px-4 py-4 sm:px-6 sm:py-4 whitespace-nowrap text-sm text-gray-400 font-mono">#2C4B7E</td>
              <td class="px-4 py-4 sm:px-6 sm:py-4 whitespace-nowrap">
                <div class="flex-shrink-0 w-12 h-12 overflow-hidden rounded-md border border-purple-700">
                  <img class="w-full h-full object-cover" src="https://picsum.photos/id/1018/60/60" alt="Product Image">
                </div>
              </td>
              <td class="px-4 py-4 sm:px-6 sm:py-4 whitespace-nowrap text-sm font-medium text-pink-300 transition-colors duration-200 hover:text-pink-400">Cybernetic Visor 3.0</td>
              <td class="px-4 py-4 sm:px-6 sm:py-4 whitespace-nowrap text-sm text-purple-300">Accessories</td>
              <td class="px-4 py-4 sm:px-6 sm:py-4 whitespace-nowrap text-sm text-green-400 font-bold">$120.99</td>
              <td class="px-4 py-4 sm:px-6 sm:py-4 whitespace-nowrap text-sm">
                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-900 text-green-300 border border-green-700">In Stock</span>
              </td>
              <td class="px-4 py-4 sm:px-6 sm:py-4 whitespace-nowrap text-right text-sm font-medium">
                <a href="#" class="text-neon-pink hover:text-neon-purple mr-2 transition duration-200 font-bold">Edit</a>
                <a href="#" class="text-red-500 hover:text-red-400 transition duration-200 font-bold">Delete</a>
              </td>
            </tr>
            <!-- Row 2 -->
            <tr class="hover:bg-purple-900/30 transition duration-200">
              <td class="px-4 py-4 sm:px-6 sm:py-4 whitespace-nowrap text-sm">
                <input type="checkbox" class="form-checkbox h-4 w-4 text-neon-pink border-purple-600 rounded-sm focus:ring-neon-pink bg-gray-700">
              </td>
              <td class="px-4 py-4 sm:px-6 sm:py-4 whitespace-nowrap text-sm text-gray-400 font-mono">#1E9F6A</td>
              <td class="px-4 py-4 sm:px-6 sm:py-4 whitespace-nowrap">
                <div class="flex-shrink-0 w-12 h-12 overflow-hidden rounded-md border border-purple-700">
                  <img class="w-full h-full object-cover" src="https://picsum.photos/id/1020/60/60" alt="Product Image">
                </div>
              </td>
              <td class="px-4 py-4 sm:px-6 sm:py-4 whitespace-nowrap text-sm font-medium text-pink-300 transition-colors duration-200 hover:text-pink-400">Chromium Jacket</td>
              <td class="px-4 py-4 sm:px-6 sm:py-4 whitespace-nowrap text-sm text-purple-300">Apparel</td>
              <td class="px-4 py-4 sm:px-6 sm:py-4 whitespace-nowrap text-sm text-green-400 font-bold">$349.00</td>
              <td class="px-4 py-4 sm:px-6 sm:py-4 whitespace-nowrap text-sm">
                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-900 text-green-300 border border-green-700">In Stock</span>
              </td>
              <td class="px-4 py-4 sm:px-6 sm:py-4 whitespace-nowrap text-right text-sm font-medium">
                <a href="#" class="text-neon-pink hover:text-neon-purple mr-2 transition duration-200 font-bold">Edit</a>
                <a href="#" class="text-red-500 hover:text-red-400 transition duration-200 font-bold">Delete</a>
              </td>
            </tr>
            <!-- Row 3 -->
            <tr class="hover:bg-purple-900/30 transition duration-200">
              <td class="px-4 py-4 sm:px-6 sm:py-4 whitespace-nowrap text-sm">
                <input type="checkbox" class="form-checkbox h-4 w-4 text-neon-pink border-purple-600 rounded-sm focus:ring-neon-pink bg-gray-700">
              </td>
              <td class="px-4 py-4 sm:px-6 sm:py-4 whitespace-nowrap text-sm text-gray-400 font-mono">#5D3C8F</td>
              <td class="px-4 py-4 sm:px-6 sm:py-4 whitespace-nowrap">
                <div class="flex-shrink-0 w-12 h-12 overflow-hidden rounded-md border border-purple-700">
                  <img class="w-full h-full object-cover" src="https://picsum.photos/id/1025/60/60" alt="Product Image">
                </div>
              </td>
              <td class="px-4 py-4 sm:px-6 sm:py-4 whitespace-nowrap text-sm font-medium text-pink-300 transition-colors duration-200 hover:text-pink-400">Quantum Beauty Serum</td>
              <td class="px-4 py-4 sm:px-6 sm:py-4 whitespace-nowrap text-sm text-purple-300">Beauty</td>
              <td class="px-4 py-4 sm:px-6 sm:py-4 whitespace-nowrap text-sm text-yellow-400 font-bold">$85.50</td>
              <td class="px-4 py-4 sm:px-6 sm:py-4 whitespace-nowrap text-sm">
                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-900 text-yellow-300 border border-yellow-700">Low Stock</span>
              </td>
              <td class="px-4 py-4 sm:px-6 sm:py-4 whitespace-nowrap text-right text-sm font-medium">
                <a href="#" class="text-neon-pink hover:text-neon-purple mr-2 transition duration-200 font-bold">Edit</a>
                <a href="#" class="text-red-500 hover:text-red-400 transition duration-200 font-bold">Delete</a>
              </td>
            </tr>
            <!-- Row 4 -->
            <tr class="hover:bg-purple-900/30 transition duration-200">
              <td class="px-4 py-4 sm:px-6 sm:py-4 whitespace-nowrap text-sm">
                <input type="checkbox" class="form-checkbox h-4 w-4 text-neon-pink border-purple-600 rounded-sm focus:ring-neon-pink bg-gray-700">
              </td>
              <td class="px-4 py-4 sm:px-6 sm:py-4 whitespace-nowrap text-sm text-gray-400 font-mono">#7F1A0B</td>
              <td class="px-4 py-4 sm:px-6 sm:py-4 whitespace-nowrap">
                <div class="flex-shrink-0 w-12 h-12 overflow-hidden rounded-md border border-purple-700">
                  <img class="w-full h-full object-cover" src="https://picsum.photos/id/1027/60/60" alt="Product Image">
                </div>
              </td>
              <td class="px-4 py-4 sm:px-6 sm:py-4 whitespace-nowrap text-sm font-medium text-pink-300 transition-colors duration-200 hover:text-pink-400">Neo-Tokyo Boots</td>
              <td class="px-4 py-4 sm:px-6 sm:py-4 whitespace-nowrap text-sm text-purple-300">Footwear</td>
              <td class="px-4 py-4 sm:px-6 sm:py-4 whitespace-nowrap text-sm text-green-400 font-bold">$210.00</td>
              <td class="px-4 py-4 sm:px-6 sm:py-4 whitespace-nowrap text-sm">
                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-900 text-red-300 border border-red-700">Discontinued</span>
              </td>
              <td class="px-4 py-4 sm:px-6 sm:py-4 whitespace-nowrap text-right text-sm font-medium">
                <a href="#" class="text-neon-pink hover:text-neon-purple mr-2 transition duration-200 font-bold">Edit</a>
                <a href="#" class="text-red-500 hover:text-red-400 transition duration-200 font-bold">Delete</a>
              </td>
            </tr>
            <!-- Row 5 -->
            <tr class="hover:bg-purple-900/30 transition duration-200">
              <td class="px-4 py-4 sm:px-6 sm:py-4 whitespace-nowrap text-sm">
                <input type="checkbox" class="form-checkbox h-4 w-4 text-neon-pink border-purple-600 rounded-sm focus:ring-neon-pink bg-gray-700">
              </td>
              <td class="px-4 py-4 sm:px-6 sm:py-4 whitespace-nowrap text-sm text-gray-400 font-mono">#A32B9C</td>
              <td class="px-4 py-4 sm:px-6 sm:py-4 whitespace-nowrap">
                <div class="flex-shrink-0 w-12 h-12 overflow-hidden rounded-md border border-purple-700">
                  <img class="w-full h-full object-cover" src="https://picsum.photos/id/1035/60/60" alt="Product Image">
                </div>
              </td>
              <td class="px-4 py-4 sm:px-6 sm:py-4 whitespace-nowrap text-sm font-medium text-pink-300 transition-colors duration-200 hover:text-pink-400">Aura Glo Lip gloss</td>
              <td class="px-4 py-4 sm:px-6 sm:py-4 whitespace-nowrap text-sm text-purple-300">Cosmetics</td>
              <td class="px-4 py-4 sm:px-6 sm:py-4 whitespace-nowrap text-sm text-green-400 font-bold">$29.99</td>
              <td class="px-4 py-4 sm:px-6 sm:py-4 whitespace-nowrap text-sm">
                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-900 text-green-300 border border-green-700">In Stock</span>
              </td>
              <td class="px-4 py-4 sm:px-6 sm:py-4 whitespace-nowrap text-right text-sm font-medium">
                <a href="#" class="text-neon-pink hover:text-neon-purple mr-2 transition duration-200 font-bold">Edit</a>
                <a href="#" class="text-red-500 hover:text-red-400 transition duration-200 font-bold">Delete</a>
              </td>
            </tr>
          </tbody>
        </table>
      </div>

      <div class="p-4 sm:p-6 bg-gray-800 border-t border-purple-700 dark:bg-gray-700 dark:border-purple-800 flex justify-between items-center text-sm">
        <div class="text-gray-400">Showing 1 to 5 of 120 Products</div>
        <div class="flex space-x-1">
          <button class="px-3 py-1 bg-gray-700 text-gray-400 rounded-md hover:bg-purple-800 hover:text-white transition duration-200">
            <svg class="h-4 w-4" fill="currentColor" viewBox="0 0 20 20">
              <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>
          </button>
          <button class="px-3 py-1 bg-purple-700 text-white rounded-md hover:bg-purple-600 transition duration-200">1</button>
          <button class="px-3 py-1 bg-gray-700 text-gray-400 rounded-md hover:bg-purple-800 hover:text-white transition duration-200">2</button>
          <button class="px-3 py-1 bg-gray-700 text-gray-400 rounded-md hover:bg-purple-800 hover:text-white transition duration-200">3</button>
          <button class="px-3 py-1 bg-gray-700 text-gray-400 rounded-md hover:bg-purple-800 hover:text-white transition duration-200">
            <svg class="h-4 w-4" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
            </svg>
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
  /* Custom font import for Electrolize */
  @import url('https://fonts.googleapis.com/css2?family=Electrolize&display=swap');

  /* Custom properties for neon colors */
  .text-neon-pink {
    color: #FF69B4; /* Hot Pink */
  }
  .dark .text-neon-pink {
    color: #FF5DAA; /* Slightly brighter for dark mode */
  }

  .text-neon-purple {
    color: #BF00FF; /* Electric Purple */
  }
  .dark .text-neon-purple {
    color: #D400FF; /* Slightly brighter for dark mode */
  }

  .bg-gradient-to-r.from-neon-purple.to-neon-pink {
    background-image: linear-gradient(to right, #BF00FF, #FF69B4);
  }

  /* Animation for the background blur effect */
  @keyframes pulse-slow {
    0%, 100% { opacity: 0.2; transform: scale(1); }
    50% { opacity: 0.3; transform: scale(1.02); }
  }

  .animate-pulse-slow {
    animation: pulse-slow 6s infinite ease-in-out;
  }

  /* Tailwind checkbox custom styles */
  input[type="checkbox"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: inline-block;
    vertical-align: middle;
    background-origin: border-box;
    user-select: none;
    flex-shrink: 0;
    height: 1rem;
    width: 1rem;
    color: #FF69B4; /* Default neon pink */
    background-color: #4B5563; /* Gray-700 for background */
    border: 1px solid #7C3AED; /* Purple-600 */
    border-radius: 0.125rem; /* Rounded-sm */
    transition: background-color 0.2s, border-color 0.2s;
  }

  input[type="checkbox"]:checked {
    background-color: currentColor; /* Use the color set by text-neon-pink */
    border-color: currentColor;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
  }

  input[type="checkbox"]:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--tw-ring-offset-color, transparent), 0 0 0 4px #FF69B4;
    border-color: #FF69B4;
  }

  .dark input[type="checkbox"] {
    background-color: #374151; /* Darker gray for dark mode */
    border-color: #9333ea; /* Darker purple for dark mode */
  }

  .dark input[type="checkbox"]:focus {
    box-shadow: 0 0 0 2px var(--tw-ring-offset-color, transparent), 0 0 0 4px #FF5DAA;
    border-color: #FF5DAA;
  }

</style>

非営利団体/慈善団体向けのラグジュアリー/プレミアムデータテーブル

エレガントで応答性の高いデータテーブルコンポーネントは、企業のブルートーンを使用して豪華/プレミアムな雰囲気で設計されており、非営利団体や慈善団体に適しています。ダークモードのサポートと、アクションを含むデータを表示するための複雑なインターフェイスが含まれています。

開けるプレビュー

                <div class="font-sans bg-gray-100 text-gray-900 dark:bg-gray-900 dark:text-gray-100 p-4 sm:p-8 rounded-xl shadow-lg transition-colors duration-300">
  <div class="max-w-7xl mx-auto">
    <div class="flex flex-col sm:flex-row items-center justify-between mb-6">
      <h2 class="text-3xl font-extrabold text-blue-800 dark:text-blue-300 mb-4 sm:mb-0">Donation Impact Dashboard</h2>
      <div class="flex space-x-3">
        <button class="px-4 py-2 bg-blue-700 text-white rounded-lg hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 dark:bg-blue-600 dark:hover:bg-blue-700 transition-colors duration-300">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline-block mr-2" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L9 10.586V3a1 1 0 112 0v7.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd" />
          </svg>
          Export Data
        </button>
        <button class="px-4 py-2 border border-blue-700 text-blue-700 rounded-lg hover:bg-blue-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 dark:border-blue-400 dark:text-blue-400 dark:hover:bg-gray-700 transition-colors duration-300">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline-block mr-2" viewBox="0 0 20 20" fill="currentColor">
            <path d="M10 4a2 2 0 00-2 2v2H6a2 2 0 00-2 2v8a2 2 0 002 2h8a2 2 0 002-2v-8a2 2 0 00-2-2h-2V6a2 2 0 00-2-2zM6 10h8v8H6v-8zm4-4h2v2h-2V6z" />
          </svg>
          Add New Impact
        </button>
      </div>
    </div>

    <div class="mb-6 flex flex-col sm:flex-row items-center justify-between space-y-4 sm:space-y-0 sm:space-x-4">
      <div class="relative w-full sm:w-1/3">
        <input type="text" placeholder="Search donations..." class="w-full px-4 py-2 pl-10 rounded-lg border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-sm focus:ring-blue-500 focus:border-blue-500 transition-colors duration-300">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" viewBox="0 0 20 20" fill="currentColor">
          <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
        </svg>
      </div>
      <div class="flex flex-col sm:flex-row w-full sm:w-auto space-y-4 sm:space-y-0 sm:space-x-4">
        <select class="w-full sm:w-auto px-4 py-2 border border-gray-300 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-sm focus:ring-blue-500 focus:border-blue-500 transition-colors duration-300">
          <option>Filter by Program</option>
          <option>Education</option>
          <option>Healthcare</option>
          <option>Community Dev</option>
        </select>
        <select class="w-full sm:w-auto px-4 py-2 border border-gray-300 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-sm focus:ring-blue-500 focus:border-blue-500 transition-colors duration-300">
          <option>Sort by Date</option>
          <option>Latest</option>
          <option>Oldest</option>
          <option>Amount (High)</option>
          <option>Amount (Low)</option>
        </select>
      </div>
    </div>

    <div class="overflow-x-auto rounded-lg shadow-xl border border-gray-200 dark:border-gray-800">
      <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
        <thead class="bg-blue-600 dark:bg-blue-900 text-white">
          <tr>
            <th scope="col" class="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider">
              Donor
            </th>
            <th scope="col" class="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider">
              Amount
            </th>
            <th scope="col" class="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider">
              Date
            </th>
            <th scope="col" class="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider">
              Program
            </th>
            <th scope="col" class="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider">
              Status
            </th>
            <th scope="col" class="relative px-6 py-3">
              <span class="sr-only">Actions</span>
            </th>
          </tr>
        </thead>
        <tbody class="bg-white divide-y divide-gray-200 dark:bg-gray-800 dark:divide-gray-700">

          <!-- Row 1 -->
          <tr>
            <td class="px-6 py-4 whitespace-nowrap">
              <div class="flex items-center">
                <div class="flex-shrink-0 h-10 w-10">
                  <img class="h-10 w-10 rounded-full object-cover" src="https://randomuser.me/api/portraits/women/68.jpg" alt="">
                </div>
                <div class="ml-4">
                  <div class="text-sm font-medium text-gray-900 dark:text-gray-100">Alice Johnson</div>
                  <div class="text-sm text-gray-500 dark:text-gray-400">alice.j@example.com</div>
                </div>
              </div>
            </td>
            <td class="px-6 py-4 whitespace-nowrap">
              <div class="text-sm text-gray-900 dark:text-gray-100 font-semibold">$5,000</div>
            </td>
            <td class="px-6 py-4 whitespace-nowrap">
              <div class="text-sm text-gray-500 dark:text-gray-400">2023-11-15</div>
            </td>
            <td class="px-6 py-4 whitespace-nowrap">
              <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-800 dark:text-green-100">
                Education
              </span>
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
              Completed
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
              <a href="#" class="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-300 mr-3">View</a>
              <a href="#" class="text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-300">Delete</a>
            </td>
          </tr>

          <!-- Row 2 -->
          <tr>
            <td class="px-6 py-4 whitespace-nowrap">
              <div class="flex items-center">
                <div class="flex-shrink-0 h-10 w-10">
                  <img class="h-10 w-10 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/32.jpg" alt="">
                </div>
                <div class="ml-4">
                  <div class="text-sm font-medium text-gray-900 dark:text-gray-100">Brendan Smith</div>
                  <div class="text-sm text-gray-500 dark:text-gray-400">brendan.s@example.com</div>
                </div>
              </div>
            </td>
            <td class="px-6 py-4 whitespace-nowrap">
              <div class="text-sm text-gray-900 dark:text-gray-100 font-semibold">$10,000</div>
            </td>
            <td class="px-6 py-4 whitespace-nowrap">
              <div class="text-sm text-gray-500 dark:text-gray-400">2023-11-10</div>
            </td>
            <td class="px-6 py-4 whitespace-nowrap">
              <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800 dark:bg-blue-800 dark:text-blue-100">
                Healthcare
              </span>
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
              Completed
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
              <a href="#" class="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-300 mr-3">View</a>
              <a href="#" class="text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-300">Delete</a>
            </td>
          </tr>

          <!-- Row 3 -->
          <tr>
            <td class="px-6 py-4 whitespace-nowrap">
              <div class="flex items-center">
                <div class="flex-shrink-0 h-10 w-10">
                  <img class="h-10 w-10 rounded-full object-cover" src="https://randomuser.me/api/portraits/women/12.jpg" alt="">
                </div>
                <div class="ml-4">
                  <div class="text-sm font-medium text-gray-900 dark:text-gray-100">Catherine Davis</div>
                  <div class="text-sm text-gray-500 dark:text-gray-400">cathy.d@example.com</div>
                </div>
              </div>
            </td>
            <td class="px-6 py-4 whitespace-nowrap">
              <div class="text-sm text-gray-900 dark:text-gray-100 font-semibold">$750</div>
            </td>
            <td class="px-6 py-4 whitespace-nowrap">
              <div class="text-sm text-gray-500 dark:text-gray-400">2023-11-08</div>
            </td>
            <td class="px-6 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-800 dark:text-orange-100">
                Community Dev
              </span>
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
              Pending
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
              <a href="#" class="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-300 mr-3">View</a>
              <a href="#" class="text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-300">Delete</a>
            </td>
          </tr>

          <!-- Row 4 -->
          <tr>
            <td class="px-6 py-4 whitespace-nowrap">
              <div class="flex items-center">
                <div class="flex-shrink-0 h-10 w-10">
                  <img class="h-10 w-10 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/45.jpg" alt="">
                </div>
                <div class="ml-4">
                  <div class="text-sm font-medium text-gray-900 dark:text-gray-100">David Lee</div>
                  <div class="text-sm text-gray-500 dark:text-gray-400">david.l@example.com</div>
                </div>
              </div>
            </td>
            <td class="px-6 py-4 whitespace-nowrap">
              <div class="text-sm text-gray-900 dark:text-gray-100 font-semibold">$2,500</div>
            </td>
            <td class="px-6 py-4 whitespace-nowrap">
              <div class="text-sm text-gray-500 dark:text-gray-400">2023-11-01</div>
            </td>
            <td class="px-6 py-4 whitespace-nowrap">
              <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-800 dark:text-green-100">
                Education
              </span>
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
              Completed
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
              <a href="#" class="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-300 mr-3">View</a>
              <a href="#" class="text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-300">Delete</a>
            </td>
          </tr>

          <!-- Row 5 -->
          <tr>
            <td class="px-6 py-4 whitespace-nowrap">
              <div class="flex items-center">
                <div class="flex-shrink-0 h-10 w-10">
                  <img class="h-10 w-10 rounded-full object-cover" src="https://randomuser.me/api/portraits/women/90.jpg" alt="">
                </div>
                <div class="ml-4">
                  <div class="text-sm font-medium text-gray-900 dark:text-gray-100">Ella Fitzgerald</div>
                  <div class="text-sm text-gray-500 dark:text-gray-400">ella.f@example.com</div>
                </div>
              </div>
            </td>
            <td class="px-6 py-4 whitespace-nowrap">
              <div class="text-sm text-gray-900 dark:text-gray-100 font-semibold">$1,200</div>
            </td>
            <td class="px-6 py-4 whitespace-nowrap">
              <div class="text-sm text-gray-500 dark:text-gray-400">2023-10-25</div>
            </td>
            <td class="px-6 py-4 whitespace-nowrap">
              <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800 dark:bg-blue-800 dark:text-blue-100">
                Healthcare
              </span>
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
              Completed
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
              <a href="#" class="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-300 mr-3">View</a>
              <a href="#" class="text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-300">Delete</a>
            </td>
          </tr>

        </tbody>
      </table>
    </div>

    <nav class="mt-6 flex items-center justify-between" aria-label="Pagination">
      <div class="flex flex-1 justify-between sm:hidden">
        <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-700 text-sm font-medium rounded-md text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700">
          Previous
        </a>
        <a href="#" class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-700 text-sm font-medium rounded-md text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700">
          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">5</span>
            of
            <span class="font-medium">100</span>
            results
          </p>
        </div>
        <div>
          <nav class="relative z-0 inline-flex -space-x-px rounded-md shadow-sm" 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-800 text-sm font-medium text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700">
              <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="z-10 bg-blue-50 border-blue-500 text-blue-600 dark:bg-blue-700 dark:border-blue-600 dark:text-white relative inline-flex items-center px-4 py-2 border text-sm font-medium">
              1
            </a>
            <a href="#" class="bg-white dark:bg-gray-800 border-gray-300 dark:border-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
              2
            </a>
            <a href="#" class="bg-white dark:bg-gray-800 border-gray-300 dark:border-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
              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-800 text-sm font-medium text-gray-700 dark:text-gray-300">
              ...
            </span>
            <a href="#" class="bg-white dark:bg-gray-800 border-gray-300 dark:border-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
              9
            </a>
            <a href="#" class="bg-white dark:bg-gray-800 border-gray-300 dark:border-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
              10
            </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-800 text-sm font-medium text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700">
              <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 10 7.293 6.707a1 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>
      </div>
    </nav>
  </div>
</div>

ヘルスケアデータテーブル

ヘルスケアアプリケーションに適した、企業の青い色調の応答性が高く、ミニマリストのデータテーブルコンポーネント。ダークモードのサポート、検索、および改ページ位置の自動修正が含まれます。アクセシビリティのためにセマンティックHTMLを利用します。

開けるプレビュー

                <div class="p-4 sm:p-6 lg:p-8 bg-gray-50 dark:bg-gray-900 min-h-screen font-sans text-gray-800 dark:text-gray-200">
  <div class="max-w-7xl mx-auto bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden ring-1 ring-blue-100 dark:ring-blue-900">
    <div class="px-4 py-5 sm:px-6">
      <h2 class="text-xl sm:text-2xl font-bold leading-tight text-blue-800 dark:text-blue-200">Patient Records</h2>
      <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">A list of all patients including their vital information and status.</p>
      <div class="mt-4 flex flex-col sm:flex-row items-center justify-between space-y-3 sm:space-y-0 sm:space-x-4">
        <div class="relative flex-grow w-full sm:w-auto">
          <input type="text" placeholder="Search records..." class="block w-full pl-10 pr-2 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400">
          <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
            <svg class="h-5 w-5 text-gray-400 dark:text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
              <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
            </svg>
          </div>
        </div>
        <button type="button" class="w-full sm:w-auto px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-800">
          <svg class="-ml-1 mr-2 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="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clip-rule="evenodd" />
          </svg>
          Add Patient
        </button>
      </div>
    </div>

    <div class="overflow-x-auto">
      <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
        <thead class="bg-blue-50 dark:bg-gray-700">
          <tr>
            <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-blue-700 uppercase tracking-wider dark:text-blue-300">
              Patient Name
            </th>
            <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-blue-700 uppercase tracking-wider dark:text-blue-300">
              ID
            </th>
            <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-blue-700 uppercase tracking-wider dark:text-blue-300">
              Last Visit
            </th>
            <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-blue-700 uppercase tracking-wider dark:text-blue-300">
              Condition
            </th>
            <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-blue-700 uppercase tracking-wider dark:text-blue-300">
              Status
            </th>
            <th scope="col" class="relative px-4 py-3">
              <span class="sr-only">Actions</span>
            </th>
          </tr>
        </thead>
        <tbody class="bg-white divide-y divide-gray-200 dark:bg-gray-800 dark:divide-gray-700">
          <!-- Row 1 -->
          <tr>
            <td class="px-4 py-4 whitespace-nowrap">
              <div class="flex items-center">
                <div class="flex-shrink-0 h-10 w-10">
                  <img class="h-10 w-10 rounded-full object-cover" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Patient avatar">
                </div>
                <div class="ml-4">
                  <div class="text-sm font-medium text-gray-900 dark:text-white">Jane Cooper</div>
                  <div class="text-sm text-gray-500 dark:text-gray-400">jane.cooper@example.com</div>
                </div>
              </div>
            </td>
            <td class="px-4 py-4 whitespace-nowrap">
              <div class="text-sm text-gray-900 dark:text-white">PT-00123</div>
            </td>
            <td class="px-4 py-4 whitespace-nowrap">
              <div class="text-sm text-gray-900 dark:text-white">2023-10-26</div>
            </td>
            <td class="px-4 py-4 whitespace-nowrap">
              <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800 dark:bg-red-800 dark:text-red-100">
                Hypertension
              </span>
            </td>
            <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
              <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-800 dark:text-green-100">
                Active
              </span>
            </td>
            <td class="px-4 py-4 whitespace-nowrap text-right text-sm font-medium">
              <a href="#" class="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-200 mr-2">View</a>
              <a href="#" class="text-indigo-600 hover:text-indigo-900 dark:text-indigo-400 dark:hover:text-indigo-200">Edit</a>
            </td>
          </tr>

          <!-- Row 2 -->
          <tr>
            <td class="px-4 py-4 whitespace-nowrap">
              <div class="flex items-center">
                <div class="flex-shrink-0 h-10 w-10">
                  <img class="h-10 w-10 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/45.jpg" alt="Patient avatar">
                </div>
                <div class="ml-4">
                  <div class="text-sm font-medium text-gray-900 dark:text-white">Cameron Williamson</div>
                  <div class="text-sm text-gray-500 dark:text-gray-400">cameron.w@example.com</div>
                </div>
              </div>
            </td>
            <td class="px-4 py-4 whitespace-nowrap">
              <div class="text-sm text-gray-900 dark:text-white">PT-00124</div>
            </td>
            <td class="px-4 py-4 whitespace-nowrap">
              <div class="text-sm text-gray-900 dark:text-white">2023-09-15</div>
            </td>
            <td class="px-4 py-4 whitespace-nowrap">
              <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800 dark:bg-yellow-800 dark:text-yellow-100">
                Diabetes
              </span>
            </td>
            <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
              <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-800 dark:text-green-100">
                Active
              </span>
            </td>
            <td class="px-4 py-4 whitespace-nowrap text-right text-sm font-medium">
              <a href="#" class="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-200 mr-2">View</a>
              <a href="#" class="text-indigo-600 hover:text-indigo-900 dark:text-indigo-400 dark:hover:text-indigo-200">Edit</a>
            </td>
          </tr>

          <!-- Row 3 -->
          <tr>
            <td class="px-4 py-4 whitespace-nowrap">
              <div class="flex items-center">
                <div class="flex-shrink-0 h-10 w-10">
                  <img class="h-10 w-10 rounded-full object-cover" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Patient avatar">
                </div>
                <div class="ml-4">
                  <div class="text-sm font-medium text-gray-900 dark:text-white">Esther Howard</div>
                  <div class="text-sm text-gray-500 dark:text-gray-400">esther.h@example.com</div>
                </div>
              </div>
            </td>
            <td class="px-4 py-4 whitespace-nowrap">
              <div class="text-sm text-gray-900 dark:text-white">PT-00125</div>
            </td>
            <td class="px-4 py-4 whitespace-nowrap">
              <div class="text-sm text-gray-900 dark:text-white">2023-11-01</div>
            </td>
            <td class="px-4 py-4 whitespace-nowrap">
              <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800 dark:bg-blue-800 dark:text-blue-100">
                Asthma
              </span>
            </td>
            <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
              <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-orange-100 text-orange-800 dark:bg-orange-800 dark:text-orange-100">
                Pending
              </span>
            </td>
            <td class="px-4 py-4 whitespace-nowrap text-right text-sm font-medium">
              <a href="#" class="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-200 mr-2">View</a>
              <a href="#" class="text-indigo-600 hover:text-indigo-900 dark:text-indigo-400 dark:hover:text-indigo-200">Edit</a>
            </td>
          </tr>

          <!-- Row 4 -->
          <tr>
            <td class="px-4 py-4 whitespace-nowrap">
              <div class="flex items-center">
                <div class="flex-shrink-0 h-10 w-10">
                  <img class="h-10 w-10 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/3.jpg" alt="Patient avatar">
                </div>
                <div class="ml-4">
                  <div class="text-sm font-medium text-gray-900 dark:text-white">Ralph Edwards</div>
                  <div class="text-sm text-gray-500 dark:text-gray-400">ralph.e@example.com</div>
                </div>
              </div>
            </td>
            <td class="px-4 py-4 whitespace-nowrap">
              <div class="text-sm text-gray-900 dark:text-white">PT-00126</div>
            </td>
            <td class="px-4 py-4 whitespace-nowrap">
              <div class="text-sm text-gray-900 dark:text-white">2023-08-20</div>
            </td>
            <td class="px-4 py-4 whitespace-nowrap">
              <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-800 dark:text-green-100">
                Flu
              </span>
            </td>
            <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
              <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300">
                Inactive
              </span>
            </td>
            <td class="px-4 py-4 whitespace-nowrap text-right text-sm font-medium">
              <a href="#" class="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-200 mr-2">View</a>
              <a href="#" class="text-indigo-600 hover:text-indigo-900 dark:text-indigo-400 dark:hover:text-indigo-200">Edit</a>
            </td>
          </tr>

          <!-- Row 5 -->
          <tr>
            <td class="px-4 py-4 whitespace-nowrap">
              <div class="flex items-center">
                <div class="flex-shrink-0 h-10 w-10">
                  <img class="h-10 w-10 rounded-full object-cover" src="https://randomuser.me/api/portraits/women/55.jpg" alt="Patient avatar">
                </div>
                <div class="ml-4">
                  <div class="text-sm font-medium text-gray-900 dark:text-white">Annette Black</div>
                  <div class="text-sm text-gray-500 dark:text-gray-400">annette.b@example.com</div>
                </div>
              </div>
            </td>
            <td class="px-4 py-4 whitespace-nowrap">
              <div class="text-sm text-gray-900 dark:text-white">PT-00127</div>
            </td>
            <td class="px-4 py-4 whitespace-nowrap">
              <div class="text-sm text-gray-900 dark:text-white">2023-10-05</div>
            </td>
            <td class="px-4 py-4 whitespace-nowrap">
              <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800 dark:bg-red-800 dark:text-red-100">
                Appendicitis
              </span>
            </td>
            <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
              <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800 dark:bg-red-800 dark:text-red-100">
                Critical
              </span>
            </td>
            <td class="px-4 py-4 whitespace-nowrap text-right text-sm font-medium">
              <a href="#" class="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-200 mr-2">View</a>
              <a href="#" class="text-indigo-600 hover:text-indigo-900 dark:text-indigo-400 dark:hover:text-indigo-200">Edit</a>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <div class="px-4 py-3 sm:px-6 flex items-center justify-between flex-wrap border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800">
      <div class="flex-1 flex justify-between sm:hidden">
        <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 text-sm font-medium rounded-md text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600">
          Previous
        </a>
        <a href="#" class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 text-sm font-medium rounded-md text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600">
          Next
        </a>
      </div>
      <div class="hidden sm:flex-1 sm:flex 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">5</span>
            of
            <span class="font-medium">10</span>
            results
          </p>
        </div>
        <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-600 bg-white dark:bg-gray-700 text-sm font-medium text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-600">
              <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="z-10 bg-blue-50 dark:bg-blue-900 border-blue-500 text-blue-600 dark:text-blue-200 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
              1
            </a>
            <a href="#" class="bg-white dark:bg-gray-700 border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
              2
            </a>
            <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-sm font-medium text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-600">
              <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 10 7.293 6.707a1 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>
      </div>
    </div>
  </div>
</div>

水彩芸術データテーブル

ソフトな水彩画/芸術的なデザインスタイルと、キャンディーのような甘い色を備えたレスポンシブデータテーブルコンポーネントで、非営利団体/慈善団体に適しています。ダークモードのサポートが含まれており、視覚的な魅力と読みやすさに重点を置いた適度な複雑さを示しています。

開けるプレビュー

                <div class="p-4 sm:p-6 lg:p-8 bg-gradient-to-br from-purple-50 via-pink-50 to-rose-50 dark:from-purple-950 dark:via-pink-950 dark:to-rose-950 min-h-screen font-sans antialiased text-gray-800 dark:text-gray-200">

  <div class="max-w-7xl mx-auto backdrop-blur-sm bg-white/70 dark:bg-gray-800/70 shadow-xl rounded-3xl overflow-hidden ring-2 ring-pink-300 dark:ring-pink-700 p-4 sm:p-6 lg:p-8">
    <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between mb-6 pb-4 border-b border-pink-200 dark:border-pink-800">
      <div>
        <h2 class="text-3xl sm:text-4xl font-extrabold text-pink-600 dark:text-pink-400 leading-tight drop-shadow-md tracking-wide">Donation Impact Dashboard</h2>
        <p class="mt-2 text-lg text-rose-500 dark:text-rose-300 font-medium">See the difference our community makes, presented with a touch of art.</p>
      </div>
      <button class="mt-4 sm:mt-0 px-6 py-3 rounded-full bg-gradient-to-r from-pink-500 to-rose-500 text-white dark:from-pink-600 dark:to-rose-600 hover:from-pink-600 dark:hover:from-pink-700 hover:to-rose-600 dark:hover:to-rose-700 transition-all duration-300 shadow-lg hover:shadow-xl font-bold tracking-wide text-lg border-2 border-white/50 dark:border-gray-900/50 transform hover:-translate-y-0.5 focus:outline-none focus:ring-4 focus:ring-rose-300 dark:focus:ring-rose-700 flex items-center justify-center space-x-2">
        <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="M12 6v6m0 0v6m0-6h6m-6 0H6"></path></svg>
        <span>Add New Record</span>
      </button>
    </div>

    <!-- Search and Filter Section -->
    <div class="mb-6 flex flex-col sm:flex-row items-center space-y-4 sm:space-y-0 sm:space-x-4">
      <div class="relative w-full sm:w-2/3">
        <input type="text" placeholder="Search by Donor, Cause, or Date..." class="w-full pl-10 pr-4 py-3 rounded-full bg-pink-100 dark:bg-gray-700 border-2 border-pink-200 dark:border-pink-700 text-gray-700 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-pink-400 dark:focus:ring-pink-600 transition-all duration-300 placeholder-pink-400 dark:placeholder-pink-500 shadow-inner">
        <svg class="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-pink-400 dark:text-pink-500" 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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
      </div>
      <select class="w-full sm:w-1/3 appearance-none px-4 py-3 rounded-full bg-pink-100 dark:bg-gray-700 border-2 border-pink-200 dark:border-pink-700 text-gray-700 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-pink-400 dark:focus:ring-pink-600 transition-all duration-300 shadow-inner cursor-pointer">
        <option class="bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200" value="all">Filter by Cause</option>
        <option class="bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200" value="education">Education</option>
        <option class="bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200" value="health">Health & Wellness</option>
        <option class="bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200" value="environment">Environment</option>
        <option class="bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200" value="animals">Animal Welfare</option>
      </select>
    </div>

    <!-- Table Section -->
    <div class="overflow-x-auto rounded-2xl ring-1 ring-pink-200 dark:ring-pink-800 shadow-xl">
      <table class="min-w-full divide-y divide-pink-200 dark:divide-pink-800 table-auto">
        <thead class="bg-pink-200/80 dark:bg-pink-900/80 sticky top-0 backdrop-blur-sm">
          <tr>
            <th scope="col" class="px-4 py-3 text-left text-xs sm:text-sm font-semibold text-pink-700 dark:text-pink-300 uppercase tracking-wider rounded-tl-2xl">Donor</th>
            <th scope="col" class="px-4 py-3 text-left text-xs sm:text-sm font-semibold text-pink-700 dark:text-pink-300 uppercase tracking-wider">Amount</th>
            <th scope="col" class="px-4 py-3 text-left text-xs sm:text-sm font-semibold text-pink-700 dark:text-pink-300 uppercase tracking-wider">Cause</th>
            <th scope="col" class="px-4 py-3 text-left text-xs sm:text-sm font-semibold text-pink-700 dark:text-pink-300 uppercase tracking-wider">Date</th>
            <th scope="col" class="px-4 py-3 text-left text-xs sm:text-sm font-semibold text-pink-700 dark:text-pink-300 uppercase tracking-wider hidden sm:table-cell">Status</th>
            <th scope="col" class="px-4 py-3 text-right text-xs sm:text-sm font-semibold text-pink-700 dark:text-pink-300 uppercase tracking-wider rounded-tr-2xl">Actions</th>
          </tr>
        </thead>
        <tbody class="bg-white dark:bg-gray-800 divide-y divide-pink-100 dark:divide-pink-800">
          <!-- Row 1 -->
          <tr class="hover:bg-pink-50 dark:hover:bg-gray-700 transition duration-150 ease-in-out">
            <td class="px-4 py-3 whitespace-nowrap overflow-hidden text-sm sm:text-base font-medium text-gray-900 dark:text-gray-100 flex items-center">
              <img class="h-8 w-8 rounded-full object-cover mr-3 ring-1 ring-pink-300 dark:ring-pink-600" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Donor Avatar">
              <span>Olivia Chen</span>
            </td>
            <td class="px-4 py-3 whitespace-nowrap text-sm sm:text-base text-green-600 dark:text-green-400 font-semibold">$500.00</td>
            <td class="px-4 py-3 whitespace-nowrap text-sm sm:text-base text-gray-700 dark:text-gray-300">
              <span class="inline-flex px-3 py-1 text-xs font-semibold leading-tight rounded-full bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300">Education</span>
            </td>
            <td class="px-4 py-3 whitespace-nowrap text-sm sm:text-base text-gray-600 dark:text-gray-400">2023-10-26</td>
            <td class="px-4 py-3 whitespace-nowrap hidden sm:table-cell">
              <span class="px-3 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300">
                Completed
              </span>
            </td>
            <td class="px-4 py-3 whitespace-nowrap text-right text-sm sm:text-base font-medium">
              <a href="#" class="text-pink-600 dark:text-pink-400 hover:text-pink-900 dark:hover:text-pink-300 transition-colors mx-1 sm:mx-2">Edit</a>
              <a href="#" class="text-rose-600 dark:text-rose-400 hover:text-rose-900 dark:hover:text-rose-300 transition-colors mx-1 sm:mx-2">Delete</a>
            </td>
          </tr>
          <!-- Row 2 -->
          <tr class="hover:bg-pink-50 dark:hover:bg-gray-700 transition duration-150 ease-in-out">
            <td class="px-4 py-3 whitespace-nowrap overflow-hidden text-sm sm:text-base font-medium text-gray-900 dark:text-gray-100 flex items-center">
              <img class="h-8 w-8 rounded-full object-cover mr-3 ring-1 ring-pink-300 dark:ring-pink-600" src="https://randomuser.me/api/portraits/men/45.jpg" alt="Donor Avatar">
              <span>Marcus Lee</span>
            </td>
            <td class="px-4 py-3 whitespace-nowrap text-sm sm:text-base text-green-600 dark:text-green-400 font-semibold">$1,200.00</td>
            <td class="px-4 py-3 whitespace-nowrap text-sm sm:text-base text-gray-700 dark:text-gray-300">
              <span class="inline-flex px-3 py-1 text-xs font-semibold leading-tight rounded-full bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-300">Health</span>
            </td>
            <td class="px-4 py-3 whitespace-nowrap text-sm sm:text-base text-gray-600 dark:text-gray-400">2023-10-25</td>
            <td class="px-4 py-3 whitespace-nowrap hidden sm:table-cell">
              <span class="px-3 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300">
                Completed
              </span>
            </td>
            <td class="px-4 py-3 whitespace-nowrap text-right text-sm sm:text-base font-medium">
              <a href="#" class="text-pink-600 dark:text-pink-400 hover:text-pink-900 dark:hover:text-pink-300 transition-colors mx-1 sm:mx-2">Edit</a>
              <a href="#" class="text-rose-600 dark:text-rose-400 hover:text-rose-900 dark:hover:text-rose-300 transition-colors mx-1 sm:mx-2">Delete</a>
            </td>
          </tr>
          <!-- Row 3 -->
          <tr class="hover:bg-pink-50 dark:hover:bg-gray-700 transition duration-150 ease-in-out">
            <td class="px-4 py-3 whitespace-nowrap overflow-hidden text-sm sm:text-base font-medium text-gray-900 dark:text-gray-100 flex items-center">
              <img class="h-8 w-8 rounded-full object-cover mr-3 ring-1 ring-pink-300 dark:ring-pink-600" src="https://randomuser.me/api/portraits/women/6.jpg" alt="Donor Avatar">
              <span>Sarah Project</span>
            </td>
            <td class="px-4 py-3 whitespace-nowrap text-sm sm:text-base text-green-600 dark:text-green-400 font-semibold">$250.00</td>
            <td class="px-4 py-3 whitespace-nowrap text-sm sm:text-base text-gray-700 dark:text-gray-300">
              <span class="inline-flex px-3 py-1 text-xs font-semibold leading-tight rounded-full bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300">Environment</span>
            </td>
            <td class="px-4 py-3 whitespace-nowrap text-sm sm:text-base text-gray-600 dark:text-gray-400">2023-10-24</td>
            <td class="px-4 py-3 whitespace-nowrap hidden sm:table-cell">
              <span class="px-3 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300">
                Completed
              </span>
            </td>
            <td class="px-4 py-3 whitespace-nowrap text-right text-sm sm:text-base font-medium">
              <a href="#" class="text-pink-600 dark:text-pink-400 hover:text-pink-900 dark:hover:text-pink-300 transition-colors mx-1 sm:mx-2">Edit</a>
              <a href="#" class="text-rose-600 dark:text-rose-400 hover:text-rose-900 dark:hover:text-rose-300 transition-colors mx-1 sm:mx-2">Delete</a>
            </td>
          </tr>
          <!-- Row 4 -->
          <tr class="hover:bg-pink-50 dark:hover:bg-gray-700 transition duration-150 ease-in-out">
            <td class="px-4 py-3 whitespace-nowrap overflow-hidden text-sm sm:text-base font-medium text-gray-900 dark:text-gray-100 flex items-center">
              <img class="h-8 w-8 rounded-full object-cover mr-3 ring-1 ring-pink-300 dark:ring-pink-600" src="https://randomuser.me/api/portraits/men/82.jpg" alt="Donor Avatar">
              <span>David Kim</span>
            </td>
            <td class="px-4 py-3 whitespace-nowrap text-sm sm:text-base text-green-600 dark:text-green-400 font-semibold">$75.00</td>
            <td class="px-4 py-3 whitespace-nowrap text-sm sm:text-base text-gray-700 dark:text-gray-300">
              <span class="inline-flex px-3 py-1 text-xs font-semibold leading-tight rounded-full bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-300">Animal Welfare</span>
            </td>
            <td class="px-4 py-3 whitespace-nowrap text-sm sm:text-base text-gray-600 dark:text-gray-400">2023-10-23</td>
            <td class="px-4 py-3 whitespace-nowrap hidden sm:table-cell">
              <span class="px-3 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300">
                Completed
              </span>
            </td>
            <td class="px-4 py-3 whitespace-nowrap text-right text-sm sm:text-base font-medium">
              <a href="#" class="text-pink-600 dark:text-pink-400 hover:text-pink-900 dark:hover:text-pink-300 transition-colors mx-1 sm:mx-2">Edit</a>
              <a href="#" class="text-rose-600 dark:text-rose-400 hover:text-rose-900 dark:hover:text-rose-300 transition-colors mx-1 sm:mx-2">Delete</a>
            </td>
          </tr>
          <!-- Row 5 -->
          <tr class="hover:bg-pink-50 dark:hover:bg-gray-700 transition duration-150 ease-in-out">
            <td class="px-4 py-3 whitespace-nowrap overflow-hidden text-sm sm:text-base font-medium text-gray-900 dark:text-gray-100 flex items-center">
              <img class="h-8 w-8 rounded-full object-cover mr-3 ring-1 ring-pink-300 dark:ring-pink-600" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Donor Avatar">
              <span>Emily White</span>
            </td>
            <td class="px-4 py-3 whitespace-nowrap text-sm sm:text-base text-green-600 dark:text-green-400 font-semibold">$150.00</td>
            <td class="px-4 py-3 whitespace-nowrap text-sm sm:text-base text-gray-700 dark:text-gray-300">
              <span class="inline-flex px-3 py-1 text-xs font-semibold leading-tight rounded-full bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300">Education</span>
            </td>
            <td class="px-4 py-3 whitespace-nowrap text-sm sm:text-base text-gray-600 dark:text-gray-400">2023-10-22</td>
            <td class="px-4 py-3 whitespace-nowrap hidden sm:table-cell">
              <span class="px-3 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300">
                Completed
              </span>
            </td>
            <td class="px-4 py-3 whitespace-nowrap text-right text-sm sm:text-base font-medium">
              <a href="#" class="text-pink-600 dark:text-pink-400 hover:text-pink-900 dark:hover:text-pink-300 transition-colors mx-1 sm:mx-2">Edit</a>
              <a href="#" class="text-rose-600 dark:text-rose-400 hover:text-rose-900 dark:hover:text-rose-300 transition-colors mx-1 sm:mx-2">Delete</a>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- Pagination -->
    <nav class="mt-8 flex items-center justify-between flex-col sm:flex-row space-y-4 sm:space-y-0 text-sm sm:text-base">
      <div class="text-gray-700 dark:text-gray-300">
        Showing <span class="font-medium">1</span> to <span class="font-medium">5</span> of <span class="font-medium">50</span> results
      </div>
      <div class="inline-flex -space-x-px rounded-full shadow-md ring-1 ring-pink-200 dark:ring-pink-800 overflow-hidden">
        <a href="#" class="relative inline-flex items-center px-4 py-2 font-semibold text-gray-600 dark:text-gray-300 bg-white dark:bg-gray-800 ring-1 ring-inset ring-pink-100 dark:ring-pink-800 hover:bg-pink-50 dark:hover:bg-gray-700 rounded-l-full transition-all duration-200">
          Previous
        </a>
        <a href="#" aria-current="page" class="relative z-10 inline-flex items-center px-4 py-2 font-semibold text-white bg-gradient-to-r from-pink-500 to-rose-500 dark:from-pink-600 dark:to-rose-600 focus:outline-none focus:ring-2 focus:ring-rose-300 dark:focus:ring-rose-700 transition-all duration-200">
          1
        </a>
        <a href="#" class="relative inline-flex items-center px-4 py-2 font-semibold text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 ring-1 ring-inset ring-pink-100 dark:ring-pink-800 hover:bg-pink-50 dark:hover:bg-gray-700 transition-all duration-200">
          2
        </a>
        <a href="#" class="relative hidden sm:inline-flex items-center px-4 py-2 font-semibold text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 ring-1 ring-inset ring-pink-100 dark:ring-pink-800 hover:bg-pink-50 dark:hover:bg-gray-700 transition-all duration-200">
          3
        </a>
        <span class="relative inline-flex items-center px-4 py-2 font-semibold text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 ring-1 ring-inset ring-pink-100 dark:ring-pink-800">...</span>
        <a href="#" class="relative inline-flex items-center px-4 py-2 font-semibold text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 ring-1 ring-inset ring-pink-100 dark:ring-pink-800 hover:bg-pink-50 dark:hover:bg-gray-700 transition-all duration-200">
          10
        </a>
        <a href="#" class="relative inline-flex items-center px-4 py-2 font-semibold text-gray-600 dark:text-gray-300 bg-white dark:bg-gray-800 ring-1 ring-inset ring-pink-100 dark:ring-pink-800 hover:bg-pink-50 dark:hover:bg-gray-700 rounded-r-full transition-all duration-200">
          Next
        </a>
      </div>
    </nav>

  </div>
</div>

Skeuomorphic_Earth_Tone_Data_Table

スキューモーフィックなデザインスタイルとアーストーンの配色を備えたシンプルでレスポンシブなデータテーブルで、ビジネス/企業のWebサイトに適しています。ダークモードのサポートが含まれています。

開けるプレビュー

                <div class="p-4 sm:p-6 md:p-8 bg-gradient-to-br from-stone-100 to-stone-200 dark:from-stone-900 dark:to-stone-950 min-h-screen font-sans">
  <div class="max-w-7xl mx-auto">
    <div class="bg-stone-300 dark:bg-stone-800 shadow-md shadow-stone-400/50 dark:shadow-stone-950/50 rounded-xl p-4 sm:p-6 mb-8
                border-t border-l border-stone-200 dark:border-stone-700
                border-b border-r border-stone-400 dark:border-stone-900
                inset-shadow-light dark:inset-shadow-dark">
      <h2 class="text-2xl sm:text-3xl font-bold text-stone-800 dark:text-stone-200 mb-4
                 text-shadow-light dark:text-shadow-dark">
        Project Overview
      </h2>
      <p class="text-stone-700 dark:text-stone-300 text-sm sm:text-base leading-relaxed">
        This table displays key metrics and status for ongoing projects. Each row represents a project with its current status, budget, and completion rate.
      </p>
    </div>

    <div class="overflow-x-auto relative rounded-xl shadow-lg shadow-stone-400/50 dark:shadow-stone-950/50
                border-t border-l border-stone-200 dark:border-stone-700
                border-b border-r border-stone-400 dark:border-stone-900
                inset-shadow-light dark:inset-shadow-dark">
      <table class="w-full text-sm text-left text-stone-500 dark:text-stone-400">
        <thead class="text-xs text-stone-700 uppercase bg-gradient-to-b from-stone-300 to-stone-400 dark:from-stone-700 dark:to-stone-800
                      rounded-t-lg
                      border-b border-stone-500 dark:border-stone-900
                      table-header-shadow">
          <tr>
            <th scope="col" class="py-3 px-4 sm:px-6 tracking-wider text-stone-800 dark:text-stone-200 font-semibold">
              Project Name
            </th>
            <th scope="col" class="py-3 px-4 sm:px-6 tracking-wider text-stone-800 dark:text-stone-200 font-semibold hidden md:table-cell">
              Manager
            </th>
            <th scope="col" class="py-3 px-4 sm:px-6 tracking-wider text-stone-800 dark:text-stone-200 font-semibold">
              Status
            </th>
            <th scope="col" class="py-3 px-4 sm:px-6 tracking-wider text-stone-800 dark:text-stone-200 font-semibold hidden sm:table-cell">
              Budget
            </th>
            <th scope="col" class="py-3 px-4 sm:px-6 tracking-wider text-stone-800 dark:text-stone-200 font-semibold hidden lg:table-cell">
              Completion
            </th>
            <th scope="col" class="py-3 px-4 sm:px-6 tracking-wider text-stone-800 dark:text-stone-200 font-semibold">
              Actions
            </th>
          </tr>
        </thead>
        <tbody>
          <tr class="bg-stone-100 dark:bg-stone-850 border-b border-stone-200 dark:border-stone-700
                     even:bg-stone-200 dark:even:bg-stone-900
                     hover:bg-stone-300 dark:hover:bg-stone-700 transition-colors duration-200">
            <th scope="row" class="py-4 px-4 sm:px-6 font-medium text-stone-900 dark:text-stone-100 whitespace-nowrap">
              Website Redesign
            </th>
            <td class="py-4 px-4 sm:px-6 text-stone-700 dark:text-stone-300 hidden md:table-cell">
              <div class="flex items-center space-x-2">
                <img class="w-6 h-6 rounded-full inline-block border border-stone-400/50 dark:border-stone-600/50 shadow-sm shadow-stone-400/50" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar">
                <span>Jane Doe</span>
              </div>
            </td>
            <td class="py-4 px-4 sm:px-6">
              <span class="px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-emerald-100 text-emerald-800 dark:bg-emerald-900 dark:text-emerald-100 
                           shadow-sm-light dark:shadow-sm-dark">
                Completed
              </span>
            </td>
            <td class="py-4 px-4 sm:px-6 text-stone-700 dark:text-stone-300 hidden sm:table-cell">
              $25,000
            </td>
            <td class="py-4 px-4 sm:px-6 hidden lg:table-cell">
              <div class="w-full bg-stone-300 dark:bg-stone-700 rounded-full h-2.5 shadow-inset-light dark:shadow-inset-dark">
                <div class="bg-emerald-600 h-2.5 rounded-full" style="width: 100%"></div>
              </div>
            </td>
            <td class="py-4 px-4 sm:px-6">
              <a href="#" class="font-medium text-brown-600 dark:text-brown-400 hover:underline hover-button-inset-light dark:hover-button-inset-dark
                         px-2 py-1 rounded
                         transition-all duration-200">
                View
              </a>
            </td>
          </tr>
          <tr class="bg-stone-100 dark:bg-stone-850 border-b border-stone-200 dark:border-stone-700
                     even:bg-stone-200 dark:even:bg-stone-900
                     hover:bg-stone-300 dark:hover:bg-stone-700 transition-colors duration-200">
            <th scope="row" class="py-4 px-4 sm:px-6 font-medium text-stone-900 dark:text-stone-100 whitespace-nowrap">
              Mobile App Development
            </th>
            <td class="py-4 px-4 sm:px-6 text-stone-700 dark:text-stone-300 hidden md:table-cell">
              <div class="flex items-center space-x-2">
                <img class="w-6 h-6 rounded-full inline-block border border-stone-400/50 dark:border-stone-600/50 shadow-sm shadow-stone-400/50" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
                <span>John Smith</span>
              </div>
            </td>
            <td class="py-4 px-4 sm:px-6">
              <span class="px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-amber-100 text-amber-800 dark:bg-amber-900 dark:text-amber-100
                           shadow-sm-light dark:shadow-sm-dark">
                In Progress
              </span>
            </td>
            <td class="py-4 px-4 sm:px-6 text-stone-700 dark:text-stone-300 hidden sm:table-cell">
              $75,000
            </td>
            <td class="py-4 px-4 sm:px-6 hidden lg:table-cell">
              <div class="w-full bg-stone-300 dark:bg-stone-700 rounded-full h-2.5 shadow-inset-light dark:shadow-inset-dark">
                <div class="bg-amber-500 h-2.5 rounded-full" style="width: 60%"></div>
              </div>
            </td>
            <td class="py-4 px-4 sm:px-6">
              <a href="#" class="font-medium text-brown-600 dark:text-brown-400 hover:underline hover-button-inset-light dark:hover-button-inset-dark
                         px-2 py-1 rounded
                         transition-all duration-200">
                View
              </a>
            </td>
          </tr>
          <tr class="bg-stone-100 dark:bg-stone-850 border-b border-stone-200 dark:border-stone-700
                     even:bg-stone-200 dark:even:bg-stone-900
                     hover:bg-stone-300 dark:hover:bg-stone-700 transition-colors duration-200">
            <th scope="row" class="py-4 px-4 sm:px-6 font-medium text-stone-900 dark:text-stone-100 whitespace-nowrap">
              Marketing Campaign
            </th>
            <td class="py-4 px-4 sm:px-6 text-stone-700 dark:text-stone-300 hidden md:table-cell">
              <div class="flex items-center space-x-2">
                <img class="w-6 h-6 rounded-full inline-block border border-stone-400/50 dark:border-stone-600/50 shadow-sm shadow-stone-400/50" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar">
                <span>Emily White</span>
              </div>
            </td>
            <td class="py-4 px-4 sm:px-6">
              <span class="px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-100
                           shadow-sm-light dark:shadow-sm-dark">
                Planned
              </span>
            </td>
            <td class="py-4 px-4 sm:px-6 text-stone-700 dark:text-stone-300 hidden sm:table-cell">
              $30,000
            </td>
            <td class="py-4 px-4 sm:px-6 hidden lg:table-cell">
              <div class="w-full bg-stone-300 dark:bg-stone-700 rounded-full h-2.5 shadow-inset-light dark:shadow-inset-dark">
                <div class="bg-blue-500 h-2.5 rounded-full" style="width: 10%"></div>
              </div>
            </td>
            <td class="py-4 px-4 sm:px-6">
              <a href="#" class="font-medium text-brown-600 dark:text-brown-400 hover:underline hover-button-inset-light dark:hover-button-inset-dark
                         px-2 py-1 rounded
                         transition-all duration-200">
                View
              </a>
            </td>
          </tr>
          <tr class="bg-stone-100 dark:bg-stone-850 border-b border-stone-200 dark:border-stone-700
                     even:bg-stone-200 dark:even:bg-stone-900
                     hover:bg-stone-300 dark:hover:bg-stone-700 transition-colors duration-200">
            <th scope="row" class="py-4 px-4 sm:px-6 font-medium text-stone-900 dark:text-stone-100 whitespace-nowrap">
              Q1 Financial Report
            </th>
            <td class="py-4 px-4 sm:px-6 text-stone-700 dark:text-stone-300 hidden md:table-cell">
              <div class="flex items-center space-x-2">
                <img class="w-6 h-6 rounded-full inline-block border border-stone-400/50 dark:border-stone-600/50 shadow-sm shadow-stone-400/50" src="https://randomuser.me/api/portraits/men/88.jpg" alt="Avatar">
                <span>David Lee</span>
              </div>
            </td>
            <td class="py-4 px-4 sm:px-6">
              <span class="px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-amber-100 text-amber-800 dark:bg-amber-900 dark:text-amber-100
                           shadow-sm-light dark:shadow-sm-dark">
                In Progress
              </span>
            </td>
            <td class="py-4 px-4 sm:px-6 text-stone-700 dark:text-stone-300 hidden sm:table-cell">
              $10,000
            </td>
            <td class="py-4 px-4 sm:px-6 hidden lg:table-cell">
              <div class="w-full bg-stone-300 dark:bg-stone-700 rounded-full h-2.5 shadow-inset-light dark:shadow-inset-dark">
                <div class="bg-amber-500 h-2.5 rounded-full" style="width: 85%"></div>
              </div>
            </td>
            <td class="py-4 px-4 sm:px-6">
              <a href="#" class="font-medium text-brown-600 dark:text-brown-400 hover:underline hover-button-inset-light dark:hover-button-inset-dark
                         px-2 py-1 rounded
                         transition-all duration-200">
                View
              </a>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

<style>
  /* Base for defining custom CSS variables for skeuomorphic effects */
  :root {
    --shadow-light-color-1: rgba(255, 255, 255, 0.7);
    --shadow-light-color-2: rgba(0, 0, 0, 0.2);
    --shadow-dark-color-1: rgba(0, 0, 0, 0.7);
    --shadow-dark-color-2: rgba(255, 255, 255, 0.05);
  }

  /* Light mode shadows */
  .inset-shadow-light {
    box-shadow: inset -2px -2px 5px var(--shadow-light-color-1),
                inset 2px 2px 5px var(--shadow-light-color-2);
  }
  .shadow-sm-light {
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1), -1px -1px 3px rgba(255, 255, 255, 0.5);
  }
  .shadow-inset-light {
    box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.1), inset -1px -1px 2px rgba(255, 255, 255, 0.5);
  }
  .text-shadow-light {
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.7), -1px -1px 2px rgba(0, 0, 0, 0.1);
  }
  .table-header-shadow {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06),
                0 2px 2px rgba(255, 255, 255, 0.5) inset;
  }
  .hover-button-inset-light {
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2), -2px -2px 4px rgba(255, 255, 255, 0.7);
  }
  .hover-button-inset-light:hover {
    box-shadow: inset 2px 2px 5px var(--shadow-light-color-2),
                inset -2px -2px 5px var(--shadow-light-color-1);
  }

  /* Dark mode shadows using custom properties */
  .dark .inset-shadow-dark {
    box-shadow: inset -2px -2px 5px var(--shadow-dark-color-1),
                inset 2px 2px 5px var(--shadow-dark-color-2);
  }
  .dark .shadow-sm-dark {
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8), -1px -1px 3px rgba(255, 255, 255, 0.05);
  }
  .dark .shadow-inset-dark {
    box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.8), inset -1px -1px 2px rgba(255, 255, 255, 0.05);
  }
  .dark .text-shadow-dark {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7), -1px -1px 2px rgba(255, 255, 255, 0.1);
  }
  .dark .table-header-shadow {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -1px rgba(0, 0, 0, 0.3),
                0 2px 2px rgba(0, 0, 0, 0.7) inset;
  }
  .dark .hover-button-inset-dark {
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8), -2px -2px 4px rgba(255, 255, 255, 0.05);
  }
  .dark .hover-button-inset-dark:hover {
    box-shadow: inset 2px 2px 5px var(--shadow-dark-color-2),
                inset -2px -2px 5px var(--shadow-dark-color-1);
  }

  /* Define custom colors */
  .text-brown-600 {
    color: #795548; /* A warm brown */
  }
  .dark .text-brown-400 {
    color: #a1887f; /* A lighter warm brown for dark mode */
  }



</style>