검색 구성 요소

카테고리

구성 요소 데이터 테이블

데이터 테이블

구조화된 데이터의 테이블 형식 표시

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>

Non-Profit/Charity를 위한 Luxury/Premium Data Table

우아하고 반응이 빠른 데이터 테이블 구성 요소는 기업의 블루 톤을 사용하여 고급스러움/프리미엄 느낌으로 설계되었으며 비영리 및 자선 단체에 적합합니다. 다크 모드 지원과 작업으로 데이터를 표시하기 위한 복잡한 인터페이스가 포함되어 있습니다.

열다 미리 보기

                <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">[email protected]</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">[email protected]</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">[email protected]</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">[email protected]</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">[email protected]</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">[email protected]</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">[email protected]</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">[email protected]</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">[email protected]</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">[email protected]</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

스큐어모픽 디자인 스타일과 흙색 배합을 갖춘 단순하고 반응이 빠른 데이터 테이블로, 비즈니스/기업 웹 사이트에 적합합니다. 다크 모드 지원이 포함됩니다.

열다 미리 보기

                <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>