検索コンポーネント

カテゴリ

コンポーネントグリッドレイアウト

グリッドレイアウト

グリッドシステムに基づくコンテンツ配置

FinancialGridWithインタラクション

金融/銀行インターフェース用のレスポンシブグリッドレイアウトコンポーネントで、高コントラストの色と微妙なホバーマイクロインタラクションが特徴です。ダークモードをサポートし、適度な複雑さに対応するように設計されています。

                <div class="p-4 sm:p-6 md:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen font-sans">
  <div class="max-w-7xl mx-auto">
    <h2 class="text-3xl sm:text-4xl font-extrabold text-blue-900 dark:text-blue-200 mb-8 text-center">
      Your Financial Overview
    </h2>

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

      <!-- Card 1: Account Balance -->
      <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl dark:hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 group relative overflow-hidden">
        <div class="absolute inset-0 bg-gradient-to-br from-blue-600 to-indigo-700 opacity-0 group-hover:opacity-10 dark:opacity-0 dark:group-hover:opacity-20 transition-opacity duration-300"></div>
        <div class="p-6 relative z-10">
          <div class="flex items-center justify-between mb-4">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100">Current Balance</h3>
            <span class="text-sm font-medium text-blue-600 dark:text-blue-400 group-hover:text-blue-700 dark:group-hover:text-blue-300 transition-colors duration-300">View Details</span>
          </div>
          <p class="text-4xl font-bold text-blue-900 dark:text-blue-500 mb-2 group-hover:scale-105 transition-transform duration-300 origin-left">$12,345.67</p>
          <p class="text-sm text-gray-500 dark:text-gray-400">Last updated: Oct 26, 2023</p>
          <div class="mt-4 flex items-center">
            <svg class="w-5 h-5 text-green-500 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
            <span class="text-xs text-gray-600 dark:text-gray-300">All accounts in good standing</span>
          </div>
        </div>
      </div>

      <!-- Card 2: Recent Transactions -->
      <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl dark:hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 group relative overflow-hidden">
        <div class="absolute inset-0 bg-gradient-to-br from-purple-600 to-pink-700 opacity-0 group-hover:opacity-10 dark:opacity-0 dark:group-hover:opacity-20 transition-opacity duration-300"></div>
        <div class="p-6 relative z-10">
          <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-4">Recent Transactions</h3>
          <ul class="space-y-3">
            <li class="flex items-center justify-between text-gray-700 dark:text-gray-300 text-sm hover:translate-x-1 transition-transform duration-200">
              <span>Starbucks Inc.</span>
              <span class="font-medium text-red-500 dark:text-red-400">-$5.25</span>
            </li>
            <li class="flex items-center justify-between text-gray-700 dark:text-gray-300 text-sm hover:translate-x-1 transition-transform duration-200">
              <span>Payroll Deposit</span>
              <span class="font-medium text-green-500 dark:text-green-400">+$2,100.00</span>
            </li>
            <li class="flex items-center justify-between text-gray-700 dark:text-gray-300 text-sm hover:translate-x-1 transition-transform duration-200">
              <span>Amazon.com</span>
              <span class="font-medium text-red-500 dark:text-red-400">-$45.99</span>
            </li>
            <li class="flex items-center justify-between text-gray-700 dark:text-gray-300 text-sm hover:translate-x-1 transition-transform duration-200">
              <span>Monthly Subscription</span>
              <span class="font-medium text-red-500 dark:text-red-400">-$12.99</span>
            </li>
          </ul>
          <a href="#" class="mt-4 inline-flex items-center text-blue-600 dark:text-blue-400 text-sm font-medium hover:underline hover:text-blue-700 dark:hover:text-blue-300 transition-colors duration-200">
            See all <svg class="ml-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><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"></path></svg>
          </a>
        </div>
      </div>

      <!-- Card 3: Savings Goals -->
      <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl dark:hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 group relative overflow-hidden">
        <div class="absolute inset-0 bg-gradient-to-br from-green-600 to-teal-700 opacity-0 group-hover:opacity-10 dark:opacity-0 dark:group-hover:opacity-20 transition-opacity duration-300"></div>
        <div class="p-6 relative z-10">
          <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-4">Savings Goals</h3>
          <div class="space-y-4">
            <div>
              <div class="flex justify-between items-center mb-1">
                <span class="text-sm text-gray-700 dark:text-gray-300">New Car</span>
                <span class="text-sm font-medium text-blue-600 dark:text-blue-400">45%</span>
              </div>
              <div class="w-full bg-gray-200 rounded-full h-2 dark:bg-gray-700">
                <div class="bg-blue-500 h-2 rounded-full transition-all duration-500 ease-out group-hover:w-[45%]" style="width: 25%;"></div>
              </div>
            </div>
            <div>
              <div class="flex justify-between items-center mb-1">
                <span class="text-sm text-gray-700 dark:text-gray-300">Down Payment</span>
                <span class="text-sm font-medium text-green-600 dark:text-green-400">78%</span>
              </div>
              <div class="w-full bg-gray-200 rounded-full h-2 dark:bg-gray-700">
                <div class="bg-green-500 h-2 rounded-full transition-all duration-500 ease-out group-hover:w-[78%]" style="width: 50%;"></div>
              </div>
            </div>
            <div>
              <div class="flex justify-between items-center mb-1">
                <span class="text-sm text-gray-700 dark:text-gray-300">Emergency Fund</span>
                <span class="text-sm font-medium text-yellow-600 dark:text-yellow-400">60%</span>
              </div>
              <div class="w-full bg-gray-200 rounded-full h-2 dark:bg-gray-700">
                <div class="bg-yellow-500 h-2 rounded-full transition-all duration-500 ease-out group-hover:w-[60%]" style="width: 30%;"></div>
              </div>
            </div>
          </div>
          <button class="mt-6 w-full py-2 px-4 rounded-lg bg-blue-600 text-white font-semibold hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-600 transition-colors duration-300 transform hover:scale-105">
            Add New Goal
          </button>
        </div>
      </div>

      <!-- Card 4: Upcoming Bills -->
      <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl dark:hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 group relative overflow-hidden md:col-span-1 lg:col-span-1">
        <div class="absolute inset-0 bg-gradient-to-br from-red-600 to-orange-700 opacity-0 group-hover:opacity-10 dark:opacity-0 dark:group-hover:opacity-20 transition-opacity duration-300"></div>
        <div class="p-6 relative z-10">
          <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-4">Upcoming Bills</h3>
          <ul class="space-y-3">
            <li class="flex items-center justify-between text-gray-700 dark:text-gray-300 text-sm hover:translate-x-1 transition-transform duration-200">
              <span>Netflix</span>
              <span class="font-medium text-red-500 dark:text-red-400">$19.99 <span class="text-xs text-gray-500 dark:text-gray-400">(Nov 1)</span></span>
            </li>
            <li class="flex items-center justify-between text-gray-700 dark:text-gray-300 text-sm hover:translate-x-1 transition-transform duration-200">
              <span>Electricity</span>
              <span class="font-medium text-red-500 dark:text-red-400">$85.50 <span class="text-xs text-gray-500 dark:text-gray-400">(Nov 5)</span></span>
            </li>
            <li class="flex items-center justify-between text-gray-700 dark:text-gray-300 text-sm hover:translate-x-1 transition-transform duration-200">
              <span>Credit Card Statement</span>
              <span class="font-medium text-red-500 dark:text-red-400">$250.00 <span class="text-xs text-gray-500 dark:text-gray-400">(Nov 10)</span></span>
            </li>
          </ul>
          <button class="mt-6 w-full py-2 px-4 rounded-lg bg-orange-600 text-white font-semibold hover:bg-orange-700 dark:bg-orange-700 dark:hover:bg-orange-600 transition-colors duration-300 transform hover:scale-105">
            Pay All Bills
          </button>
        </div>
      </div>

      <!-- Card 5: Investment Portfolio (Larger card) -->
      <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl dark:hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 group relative overflow-hidden md:col-span-2 lg:col-span-2">
        <div class="absolute inset-0 bg-gradient-to-br from-sky-600 to-cyan-700 opacity-0 group-hover:opacity-10 dark:opacity-0 dark:group-hover:opacity-20 transition-opacity duration-300"></div>
        <div class="p-6 relative z-10">
          <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-4">Investment Portfolio</h3>
          <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
            <div>
              <p class="text-2xl font-bold text-sky-900 dark:text-sky-500 group-hover:scale-105 transition-transform duration-300 origin-left">$56,789.00</p>
              <p class="text-sm text-gray-500 dark:text-gray-400">Total Value</p>
            </div>
            <div class="text-right">
              <p class="text-xl font-semibold text-green-600 dark:text-green-400 group-hover:scale-105 transition-transform duration-300 origin-right">+1.25%</p>
              <p class="text-sm text-gray-500 dark:text-gray-400">Today's Change</p>
            </div>
          </div>
          <div class="mt-6 grid grid-cols-2 lg:grid-cols-4 gap-4 text-center">
            <div class="p-3 bg-gray-50 dark:bg-gray-700 rounded-lg group-hover:scale-105 transition-transform duration-200">
              <p class="text-base font-semibold text-gray-800 dark:text-gray-100">AAPL</p>
              <p class="text-sm text-gray-600 dark:text-gray-400">150 shares</p>
              <p class="text-green-500 text-xs">+0.8%</p>
            </div>
            <div class="p-3 bg-gray-50 dark:bg-gray-700 rounded-lg group-hover:scale-105 transition-transform duration-200">
              <p class="text-base font-semibold text-gray-800 dark:text-gray-100">MSFT</p>
              <p class="text-sm text-gray-600 dark:text-gray-400">75 shares</p>
              <p class="text-red-500 text-xs">-0.2%</p>
            </div>
            <div class="p-3 bg-gray-50 dark:bg-gray-700 rounded-lg group-hover:scale-105 transition-transform duration-200">
              <p class="text-base font-semibold text-gray-800 dark:text-gray-100">GOOG</p>
              <p class="text-sm text-gray-600 dark:text-gray-400">20 shares</p>
              <p class="text-green-500 text-xs">+1.5%</p>
            </div>
            <div class="p-3 bg-gray-50 dark:bg-gray-700 rounded-lg group-hover:scale-105 transition-transform duration-200">
              <p class="text-base font-semibold text-gray-800 dark:text-gray-100">TSLA</p>
              <p class="text-sm text-gray-600 dark:text-gray-400">30 shares</p>
              <p class="text-green-500 text-xs">+2.1%</p>
            </div>
          </div>
          <a href="#" class="mt-6 inline-flex items-center text-blue-600 dark:text-blue-400 text-sm font-medium hover:underline hover:text-blue-700 dark:hover:text-blue-300 transition-colors duration-200">
            Manage Portfolio <svg class="ml-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><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"></path></svg>
          </a>
        </div>
      </div>

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

Monospace_Developer_Food_Grid_Layout

食品/レストランのWebサイト向けのシンプルなモノスペースをテーマにしたグリッドレイアウトコンポーネントで、すっきりとしたデザインとダークモードをサポートする単色の配色が特徴です。

開けるプレビュー

                <div class="font-['JetBrains_Mono',_monospace] bg-gray-50 dark:bg-gray-900 text-gray-800 dark:text-gray-200 p-4 sm:p-6 lg:p-8 min-h-screen">
  <h2 class="text-3xl sm:text-4xl font-bold mb-8 text-center text-gray-900 dark:text-gray-100 uppercase tracking-widest">
    <span class="block">/MENU/</span><span class="block text-xl sm:text-2xl mt-2 lowercase text-gray-700 dark:text-gray-300">[select]</span>
  </h2>

  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8 max-w-7xl mx-auto">

    <!-- Item 1 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden border border-gray-200 dark:border-gray-700 transition-all duration-300 hover:shadow-xl hover:scale-[1.01] hover:border-blue-400 dark:hover:border-blue-600">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/id/1080/400/300" alt="Spicy Noodles">
      <div class="p-4 sm:p-5">
        <h3 class="text-xl font-semibold mb-2 text-gray-900 dark:text-gray-100 uppercase tracking-wide">console.log('spicy_noodles');</h3>
        <p class="text-sm text-gray-600 dark:text-gray-400 mb-3">A fiery delight, perfect for those who crave a kick. Fresh noodles with chili oil and special sauce.</p>
        <div class="flex justify-between items-center">
          <span class="text-lg font-bold text-blue-600 dark:text-blue-400">$12.99;</span>
          <button class="px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white text-sm uppercase font-bold rounded-md transition duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
            add_to_cart
          </button>
        </div>
      </div>
    </div>

    <!-- Item 2 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden border border-gray-200 dark:border-gray-700 transition-all duration-300 hover:shadow-xl hover:scale-[1.01] hover:border-blue-400 dark:hover:border-blue-600">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/id/1060/400/300" alt="Vegetable Curry">
      <div class="p-4 sm:p-5">
        <h3 class="text-xl font-semibold mb-2 text-gray-900 dark:text-gray-100 uppercase tracking-wide">console.log('veg_curry');</h3>
        <p class="text-sm text-gray-600 dark:text-gray-400 mb-3">Hearty and wholesome, packed with fresh garden vegetables in a rich, aromatic sauce.</p>
        <div class="flex justify-between items-center">
          <span class="text-lg font-bold text-blue-600 dark:text-blue-400">$10.50;</span>
          <button class="px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white text-sm uppercase font-bold rounded-md transition duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
            add_to_cart
          </button>
        </div>
      </div>
    </div>

    <!-- Item 3 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden border border-gray-200 dark:border-gray-700 transition-all duration-300 hover:shadow-xl hover:scale-[1.01] hover:border-blue-400 dark:hover:border-blue-600">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/id/1/400/300" alt="Chicken Burger">
      <div class="p-4 sm:p-5">
        <h3 class="text-xl font-semibold mb-2 text-gray-900 dark:text-gray-100 uppercase tracking-wide">console.log('chicken_burger');</h3>
        <p class="text-sm text-gray-600 dark:text-gray-400 mb-3">Classic grilled chicken patty with fresh lettuce, tomato, and special burger sauce.</p>
        <div class="flex justify-between items-center">
          <span class="text-lg font-bold text-blue-600 dark:text-blue-400">$8.75;</span>
          <button class="px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white text-sm uppercase font-bold rounded-md transition duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
            add_to_cart
          </button>
        </div>
      </div>
    </div>

    <!-- Item 4 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden border border-gray-200 dark:border-gray-700 transition-all duration-300 hover:shadow-xl hover:scale-[1.01] hover:border-blue-400 dark:hover:border-blue-600">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/id/400/400/300" alt="Fresh Salad">
      <div class="p-4 sm:p-5">
        <h3 class="text-xl font-semibold mb-2 text-gray-900 dark:text-gray-100 uppercase tracking-wide">console.log('fresh_salad');</h3>
        <p class="text-sm text-gray-600 dark:text-gray-400 mb-3">Light and refreshing, a mix of seasonal greens, vibrant vegetables, and a tangy dressing.</p>
        <div class="flex justify-between items-center">
          <span class="text-lg font-bold text-blue-600 dark:text-blue-400">$7.00;</span>
          <button class="px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white text-sm uppercase font-bold rounded-md transition duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
            add_to_cart
          </button>
        </div>
      </div>
    </div>

    <!-- Item 5 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden border border-gray-200 dark:border-gray-700 transition-all duration-300 hover:shadow-xl hover:scale-[1.01] hover:border-blue-400 dark:hover:border-blue-600">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/id/10/400/300" alt="Pepperoni Pizza">
      <div class="p-4 sm:p-5">
        <h3 class="text-xl font-semibold mb-2 text-gray-900 dark:text-gray-100 uppercase tracking-wide">console.log('pepperoni_pizza');</h3>
        <p class="text-sm text-gray-600 dark:text-gray-400 mb-3">Classic pepperoni, melted cheese, and a crispy crust. A timeless favorite.</p>
        <div class="flex justify-between items-center">
          <span class="text-lg font-bold text-blue-600 dark:text-blue-400">$15.99;</span>
          <button class="px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white text-sm uppercase font-bold rounded-md transition duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
            add_to_cart
          </button>
        </div>
      </div>
    </div>

    <!-- Item 6 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden border border-gray-200 dark:border-gray-700 transition-all duration-300 hover:shadow-xl hover:scale-[1.01] hover:border-blue-400 dark:hover:border-blue-600">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/id/141/400/300" alt="Chocolate Cake">
      <div class="p-4 sm:p-5">
        <h3 class="text-xl font-semibold mb-2 text-gray-900 dark:text-gray-100 uppercase tracking-wide">console.log('chocolate_cake');</h3>
        <p class="text-sm text-gray-600 dark:text-gray-400 mb-3">Rich, decadent chocolate cake, a perfect end to any meal or a sweet treat on its own.</p>
        <div class="flex justify-between items-center">
          <span class="text-lg font-bold text-blue-600 dark:text-blue-400">$6.25;</span>
          <button class="px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white text-sm uppercase font-bold rounded-md transition duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
            add_to_cart
          </button>
        </div>
      </div>
    </div>

  </div>
</div>

Skeuomorphic_Grid_Layout_Business

ビジネス/企業のWebサイト向けの複雑でレスポンシブなグリッドレイアウトコンポーネントで、温かみのあるニュートラルカラーとダークモードのサポートを備えたスキューモーフィックなデザインスタイルが特徴です。要素は、奥行きと微妙なテクスチャで現実世界のオブジェクトを模倣します。

開けるプレビュー

                <div class="min-h-screen bg-gradient-to-br from-stone-100 to-stone-200 text-stone-800 dark:from-stone-900 dark:to-stone-950 dark:text-stone-200 p-4 sm:p-8 font-sans transition-colors duration-300">

  <!-- Skeuomorphic Top Bar / Header -->
  <header class="relative mb-8 rounded-xl bg-gradient-to-br from-stone-300 to-stone-400 dark:from-stone-700 dark:to-stone-800 p-4 sm:p-6 shadow-xl 
               hover:shadow-2xl transition-all duration-300
               before:absolute before:inset-0 before:rounded-xl before:shadow-inner before:shadow-stone-200/50 dark:before:shadow-white/5 
               after:absolute after:inset-0 after:rounded-xl after:shadow-inner after:shadow-stone-500/50 dark:after:shadow-black/20">
    <div class="flex flex-col sm:flex-row items-center justify-between z-10 relative">
      <h1 class="text-2xl sm:text-3xl font-bold tracking-tight text-stone-700 dark:text-stone-300 drop-shadow-md">Corporate Dashboard</h1>
      <div class="mt-4 sm:mt-0 flex flex-wrap gap-3">
        <button class="relative px-5 py-2 rounded-lg text-lg font-semibold text-stone-700 dark:text-stone-300 
                       bg-gradient-to-br from-stone-200 to-stone-300 dark:from-stone-600 dark:to-stone-700 
                       shadow-lg hover:shadow-xl active:shadow-inner transition-all duration-200
                       before:absolute before:inset-0 before:rounded-lg before:shadow-inner before:shadow-stone-100/50 dark:before:shadow-white/5 
                       after:absolute after:inset-0 after:rounded-lg after:shadow-inner after:shadow-stone-400/50 dark:after:shadow-black/20 
                       focus:outline-none focus:ring-2 focus:ring-stone-400 focus:ring-offset-2 focus:ring-offset-stone-50 dark:focus:ring-offset-stone-900">
          <span class="relative z-10">Reports</span>
        </button>
        <button class="relative px-5 py-2 rounded-lg text-lg font-semibold text-stone-700 dark:text-stone-300 
                       bg-gradient-to-br from-stone-200 to-stone-300 dark:from-stone-600 dark:to-stone-700 
                       shadow-lg hover:shadow-xl active:shadow-inner transition-all duration-200
                       before:absolute before:inset-0 before:rounded-lg before:shadow-inner before:shadow-stone-100/50 dark:before:shadow-white/5 
                       after:absolute after:inset-0 after:rounded-lg after:shadow-inner after:shadow-stone-400/50 dark:after:shadow-black/20 
                       focus:outline-none focus:ring-2 focus:ring-stone-400 focus:ring-offset-2 focus:ring-offset-stone-50 dark:focus:ring-offset-stone-900">
          <span class="relative z-10">Settings</span>
        </button>
      </div>
    </div>
  </header>

  <main class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 auto-rows-fr">

    <!-- Skeuomorphic Card 1 - Project Overview -->
    <section class="relative rounded-xl bg-gradient-to-br from-stone-200 to-stone-300 dark:from-stone-800 dark:to-stone-900 p-6 shadow-xl 
                    hover:shadow-2xl transition-all duration-300 
                    before:absolute before:inset-0 before:rounded-xl before:shadow-inner before:shadow-stone-100/50 dark:before:shadow-white/5 
                    after:absolute after:inset-0 after:rounded-xl after:shadow-inner after:shadow-stone-400/50 dark:after:shadow-black/20">
      <h2 class="text-xl font-semibold mb-4 text-stone-700 dark:text-stone-300 drop-shadow-sm">Project Overview</h2>
      <p class="text-stone-600 dark:text-stone-400 leading-relaxed mb-4">Track the progress of our current initiatives and upcoming milestones. Stay informed on key performance indicators.</p>
      <div class="grid grid-cols-2 gap-4">
        <div class="relative p-3 rounded-lg bg-gradient-to-br from-stone-300 to-stone-400 dark:from-stone-700 dark:to-stone-800 shadow-md 
                    before:absolute before:inset-0 before:rounded-lg before:shadow-inner before:shadow-stone-200/50 dark:before:shadow-white/5">
          <p class="text-sm text-stone-700 dark:text-stone-300 font-medium">Completed</p>
          <p class="text-2xl font-bold text-green-700 dark:text-green-400">75%</p>
        </div>
        <div class="relative p-3 rounded-lg bg-gradient-to-br from-stone-300 to-stone-400 dark:from-stone-700 dark:to-stone-800 shadow-md 
                    before:absolute before:inset-0 before:rounded-lg before:shadow-inner before:shadow-stone-200/50 dark:before:shadow-white/5">
          <p class="text-sm text-stone-700 dark:text-stone-300 font-medium">Pending</p>
          <p class="text-2xl font-bold text-amber-700 dark:text-amber-400">25%</p>
        </div>
      </div>
      <button class="relative mt-6 w-full py-2 rounded-lg text-lg font-semibold text-stone-700 dark:text-stone-300 
                     bg-gradient-to-br from-stone-300 to-stone-400 dark:from-stone-700 dark:to-stone-800 
                     shadow-md hover:shadow-lg active:shadow-inner transition-all duration-200
                     before:absolute before:inset-0 before:rounded-lg before:shadow-inner before:shadow-stone-200/50 dark:before:shadow-white/5 
                     after:absolute after:inset-0 after:rounded-lg after:shadow-inner after:shadow-stone-500/50 dark:after:shadow-black/20 
                     focus:outline-none focus:ring-2 focus:ring-stone-400 focus:ring-offset-2 focus:ring-offset-stone-50 dark:focus:ring-offset-stone-900">
        <span class="relative z-10">View Details</span>
      </button>
    </section>

    <!-- Skeuomorphic Card 2 - Team Members -->
    <section class="relative rounded-xl bg-gradient-to-br from-stone-200 to-stone-300 dark:from-stone-800 dark:to-stone-900 p-6 shadow-xl 
                    hover:shadow-2xl transition-all duration-300 
                    before:absolute before:inset-0 before:rounded-xl before:shadow-inner before:shadow-stone-100/50 dark:before:shadow-white/5 
                    after:absolute after:inset-0 after:rounded-xl after:shadow-inner after:shadow-stone-400/50 dark:after:shadow-black/20">
      <h2 class="text-xl font-semibold mb-4 text-stone-700 dark:text-stone-300 drop-shadow-sm">Team Members</h2>
      <ul class="space-y-4">
        <li class="flex items-center gap-4 relative p-3 rounded-lg bg-gradient-to-br from-stone-300 to-stone-400 dark:from-stone-700 dark:to-stone-800 shadow-md 
                    before:absolute before:inset-0 before:rounded-lg before:shadow-inner before:shadow-stone-200/50 dark:before:shadow-white/5">
          <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar of John Doe" class="w-12 h-12 rounded-full border-2 border-stone-400 dark:border-stone-600 shadow-inner-strong">
          <div>
            <p class="font-medium text-stone-700 dark:text-stone-300">John Doe</p>
            <p class="text-sm text-stone-600 dark:text-stone-400">Lead Developer</p>
          </div>
        </li>
        <li class="flex items-center gap-4 relative p-3 rounded-lg bg-gradient-to-br from-stone-300 to-stone-400 dark:from-stone-700 dark:to-stone-800 shadow-md 
                    before:absolute before:inset-0 before:rounded-lg before:shadow-inner before:shadow-stone-200/50 dark:before:shadow-white/5">
          <img src="https://randomuser.me/api/portraits/women/42.jpg" alt="Avatar of Jane Smith" class="w-12 h-12 rounded-full border-2 border-stone-400 dark:border-stone-600 shadow-inner-strong">
          <div>
            <p class="font-medium text-stone-700 dark:text-stone-300">Jane Smith</p>
            <p class="text-sm text-stone-600 dark:text-stone-400">Project Manager</p>
          </div>
        </li>
        <li class="flex items-center gap-4 relative p-3 rounded-lg bg-gradient-to-br from-stone-300 to-stone-400 dark:from-stone-700 dark:to-stone-800 shadow-md 
                    before:absolute before:inset-0 before:rounded-lg before:shadow-inner before:shadow-stone-200/50 dark:before:shadow-white/5">
          <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar of Bob Johnson" class="w-12 h-12 rounded-full border-2 border-stone-400 dark:border-stone-600 shadow-inner-strong">
          <div>
            <p class="font-medium text-stone-700 dark:text-stone-300">Bob Johnson</p>
            <p class="text-sm text-stone-600 dark:text-stone-400">UI/UX Designer</p>
          </div>
        </li>
      </ul>
    </section>

    <!-- Skeuomorphic Card 3 - Quick Links -->
    <section class="relative rounded-xl bg-gradient-to-br from-stone-200 to-stone-300 dark:from-stone-800 dark:to-stone-900 p-6 shadow-xl 
                    hover:shadow-2xl transition-all duration-300 
                    before:absolute before:inset-0 before:rounded-xl before:shadow-inner before:shadow-stone-100/50 dark:before:shadow-white/5 
                    after:absolute after:inset-0 after:rounded-xl after:shadow-inner after:shadow-stone-400/50 dark:after:shadow-black/20">
      <h2 class="text-xl font-semibold mb-4 text-stone-700 dark:text-stone-300 drop-shadow-sm">Quick Links</h2>
      <nav>
        <ul class="space-y-3">
          <li>
            <a href="#" class="relative flex items-center gap-2 py-2 px-4 rounded-lg text-lg text-stone-700 dark:text-stone-300 
                       bg-gradient-to-br from-stone-300 to-stone-400 dark:from-stone-700 dark:to-stone-800 
                       shadow-md hover:shadow-lg active:shadow-inner transition-all duration-200
                       before:absolute before:inset-0 before:rounded-lg before:shadow-inner before:shadow-stone-200/50 dark:before:shadow-white/5 
                       after:absolute after:inset-0 after:rounded-lg after:shadow-inner after:shadow-stone-500/50 dark:after:shadow-black/20 
                       focus:outline-none focus:ring-2 focus:ring-stone-400 focus:ring-offset-2 focus:ring-offset-stone-50 dark:focus:ring-offset-stone-900">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-stone-600 dark:text-stone-400 relative z-10" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M9.75 17L9 20l-1 1h8l-1-1-1.25-3M3 5h18M5 9h14M8 9V5m8 4V5m-1 7l-4 4m0 0l-4-4m4 4V13" />
              </svg>
              <span class="relative z-10">Knowledge Base</span>
            </a>
          </li>
          <li>
            <a href="#" class="relative flex items-center gap-2 py-2 px-4 rounded-lg text-lg text-stone-700 dark:text-stone-300 
                       bg-gradient-to-br from-stone-300 to-stone-400 dark:from-stone-700 dark:to-stone-800 
                       shadow-md hover:shadow-lg active:shadow-inner transition-all duration-200
                       before:absolute before:inset-0 before:rounded-lg before:shadow-inner before:shadow-stone-200/50 dark:before:shadow-white/5 
                       after:absolute after:inset-0 after:rounded-lg after:shadow-inner after:shadow-stone-500/50 dark:after:shadow-black/20 
                       focus:outline-none focus:ring-2 focus:ring-stone-400 focus:ring-offset-2 focus:ring-offset-stone-50 dark:focus:ring-offset-stone-900">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-stone-600 dark:text-stone-400 relative z-10" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M8 7V3m8 4V3m-9 8h8m-8 4h8m-9 4h8M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
              </svg>
              <span class="relative z-10">Upcoming Events</span>
            </a>
          </li>
          <li>
            <a href="#" class="relative flex items-center gap-2 py-2 px-4 rounded-lg text-lg text-stone-700 dark:text-stone-300 
                       bg-gradient-to-br from-stone-300 to-stone-400 dark:from-stone-700 dark:to-stone-800 
                       shadow-md hover:shadow-lg active:shadow-inner transition-all duration-200
                       before:absolute before:inset-0 before:rounded-lg before:shadow-inner before:shadow-stone-200/50 dark:before:shadow-white/5 
                       after:absolute after:inset-0 after:rounded-lg after:shadow-inner after:shadow-stone-500/50 dark:after:shadow-black/20 
                       focus:outline-none focus:ring-2 focus:ring-stone-400 focus:ring-offset-2 focus:ring-offset-stone-50 dark:focus:ring-offset-stone-900">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-stone-600 dark:text-stone-400 relative z-10" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M7 8h10M7 12h10M7 16h10M9 1h6a2 2 0 012 2v14a2 2 0 01-2 2H9a2 2 0 01-2-2V3a2 2 0 012-2z" />
              </svg>
              <span class="relative z-10">Support Tickets</span>
            </a>
          </li>
        </ul>
      </nav>
    </section>

    <!-- Skeuomorphic Card 4 - Recent Activity (Spans two columns on larger screens) -->
    <section class="relative rounded-xl bg-gradient-to-br from-stone-200 to-stone-300 dark:from-stone-800 dark:to-stone-900 p-6 shadow-xl 
                    hover:shadow-2xl transition-all duration-300 col-span-1 md:col-span-2 lg:col-span-1 
                    before:absolute before:inset-0 before:rounded-xl before:shadow-inner before:shadow-stone-100/50 dark:before:shadow-white/5 
                    after:absolute after:inset-0 after:rounded-xl after:shadow-inner after:shadow-stone-400/50 dark:after:shadow-black/20">
      <h2 class="text-xl font-semibold mb-4 text-stone-700 dark:text-stone-300 drop-shadow-sm">Recent Activity</h2>
      <ul class="space-y-4">
        <li class="relative flex items-center gap-4 p-3 rounded-lg bg-gradient-to-br from-stone-300 to-stone-400 dark:from-stone-700 dark:to-stone-800 shadow-md 
                    before:absolute before:inset-0 before:rounded-lg before:shadow-inner before:shadow-stone-200/50 dark:before:shadow-white/5">
          <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-stone-400 dark:border-stone-600 shadow-inner-strong">
          <div>
            <p class="text-stone-700 dark:text-stone-300"><span class="font-medium">Sarah Connor</span> updated a project.</p>
            <p class="text-sm text-stone-600 dark:text-stone-400">2 hours ago</p>
          </div>
        </li>
        <li class="relative flex items-center gap-4 p-3 rounded-lg bg-gradient-to-br from-stone-300 to-stone-400 dark:from-stone-700 dark:to-stone-800 shadow-md 
                    before:absolute before:inset-0 before:rounded-lg before:shadow-inner before:shadow-stone-200/50 dark:before:shadow-white/5">
          <img src="https://randomuser.me/api/portraits/men/80.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-stone-400 dark:border-stone-600 shadow-inner-strong">
          <div>
            <p class="text-stone-700 dark:text-stone-300"><span class="font-medium">Michael Scott</span> submitted a report.</p>
            <p class="text-sm text-stone-600 dark:text-stone-400">Yesterday</p>
          </div>
        </li>
        <li class="relative flex items-center gap-4 p-3 rounded-lg bg-gradient-to-br from-stone-300 to-stone-400 dark:from-stone-700 dark:to-stone-800 shadow-md 
                    before:absolute before:inset-0 before:rounded-lg before:shadow-inner before:shadow-stone-200/50 dark:before:shadow-white/5">
          <img src="https://randomuser.me/api/portraits/women/24.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-400 dark:border-stone-600 shadow-inner-strong">
          <div>
            <p class="text-stone-700 dark:text-stone-300"><span class="font-medium">Dwight Schrute</span> added a new task.</p>
            <p class="text-sm text-stone-600 dark:text-stone-400">3 days ago</p>
          </div>
        </li>
      </ul>
    </section>

    <!-- Skeuomorphic Card 5 - Important Notices -->
    <section class="relative rounded-xl bg-gradient-to-br from-stone-200 to-stone-300 dark:from-stone-800 dark:to-stone-900 p-6 shadow-xl 
                    hover:shadow-2xl transition-all duration-300 
                    before:absolute before:inset-0 before:rounded-xl before:shadow-inner before:shadow-stone-100/50 dark:before:shadow-white/5 
                    after:absolute after:inset-0 after:rounded-xl after:shadow-inner after:shadow-stone-400/50 dark:after:shadow-black/20">
      <h2 class="text-xl font-semibold mb-4 text-stone-700 dark:text-stone-300 drop-shadow-sm">Important Notices</h2>
      <div class="space-y-4">
        <div class="relative p-4 rounded-lg bg-red-200 dark:bg-red-800 text-red-800 dark:text-red-200 font-semibold 
                    shadow-md 
                    before:absolute before:inset-0 before:rounded-lg before:shadow-inner before:shadow-red-100/50 dark:before:shadow-white/5 
                    after:absolute after:inset-0 after:rounded-lg after:shadow-inner after:shadow-red-400/50 dark:after:shadow-black/20">
          <p>System Maintenance: Jan 15th, 10 PM - 2 AM PST.</p>
        </div>
        <div class="relative p-4 rounded-lg bg-amber-200 dark:bg-amber-800 text-amber-800 dark:text-amber-200 font-semibold 
                    shadow-md 
                    before:absolute before:inset-0 before:rounded-lg before:shadow-inner before:shadow-amber-100/50 dark:before:shadow-white/5 
                    after:absolute after:inset-0 after:rounded-lg after:shadow-inner after:shadow-amber-400/50 dark:after:shadow-black/20">
          <p>New Security Update available for all users.</p>
        </div>
      </div>
    </section>

    <!-- Skeuomorphic Card 6 - Image Gallery (Spans two columns on larger screens) -->
    <section class="relative rounded-xl bg-gradient-to-br from-stone-200 to-stone-300 dark:from-stone-800 dark:to-stone-900 p-6 shadow-xl 
                    hover:shadow-2xl transition-all duration-300 col-span-1 md:col-span-2 
                    before:absolute before:inset-0 before:rounded-xl before:shadow-inner before:shadow-stone-100/50 dark:before:shadow-white/5 
                    after:absolute after:inset-0 after:rounded-xl after:shadow-inner after:shadow-stone-400/50 dark:after:shadow-black/20">
      <h2 class="text-xl font-semibold mb-4 text-stone-700 dark:text-stone-300 drop-shadow-sm">Office Snapshots</h2>
      <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4">
        <div class="relative rounded-lg overflow-hidden border-2 border-stone-300 dark:border-stone-700 shadow-md 
                    before:absolute before:inset-0 before:rounded-lg before:shadow-inner before:shadow-stone-200/50 dark:before:shadow-white/5">
          <img src="https://picsum.photos/id/1018/200/150" alt="Office view" class="w-full h-full object-cover transition-transform duration-300 hover:scale-105">
        </div>
        <div class="relative rounded-lg overflow-hidden border-2 border-stone-300 dark:border-stone-700 shadow-md 
                    before:absolute before:inset-0 before:rounded-lg before:shadow-inner before:shadow-stone-200/50 dark:before:shadow-white/5">
          <img src="https://picsum.photos/id/1020/200/150" alt="Meeting room" class="w-full h-full object-cover transition-transform duration-300 hover:scale-105">
        </div>
        <div class="relative rounded-lg overflow-hidden border-2 border-stone-300 dark:border-stone-700 shadow-md 
                    before:absolute before:inset-0 before:rounded-lg before:shadow-inner before:shadow-stone-200/50 dark:before:shadow-white/5">
          <img src="https://picsum.photos/id/1025/200/150" alt="Workstation" class="w-full h-full object-cover transition-transform duration-300 hover:scale-105">
        </div>
        <div class="relative rounded-lg overflow-hidden border-2 border-stone-300 dark:border-stone-700 shadow-md 
                    before:absolute before:inset-0 before:rounded-lg before:shadow-inner before:shadow-stone-200/50 dark:before:shadow-white/5">
          <img src="https://picsum.photos/id/1021/200/150" alt="Coffee break" class="w-full h-full object-cover transition-transform duration-300 hover:scale-105">
        </div>
      </div>
    </section>

  </main>

  <!-- Footer as a subtle skeuomorphic element -->
  <footer class="relative mt-8 rounded-xl bg-gradient-to-br from-stone-200 to-stone-300 dark:from-stone-800 dark:to-stone-900 p-4 shadow-xl 
                  before:absolute before:inset-0 before:rounded-xl before:shadow-inner before:shadow-stone-100/50 dark:before:shadow-white/5 
                  after:absolute after:inset-0 after:rounded-xl after:shadow-inner after:shadow-stone-400/50 dark:after:shadow-black/20">
    <p class="text-center text-sm text-stone-600 dark:text-stone-400">&copy; 2023 Corporate Solutions Inc. All rights reserved.</p>
  </footer>

</div>

グリッドレイアウトコンポーネント - 金融/銀行

金融/銀行アプリケーション向けのレスポンシブグリッドレイアウトコンポーネントで、温かみのあるニュートラルとダークモードのサポートを備えたクリーンなマテリアルデザインの美学が特徴です。

開けるプレビュー

                <div class="min-h-screen bg-stone-100 dark:bg-zinc-900 p-4 sm:p-6 md:p-8 font-sans transition-colors duration-300">
  <div class="max-w-7xl mx-auto">
    <h1 class="text-3xl sm:text-4xl font-bold text-stone-800 dark:text-stone-100 mb-6 text-center md:text-left">
      Dashboard Overview
    </h1>

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

      <!-- Card 1: Account Balance -->
      <div class="bg-white dark:bg-zinc-800 rounded-lg shadow-md p-6 transform hover:scale-105 transition-transform duration-300">
        <div class="flex justify-between items-center mb-4">
          <h2 class="text-xl font-semibold text-stone-700 dark:text-stone-200">Current Balance</h2>
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-amber-500 dark:text-amber-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z" />
          </svg>
        </div>
        <p class="text-3xl font-bold text-stone-800 dark:text-stone-50 mb-2">$12,345.67</p>
        <p class="text-sm text-stone-500 dark:text-stone-400">Available funds</p>
      </div>

      <!-- Card 2: Recent Transactions -->
      <div class="bg-white dark:bg-zinc-800 rounded-lg shadow-md p-6 transform hover:scale-105 transition-transform duration-300">
        <div class="flex justify-between items-center mb-4">
          <h2 class="text-xl font-semibold text-stone-700 dark:text-stone-200">Recent Activity</h2>
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-emerald-500 dark:text-emerald-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" />
          </svg>
        </div>
        <ul class="space-y-3">
          <li class="flex justify-between text-stone-600 dark:text-stone-300">
            <span>Netflix Subscription</span>
            <span class="font-medium text-red-600 dark:text-red-400">-$15.99</span>
          </li>
          <li class="flex justify-between text-stone-600 dark:text-stone-300">
            <span>Salary Deposit</span>
            <span class="font-medium text-emerald-600 dark:text-emerald-400">+$2,500.00</span>
          </li>
          <li class="flex justify-between text-stone-600 dark:text-stone-300">
            <span>Coffee Shop</span>
            <span class="font-medium text-red-600 dark:text-red-400">-$4.50</span>
          </li>
        </ul>
        <a href="#" class="mt-4 block text-center text-sm text-amber-600 dark:text-amber-400 hover:underline">View all transactions</a>
      </div>

      <!-- Card 3: Savings Goal -->
      <div class="bg-white dark:bg-zinc-800 rounded-lg shadow-md p-6 transform hover:scale-105 transition-transform duration-300">
        <div class="flex justify-between items-center mb-4">
          <h2 class="text-xl font-semibold text-stone-700 dark:text-stone-200">Savings Goal</h2>
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-sky-500 dark:text-sky-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0V6a1 1 0 011-1h2a1 1 0 011 1v13m-6 0h6" />
          </svg>
        </div>
        <p class="text-2xl font-bold text-stone-800 dark:text-stone-50">$5,000 / $10,000</p>
        <div class="w-full bg-stone-200 dark:bg-zinc-700 rounded-full h-2.5 mt-2 mb-3">
          <div class="bg-sky-500 dark:bg-sky-400 h-2.5 rounded-full" style="width: 50%"></div>
        </div>
        <p class="text-sm text-stone-500 dark:text-stone-400">50% achieved for 'New Car Fund'</p>
        <a href="#" class="mt-4 block text-center text-sm text-amber-600 dark:text-amber-400 hover:underline">Manage goals</a>
      </div>

    </div>

    <!-- Optional: Footer or Disclaimer -->
    <p class="mt-8 text-center text-sm text-stone-500 dark:text-zinc-600">
      Data as of <time datetime="2023-10-27">October 27, 2023</time>. Subject to change.
    </p>
  </div>
</div>

ミニマリストのオーシャンブルーグリッドレイアウト

ファッション/ビューティーブランド向けのミニマリストでレスポンシブなグリッドレイアウトコンポーネントで、オーシャンブルーの色調とダークモードのサポートが特徴です。

開けるプレビュー

                <div class="bg-sky-50 dark:bg-gray-900 py-12 px-4 sm:px-6 lg:px-8">
  <div class="max-w-7xl mx-auto">
    <h2 class="text-4xl font-extrabold text-blue-900 dark:text-sky-300 text-center mb-12 sm:mb-16">
      Explore Our Latest Collection
    </h2>

    <div class="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">

      <!-- Product Card 1 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl hover:scale-105">
        <img class="w-full h-72 object-cover" src="https://picsum.photos/id/1018/400/500" alt="Elegant Blue Dress">
        <div class="p-6">
          <h3 class="font-semibold text-xl text-blue-800 dark:text-sky-200 mb-2">Ocean Whisper Dress</h3>
          <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Effortless elegance for every occasion.</p>
          <div class="flex justify-between items-center">
            <span class="text-2xl font-bold text-blue-900 dark:text-sky-300">$129.99</span>
            <button class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-600 transition-colors duration-200">
              View Details
            </button>
          </div>
        </div>
      </div>

      <!-- Product Card 2 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl hover:scale-105">
        <img class="w-full h-72 object-cover" src="https://picsum.photos/id/1020/400/500" alt="Luxurious Silk Scarf">
        <div class="p-6">
          <h3 class="font-semibold text-xl text-blue-800 dark:text-sky-200 mb-2">Azure Silk Scarf</h3>
          <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Soft and flowing, a touch of luxury.</p>
          <div class="flex justify-between items-center">
            <span class="text-2xl font-bold text-blue-900 dark:text-sky-300">$49.99</span>
            <button class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-600 transition-colors duration-200">
              View Details
            </button>
          </div>
        </div>
      </div>

      <!-- Product Card 3 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl hover:scale-105">
        <img class="w-full h-72 object-cover" src="https://picsum.photos/id/1039/400/500" alt="Deep Blue Handbag">
        <div class="p-6">
          <h3 class="font-semibold text-xl text-blue-800 dark:text-sky-200 mb-2">Marine Mini Bag</h3>
          <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Compact and chic, perfect for essentials.</p>
          <div class="flex justify-between items-center">
            <span class="text-2xl font-bold text-blue-900 dark:text-sky-300">$89.99</span>
            <button class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-600 transition-colors duration-200">
              View Details
            </button>
          </div>
        </div>
      </div>

      <!-- Product Card 4 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl hover:scale-105">
        <img class="w-full h-72 object-cover" src="https://picsum.photos/id/97/400/500" alt="Elegant Pearl Necklace">
        <div class="p-6">
          <h3 class="font-semibold text-xl text-blue-800 dark:text-sky-200 mb-2">Seashell Pearl Necklace</h3>
          <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Timeless beauty for a delicate touch.</p>
          <div class="flex justify-between items-center">
            <span class="text-2xl font-bold text-blue-900 dark:text-sky-300">$199.99</span>
            <button class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-600 transition-colors duration-200">
              View Details
            </button>
          </div>
        </div>
      </div>

      <!-- Product Card 5 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl hover:scale-105">
        <img class="w-full h-72 object-cover" src="https://picsum.photos/id/1041/400/500" alt="Minimalist Silver Earrings">
        <div class="p-6">
          <h3 class="font-semibold text-xl text-blue-800 dark:text-sky-200 mb-2">Coral Drop Earrings</h3>
          <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Subtle elegance for everyday wear.</p>
          <div class="flex justify-between items-center">
            <span class="text-2xl font-bold text-blue-900 dark:text-sky-300">$59.99</span>
            <button class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-600 transition-colors duration-200">
              View Details
            </button>
          </div>
        </div>
      </div>

      <!-- Product Card 6 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl hover:scale-105">
        <img class="w-full h-72 object-cover" src="https://picsum.photos/id/1021/400/500" alt="Trendy Sunglasses Blue Frame">
        <div class="p-6">
          <h3 class="font-semibold text-xl text-blue-800 dark:text-sky-200 mb-2">Deep Sea Shades</h3>
          <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Stylish protection for radiant eyes.</p>
          <div class="flex justify-between items-center">
            <span class="text-2xl font-bold text-blue-900 dark:text-sky-300">$79.99</span>
            <button class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-600 transition-colors duration-200">
              View Details
            </button>
          </div>
        </div>
      </div>

      <!-- Product Card 7 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl hover:scale-105">
        <img class="w-full h-72 object-cover" src="https://picsum.photos/id/1042/400/500" alt="Soft Blue Knitwear">
        <div class="p-6">
          <h3 class="font-semibold text-xl text-blue-800 dark:text-sky-200 mb-2">Coastal Knit Sweater</h3>
          <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Cozy comfort for colder days.</p>
          <div class="flex justify-between items-center">
            <span class="text-2xl font-bold text-blue-900 dark:text-sky-300">$95.00</span>
            <button class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-600 transition-colors duration-200">
              View Details
            </button>
          </div>
        </div>
      </div>

      <!-- Product Card 8 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl hover:scale-105">
          <img class="w-full h-72 object-cover" src="https://picsum.photos/id/1025/400/500" alt="Minimalist Blue Sandals">
          <div class="p-6">
              <h3 class="font-semibold text-xl text-blue-800 dark:text-sky-200 mb-2">Lagoon Sandals</h3>
              <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Lightweight and stylish for summer walks.</p>
              <div class="flex justify-between items-center">
                  <span class="text-2xl font-bold text-blue-900 dark:text-sky-300">$65.00</span>
                  <button class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-600 transition-colors duration-200">
                      View Details
                  </button>
              </div>
          </div>
      </div>

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

Travel_Booking_Grid_Layout_Component

企業/プロフェッショナルなデザイン、類似の配色、およびダークモードのサポートを備えた旅行予約Webサイト向けの複雑で応答性の高いグリッドレイアウトコンポーネント。宛先カード、検索入力、サイドバーを備えています。

開けるプレビュー

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100 font-sans p-4 sm:p-6 lg:p-8">
  <div class="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-4 gap-6">

    <!-- Sidebar / Filters -->
    <aside class="lg:col-span-1 bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 sticky top-6 self-start">
      <h2 class="text-2xl font-bold mb-6 text-indigo-700 dark:text-indigo-400">Find Your Trip</h2>

      <div class="mb-6">
        <label for="destination" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Destination</label>
        <input type="text" id="destination" placeholder="e.g., Paris, Tokyo" class="w-full px-4 py-2 rounded-md border border-gray-300 dark:border-gray-600 focus:ring-indigo-500 focus:border-indigo-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
      </div>

      <div class="mb-6">
        <label for="dates" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Dates</label>
        <input type="text" id="dates" placeholder="Select Dates" class="w-full px-4 py-2 rounded-md border border-gray-300 dark:border-gray-600 focus:ring-indigo-500 focus:border-indigo-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
      </div>

      <div class="mb-6">
        <label for="travelers" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Travelers</label>
        <select id="travelers" class="w-full px-4 py-2 rounded-md border border-gray-300 dark:border-gray-600 focus:ring-indigo-500 focus:border-indigo-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
          <option>1 Adult</option>
          <option>2 Adults</option>
          <option>3 Adults</option>
          <option>4+ Adults</option>
        </select>
      </div>

      <div class="mb-6">
        <h3 class="text-lg font-medium text-gray-700 dark:text-gray-300 mb-3">Price Range</h3>
        <input type="range" min="100" max="5000" value="2500" class="w-full accent-indigo-600 dark:accent-indigo-400">
        <div class="flex justify-between text-sm text-gray-600 dark:text-gray-400 mt-1">
          <span>$100</span>
          <span>$5000+</span>
        </div>
      </div>

      <button class="w-full bg-indigo-600 hover:bg-indigo-700 dark:bg-indigo-700 dark:hover:bg-indigo-800 text-white font-bold py-3 px-4 rounded-md transition duration-300 ease-in-out">
        Search Trips
      </button>
    </aside>

    <!-- Main Content / Destination Grid -->
    <main class="lg:col-span-3">
      <div class="mb-8 flex flex-col sm:flex-row items-center justify-between">
        <h1 class="text-3xl font-extrabold text-indigo-800 dark:text-indigo-300 mb-4 sm:mb-0">Popular Destinations</h1>
        <div class="relative w-full sm:w-auto">
          <input type="text" placeholder="Search specific destination..." class="w-full sm:w-64 px-4 py-2 pl-10 rounded-full border border-gray-300 dark:border-gray-600 focus:ring-indigo-500 focus:border-indigo-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
          <svg class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 dark:text-gray-500" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
        </div>
      </div>

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

        <!-- Destination Card 1 -->
        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden transform transition duration-300 hover:scale-105 hover:shadow-xl">
          <img src="https://picsum.photos/id/1015/400/250" alt="Bali Beaches" class="w-full h-48 object-cover">
          <div class="p-5">
            <div class="flex justify-between items-baseline mb-2">
              <h3 class="text-xl font-semibold text-indigo-700 dark:text-indigo-400">Bali, Indonesia</h3>
              <p class="text-lg font-bold text-green-600 dark:text-green-400">$1200</p>
            </div>
            <p class="text-gray-600 dark:text-gray-300 text-sm mb-4">Experience the serene beauty of Bali's beaches and culture.</p>
            <div class="flex items-center text-gray-500 dark:text-gray-400 text-sm mb-4">
              <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.727A8 8 0 016.343 7.273L17.657 16.727zm0 0L20.12 19.207m-2.463-2.48a4 4 0 10-5.657-5.657 4 4 0 005.657 5.657zm-2.828 2.828l2.483 2.483"></path></svg>
              <span>7 days, 6 nights</span>
            </div>
            <button class="w-full bg-indigo-500 hover:bg-indigo-600 dark:bg-indigo-600 dark:hover:bg-indigo-700 text-white font-semibold py-2 rounded-md transition duration-300 ease-in-out">
              View Details
            </button>
          </div>
        </div>

        <!-- Destination Card 2 -->
        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden transform transition duration-300 hover:scale-105 hover:shadow-xl">
          <img src="https://picsum.photos/id/103/400/250" alt="Paris Eiffel Tower" class="w-full h-48 object-cover">
          <div class="p-5">
            <div class="flex justify-between items-baseline mb-2">
              <h3 class="text-xl font-semibold text-indigo-700 dark:text-indigo-400">Paris, France</h3>
              <p class="text-lg font-bold text-green-600 dark:text-green-400">$1800</p>
            </div>
            <p class="text-gray-600 dark:text-gray-300 text-sm mb-4">Romantic city lights and iconic landmarks await you.</p>
            <div class="flex items-center text-gray-500 dark:text-gray-400 text-sm mb-4">
              <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.727A8 8 0 016.343 7.273L17.657 16.727zm0 0L20.12 19.207m-2.463-2.48a4 4 0 10-5.657-5.657 4 4 0 005.657 5.657zm-2.828 2.828l2.483 2.483"></path></svg>
              <span>5 days, 4 nights</span>
            </div>
            <button class="w-full bg-indigo-500 hover:bg-indigo-600 dark:bg-indigo-600 dark:hover:bg-indigo-700 text-white font-semibold py-2 rounded-md transition duration-300 ease-in-out">
              View Details
            </button>
          </div>
        </div>

        <!-- Destination Card 3 -->
        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden transform transition duration-300 hover:scale-105 hover:shadow-xl">
          <img src="https://picsum.photos/id/1043/400/250" alt="Kyoto Temples" class="w-full h-48 object-cover">
          <div class="p-5">
            <div class="flex justify-between items-baseline mb-2">
              <h3 class="text-xl font-semibold text-indigo-700 dark:text-indigo-400">Kyoto, Japan</h3>
              <p class="text-lg font-bold text-green-600 dark:text-green-400">$2100</p>
            </div>
            <p class="text-gray-600 dark:text-gray-300 text-sm mb-4">Discover ancient temples and modern wonders in Kyoto.</p>
            <div class="flex items-center text-gray-500 dark:text-gray-400 text-sm mb-4">
              <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.727A8 8 0 016.343 7.273L17.657 16.727zm0 0L20.12 19.207m-2.463-2.48a4 4 0 10-5.657-5.657 4 4 0 005.657 5.657zm-2.828 2.828l2.483 2.483"></path></svg>
              <span>9 days, 8 nights</span>
            </div>
            <button class="w-full bg-indigo-500 hover:bg-indigo-600 dark:bg-indigo-600 dark:hover:bg-indigo-700 text-white font-semibold py-2 rounded-md transition duration-300 ease-in-out">
              View Details
            </button>
          </div>
        </div>

        <!-- Destination Card 4 -->
        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden transform transition duration-300 hover:scale-105 hover:shadow-xl">
          <img src="https://picsum.photos/id/1018/400/250" alt="Rome Colosseum" class="w-full h-48 object-cover">
          <div class="p-5">
            <div class="flex justify-between items-baseline mb-2">
              <h3 class="text-xl font-semibold text-indigo-700 dark:text-indigo-400">Rome, Italy</h3>
              <p class="text-lg font-bold text-green-600 dark:text-green-400">$1500</p>
            </div>
            <p class="text-gray-600 dark:text-gray-300 text-sm mb-4">Explore ancient history and vibrant Italian culture.</p>
            <div class="flex items-center text-gray-500 dark:text-gray-400 text-sm mb-4">
              <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.727A8 8 0 016.343 7.273L17.657 16.727zm0 0L20.12 19.207m-2.463-2.48a4 4 0 10-5.657-5.657 4 4 0 005.657 5.657zm-2.828 2.828l2.483 2.483"></path></svg>
              <span>6 days, 5 nights</span>
            </div>
            <button class="w-full bg-indigo-500 hover:bg-indigo-600 dark:bg-indigo-600 dark:hover:bg-indigo-700 text-white font-semibold py-2 rounded-md transition duration-300 ease-in-out">
              View Details
            </button>
          </div>
        </div>

        <!-- Destination Card 5 -->
        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden transform transition duration-300 hover:scale-105 hover:shadow-xl">
          <img src="https://picsum.photos/id/1033/400/250" alt="Amazon Rainforest" class="w-full h-48 object-cover">
          <div class="p-5">
            <div class="flex justify-between items-baseline mb-2">
              <h3 class="text-xl font-semibold text-indigo-700 dark:text-indigo-400">Amazon, Brazil</h3>
              <p class="text-lg font-bold text-green-600 dark:text-green-400">$2500</p>
            </div>
            <p class="text-gray-600 dark:text-gray-300 text-sm mb-4">An adventurous journey through the world's largest rainforest.</p>
            <div class="flex items-center text-gray-500 dark:text-gray-400 text-sm mb-4">
              <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.727A8 8 0 016.343 7.273L17.657 16.727zm0 0L20.12 19.207m-2.463-2.48a4 4 0 10-5.657-5.657 4 4 0 005.657 5.657zm-2.828 2.828l2.483 2.483"></path></svg>
              <span>10 days, 9 nights</span>
            </div>
            <button class="w-full bg-indigo-500 hover:bg-indigo-600 dark:bg-indigo-600 dark:hover:bg-indigo-700 text-white font-semibold py-2 rounded-md transition duration-300 ease-in-out">
              View Details
            </button>
          </div>
        </div>

        <!-- Destination Card 6 -->
        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden transform transition duration-300 hover:scale-105 hover:shadow-xl">
          <img src="https://picsum.photos/id/1070/400/250" alt="New York City Skyline" class="w-full h-48 object-cover">
          <div class="p-5">
            <div class="flex justify-between items-baseline mb-2">
              <h3 class="text-xl font-semibold text-indigo-700 dark:text-indigo-400">New York, USA</h3>
              <p class="text-lg font-bold text-green-600 dark:text-green-400">$1600</p>
            </div>
            <p class="text-gray-600 dark:text-gray-300 text-sm mb-4">Experience the vibrant energy of the 'City That Never Sleeps'.</p>
            <div class="flex items-center text-gray-500 dark:text-gray-400 text-sm mb-4">
              <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.727A8 8 0 016.343 7.273L17.657 16.727zm0 0L20.12 19.207m-2.463-2.48a4 4 0 10-5.657-5.657 4 4 0 005.657 5.657zm-2.828 2.828l2.483 2.483"></path></svg>
              <span>5 days, 4 nights</span>
            </div>
            <button class="w-full bg-indigo-500 hover:bg-indigo-600 dark:bg-indigo-600 dark:hover:bg-indigo-700 text-white font-semibold py-2 rounded-md transition duration-300 ease-in-out">
              View Details
            </button>
          </div>
        </div>

      </div>

      <!-- Pagination (placeholder) -->
      <nav class="mt-10 flex justify-center" aria-label="Pagination">
        <ul class="flex items-center space-x-2">
          <li><a href="#" class="px-4 py-2 rounded-md bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 transition duration-150 ease-in-out">Previous</a></li>
          <li><a href="#" class="px-4 py-2 rounded-md bg-indigo-600 dark:bg-indigo-700 text-white font-bold">1</a></li>
          <li><a href="#" class="px-4 py-2 rounded-md bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 transition duration-150 ease-in-out">2</a></li>
          <li><a href="#" class="px-4 py-2 rounded-md bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 transition duration-150 ease-in-out">3</a></li>
          <li><a href="#" class="px-4 py-2 rounded-md bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 transition duration-150 ease-in-out">Next</a></li>
        </ul>
      </nav>
    </main>

  </div>
</div>

Monospace/Developer - 音楽/オーディオグリッドレイアウトコンポーネント

音楽/オーディオプラットフォーム用のシンプルでレスポンシブなグリッドレイアウトコンポーネントで、温かみのあるニュートラルを使用してモノスペース/開発者の美学で設計されています。ダークモードのサポートが含まれています。

開けるプレビュー

                <div class="bg-stone-50 text-stone-800 dark:bg-zinc-900 dark:text-stone-200 p-4 font-mono min-h-screen">
  <h1 class="text-3xl md:text-4xl lg:text-5xl font-bold mb-8 text-center text-stone-900 dark:text-stone-100 mt-4">
    <span class="block">_PLAYBACK_LIST_</span>
    <span class="text-sm md:text-base lg:text-lg opacity-75 mt-2">&gt; catalog/library/all_tracks.m3u</span>
  </h1>

  <div class="max-w-7xl mx-auto grid gap-6 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">

    <!-- Track Card 1 -->
    <div class="bg-stone-100 dark:bg-zinc-800 rounded-lg shadow-md hover:shadow-lg transition-all duration-300 overflow-hidden border border-stone-200 dark:border-zinc-700 relative group">
      <div class="absolute top-2 left-2 bg-amber-300 dark:bg-amber-600 px-2 py-1 text-xs text-stone-900 dark:text-stone-50 rounded-sm font-bold opacity-0 group-hover:opacity-100 transition-opacity duration-300">
        NOW PLAYING
      </div>
      <img src="https://picsum.photos/seed/music1/400/300" alt="Album Cover" class="w-full h-48 object-cover border-b border-stone-200 dark:border-zinc-700">
      <div class="p-4">
        <h3 class="text-lg font-semibold text-stone-900 dark:text-stone-100 leading-tight mb-1">_ArtistName_ - _TrackTitle_</h3>
        <p class="text-sm text-stone-600 dark:text-stone-400 mb-2">[GENRE] ~ (2023)</p>
        <div class="flex items-center text-sm text-stone-500 dark:text-stone-400">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1 text-amber-500 dark:text-amber-400" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd" />
          </svg>
          <span class="mr-2">3:45</span>
          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1 text-stone-500 dark:text-stone-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.032 2.032M17.89 5.112l-2.032 2.032M10 9v6m-4-6h-2a2 2 0 00-2 2v4a2 2 0 002 2h4v-2.031M15 15h2a2 2 0 002-2V9a2 2 0 00-2-2h-2v10m-4-10v6m0 0h4v-6h-4z" />
          </svg>
          <span>1.2M listens</span>
        </div>
        <button class="mt-4 w-full bg-amber-400 dark:bg-amber-600 text-stone-900 dark:text-stone-50 py-2 rounded-md hover:bg-amber-500 dark:hover:bg-amber-700 transition-colors duration-200 text-sm font-bold border-2 border-transparent hover:border-amber-700 dark:hover:border-amber-400">
           &gt; Play Track
        </button>
      </div>
    </div>

    <!-- Track Card 2 -->
    <div class="bg-stone-100 dark:bg-zinc-800 rounded-lg shadow-md hover:shadow-lg transition-all duration-300 overflow-hidden border border-stone-200 dark:border-zinc-700 relative group">
      <img src="https://picsum.photos/seed/music2/400/300" alt="Album Cover" class="w-full h-48 object-cover border-b border-stone-200 dark:border-zinc-700">
      <div class="p-4">
        <h3 class="text-lg font-semibold text-stone-900 dark:text-stone-100 leading-tight mb-1">_ArtistName_ - _AnotherHit_</h3>
        <p class="text-sm text-stone-600 dark:text-stone-400 mb-2">[AMBIENT] ~ (2022)</p>
        <div class="flex items-center text-sm text-stone-500 dark:text-stone-400">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1 text-amber-500 dark:text-amber-400" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd" />
          </svg>
          <span class="mr-2">4:10</span>
          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1 text-stone-500 dark:text-stone-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.032 2.032M17.89 5.112l-2.032 2.032M10 9v6m-4-6h-2a2 2 0 00-2 2v4a2 2 0 002 2h4v-2.031M15 15h2a2 2 0 002-2V9a2 2 0 00-2-2h-2v10m-4-10v6m0 0h4v-6h-4z" />
          </svg>
          <span>870K listens</span>
        </div>
        <button class="mt-4 w-full bg-amber-400 dark:bg-amber-600 text-stone-900 dark:text-stone-50 py-2 rounded-md hover:bg-amber-500 dark:hover:bg-amber-700 transition-colors duration-200 text-sm font-bold border-2 border-transparent hover:border-amber-700 dark:hover:border-amber-400">
          &gt; Play Track
        </button>
      </div>
    </div>

    <!-- Track Card 3 -->
    <div class="bg-stone-100 dark:bg-zinc-800 rounded-lg shadow-md hover:shadow-lg transition-all duration-300 overflow-hidden border border-stone-200 dark:border-zinc-700 relative group">
      <img src="https://picsum.photos/seed/music3/400/300" alt="Album Cover" class="w-full h-48 object-cover border-b border-stone-200 dark:border-zinc-700">
      <div class="p-4">
        <h3 class="text-lg font-semibold text-stone-900 dark:text-stone-100 leading-tight mb-1">_GroupName_ - _LatestSingle_</h3>
        <p class="text-sm text-stone-600 dark:text-stone-400 mb-2">[ELECTRONIC] ~ (2024)</p>
        <div class="flex items-center text-sm text-stone-500 dark:text-stone-400">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1 text-amber-500 dark:text-amber-400" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd" />
          </svg>
          <span class="mr-2">3:15</span>
          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1 text-stone-500 dark:text-stone-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.032 2.032M17.89 5.112l-2.032 2.032M10 9v6m-4-6h-2a2 2 0 00-2 2v4a2 2 0 002 2h4v-2.031M15 15h2a2 2 0 002-2V9a2 2 0 00-2-2h-2v10m-4-10v6m0 0h4v-6h-4z" />
          </svg>
          <span>2.1M listens</span>
        </div>
        <button class="mt-4 w-full bg-amber-400 dark:bg-amber-600 text-stone-900 dark:text-stone-50 py-2 rounded-md hover:bg-amber-500 dark:hover:bg-amber-700 transition-colors duration-200 text-sm font-bold border-2 border-transparent hover:border-amber-700 dark:hover:border-amber-400">
          &gt; Play Track
        </button>
      </div>
    </div>

    <!-- Track Card 4 -->
    <div class="bg-stone-100 dark:bg-zinc-800 rounded-lg shadow-md hover:shadow-lg transition-all duration-300 overflow-hidden border border-stone-200 dark:border-zinc-700 relative group">
      <img src="https://picsum.photos/seed/music4/400/300" alt="Album Cover" class="w-full h-48 object-cover border-b border-stone-200 dark:border-zinc-700">
      <div class="p-4">
        <h3 class="text-lg font-semibold text-stone-900 dark:text-stone-100 leading-tight mb-1">_ProducerAlias_ - _OldSchoolVibe_</h3>
        <p class="text-sm text-stone-600 dark:text-stone-400 mb-2">[LOFI] ~ (2021)</p>
        <div class="flex items-center text-sm text-stone-500 dark:text-stone-400">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1 text-amber-500 dark:text-amber-400" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd" />
          </svg>
          <span class="mr-2">2:58</span>
          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1 text-stone-500 dark:text-stone-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.032 2.032M17.89 5.112l-2.032 2.032M10 9v6m-4-6h-2a2 2 0 00-2 2v4a2 2 0 002 2h4v-2.031M15 15h2a2 2 0 002-2V9a2 2 0 00-2-2h-2v10m-4-10v6m0 0h4v-6h-4z" />
          </svg>
          <span>950K listens</span>
        </div>
        <button class="mt-4 w-full bg-amber-400 dark:bg-amber-600 text-stone-900 dark:text-stone-50 py-2 rounded-md hover:bg-amber-500 dark:hover:bg-amber-700 transition-colors duration-200 text-sm font-bold border-2 border-transparent hover:border-amber-700 dark:hover:border-amber-400">
          &gt; Play Track
        </button>
      </div>
    </div>

  </div>

  <footer class="text-center text-sm text-stone-500 dark:text-zinc-600 mt-12 p-4">
    <p>_CATALOG_END_ &gt; // End of playable tracks. Use 'search' or 'add_item' commands.</p>
  </footer>
</div>

遊び心のある農業グリッド

農業および農業Webサイト向けのシンプルで陽気でレスポンシブなグリッドレイアウトコンポーネントで、温かみのあるニュートラル、丸みを帯びた要素、およびダークモードのサポートを備えています。

開けるプレビュー

                <div class="min-h-screen bg-orange-50 dark:bg-gray-900 py-12 px-4 sm:px-6 lg:px-8 font-sans transition-colors duration-300">
  <div class="max-w-7xl mx-auto">
    <h2 class="text-4xl font-extrabold text-orange-900 dark:text-orange-100 text-center mb-12 sm:mb-16 leading-tight">
      <span class="block">Harvesting Joy, Growing Futures</span>
      <span class="block text-2xl font-semibold mt-2 opacity-80">Explore Our Farm Life</span>
    </h2>

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

      <!-- Card 1 -->
      <div class="bg-white dark:bg-gray-800 rounded-3xl shadow-lg p-6 flex flex-col items-center text-center transform hover:scale-105 transition-all duration-300 group">
        <div class="w-32 h-32 rounded-full overflow-hidden mb-4 border-4 border-orange-200 dark:border-orange-700 shadow-md">
          <img src="https://picsum.photos/id/1084/300/300" alt="Farm Animals" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-300">
        </div>
        <h3 class="text-2xl font-bold text-orange-800 dark:text-orange-200 mb-2">Happy Livestock</h3>
        <p class="text-gray-600 dark:text-gray-400 text-base leading-relaxed">Our animals live their best lives, nurtured with care and kindness.</p>
        <a href="#" class="mt-4 inline-flex items-center px-5 py-2 border border-transparent text-base font-medium rounded-full shadow-sm text-white bg-orange-500 hover:bg-orange-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500 dark:focus:ring-offset-gray-900 transition-colors duration-200">
          Learn More
        </a>
      </div>

      <!-- Card 2 -->
      <div class="bg-white dark:bg-gray-800 rounded-3xl shadow-lg p-6 flex flex-col items-center text-center transform hover:scale-105 transition-all duration-300 group">
        <div class="w-32 h-32 rounded-full overflow-hidden mb-4 border-4 border-orange-200 dark:border-orange-700 shadow-md">
          <img src="https://picsum.photos/id/106/300/300" alt="Fresh Produce" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-300">
        </div>
        <h3 class="text-2xl font-bold text-orange-800 dark:text-orange-200 mb-2">Bountiful Harvests</h3>
        <p class="text-gray-600 dark:text-gray-400 text-base leading-relaxed">From our fields to your table, experience the freshest produce.</p>
        <a href="#" class="mt-4 inline-flex items-center px-5 py-2 border border-transparent text-base font-medium rounded-full shadow-sm text-white bg-orange-500 hover:bg-orange-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500 dark:focus:ring-offset-gray-900 transition-colors duration-200">
          See Products
        </a>
      </div>

      <!-- Card 3 -->
      <div class="bg-white dark:bg-gray-800 rounded-3xl shadow-lg p-6 flex flex-col items-center text-center transform hover:scale-105 transition-all duration-300 group">
        <div class="w-32 h-32 rounded-full overflow-hidden mb-4 border-4 border-orange-200 dark:border-orange-700 shadow-md">
          <img src="https://picsum.photos/id/111/300/300" alt="Sustainable Farming" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-300">
        </div>
        <h3 class="text-2xl font-bold text-orange-800 dark:text-orange-200 mb-2">Sustainable Practices</h3>
        <p class="text-gray-600 dark:text-gray-400 text-base leading-relaxed">Committed to eco-friendly methods for a healthier planet.</p>
        <a href="#" class="mt-4 inline-flex items-center px-5 py-2 border border-transparent text-base font-medium rounded-full shadow-sm text-white bg-orange-500 hover:bg-orange-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500 dark:focus:ring-offset-gray-900 transition-colors duration-200">
          Our Mission
        </a>
      </div>

      <!-- Card 4 -->
      <div class="bg-white dark:bg-gray-800 rounded-3xl shadow-lg p-6 flex flex-col items-center text-center transform hover:scale-105 transition-all duration-300 group">
        <div class="w-32 h-32 rounded-full overflow-hidden mb-4 border-4 border-orange-200 dark:border-orange-700 shadow-md">
          <img src="https://randomuser.me/api/portraits/men/93.jpg" alt="Farmer John" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-300">
        </div>
        <h3 class="text-2xl font-bold text-orange-800 dark:text-orange-200 mb-2">Meet Our Farmers</h3>
        <p class="text-gray-600 dark:text-gray-400 text-base leading-relaxed">Passionate individuals dedicated to bringing you the best.</p>
        <a href="#" class="mt-4 inline-flex items-center px-5 py-2 border border-transparent text-base font-medium rounded-full shadow-sm text-white bg-orange-500 hover:bg-orange-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500 dark:focus:ring-offset-gray-900 transition-colors duration-200">
          The Team
        </a>
      </div>

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

アールデコ調のゲームグリッドレイアウト

アールデコ調のレスポンシブなゲームグリッドレイアウトは、幾何学模様、グレースケールカラー、インタラクティブな要素が特徴です。ゲームのWebサイトとインターフェイス用に設計されており、ダークモードがサポートされています。

開けるプレビュー

                <div class="min-h-screen bg-gray-50 dark:bg-gray-950 text-gray-900 dark:text-gray-50 font-sans p-4 sm:p-8 transition-colors duration-300">

  <!-- Grid Container -->
  <div class="container mx-auto max-w-7xl grid gap-4 lg:gap-8 grid-cols-1 md:grid-cols-2 lg:grid-cols-4">

    <!-- Main Feature Game Card (First Row Spanning) -->
    <div class="lg:col-span-2 relative overflow-hidden rounded-lg shadow-xl dark:shadow-2xl bg-gradient-to-br from-gray-200 to-gray-50 dark:from-gray-800 dark:to-gray-900 border-2 border-gray-300 dark:border-gray-700 ">
      <!-- Art Deco Pattern Overlay -->
      <div class="absolute inset-0 bg-repeat opacity-10 dark:opacity-5" style="background-image: url('data:image/svg+xml;utf8,<svg width=\'20\' height=\'20\' viewBox=\'0 0 20 20\' xmlns=\'http://www.w3.org/2000/svg\'><g fill=\'%23000\' fill-opacity=\'0.1\'><path d=\'M0 0h1v20H0zM0 0h20v1H0zM19 0h1v20h-1zM0 19h20v1H0z\'/><rect x=\'5\' y=\'5\' width=\'10\' height=\'10\' fill=\'%23000\' opacity=\'0.2\'/><path d=\'M10 0v20M0 10h20\' stroke=\'%23000\' stroke-width=\'0.5\' opacity=\'0.1\'/></g></svg>');"></div>

      <img src="https://picsum.photos/1200/800?random=1" alt="Featured Game" class="w-full h-80 md:h-96 object-cover object-center transform scale-100 hover:scale-105 transition-transform duration-500 ease-in-out">
      <div class="absolute bottom-0 left-0 right-0 p-4 sm:p-6 bg-gradient-to-t from-gray-900/90 to-transparent">
        <h2 class="text-2xl sm:text-3xl lg:text-4xl font-bold mb-2 text-gray-50 drop-shadow-lg leading-tight">Cosmic Odyssey: Starfall</h2>
        <p class="text-gray-200 text-sm sm:text-base font-medium flex items-center mb-4">
          <svg class="w-4 h-4 mr-1 text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l3 3a1 1 0 001.414-1.414L11 9.586V6z" clip-rule="evenodd"></path></svg>
          Released: 2023-11-15
        </p>
        <button class="px-6 py-3 bg-gray-50 border-2 border-gray-50 text-gray-900 font-semibold rounded-full shadow-lg hover:bg-gray-200 dark:bg-gray-100 dark:text-gray-900 dark:hover:bg-gray-300 transition-all duration-300 transform hover:-translate-y-1 hover:scale-105 focus:outline-none focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600 focus:ring-opacity-75 relative overflow-hidden group">
          <span class="relative z-10">Play Now</span>
          <span class="absolute inset-0 bg-gradient-to-r from-gray-400 to-gray-500 opacity-0 group-hover:opacity-20 transition-opacity duration-300"></span>
        </button>
      </div>
    </div>

    <!-- Game Card 1 -->
    <div class="group relative overflow-hidden rounded-lg shadow-lg dark:shadow-xl bg-gray-100 dark:bg-gray-900 border border-gray-200 dark:border-gray-800 transform hover:-translate-y-1 hover:shadow-2xl transition-all duration-300 ease-in-out">
      <img src="https://picsum.photos/600/400?random=2" alt="Game One" class="w-full h-48 object-cover object-center group-hover:scale-105 transition-transform duration-500 ease-in-out">
      <div class="p-4 relative z-10">
        <h3 class="text-xl font-bold mb-2 text-gray-800 dark:text-gray-100">Neon City Racers</h3>
        <p class="text-gray-600 dark:text-gray-400 text-sm">High-octane futuristic racing.</p>
        <div class="mt-4 flex justify-between items-center">
          <span class="px-3 py-1 text-xs font-semibold rounded-full bg-gray-300 dark:bg-gray-700 text-gray-700 dark:text-gray-300">Action</span>
          <button class="p-2 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors duration-200">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-8.707l-3-3a1 1 0 00-1.414 1.414L10.586 9H7a1 1 0 100 2h3.586l-1.293 1.293a1 1 0 101.414 1.414l3-3a1 1 0 000-1.414z" clip-rule="evenodd"></path></svg>
          </button>
        </div>
      </div>
    </div>

    <!-- Game Card 2 -->
    <div class="group relative overflow-hidden rounded-lg shadow-lg dark:shadow-xl bg-gray-100 dark:bg-gray-900 border border-gray-200 dark:border-gray-800 transform hover:-translate-y-1 hover:shadow-2xl transition-all duration-300 ease-in-out">
      <img src="https://picsum.photos/600/400?random=3" alt="Game Two" class="w-full h-48 object-cover object-center group-hover:scale-105 transition-transform duration-500 ease-in-out">
      <div class="p-4 relative z-10">
        <h3 class="text-xl font-bold mb-2 text-gray-800 dark:text-gray-100">Aetherian Chronicles</h3>
        <p class="text-gray-600 dark:text-gray-400 text-sm">Epic fantasy RPG adventure.</p>
        <div class="mt-4 flex justify-between items-center">
          <span class="px-3 py-1 text-xs font-semibold rounded-full bg-gray-300 dark:bg-gray-700 text-gray-700 dark:text-gray-300">RPG</span>
          <button class="p-2 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors duration-200">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-8.707l-3-3a1 1 0 00-1.414 1.414L10.586 9H7a1 1 0 100 2h3.586l-1.293 1.293a1 1 0 101.414 1.414l3-3a1 1 0 000-1.414z" clip-rule="evenodd"></path></svg>
          </button>
        </div>
      </div>
    </div>

    <!-- Latest News/Blog Card -->
    <div class="lg:col-span-2 relative overflow-hidden rounded-lg shadow-xl dark:shadow-2xl bg-gradient-to-tl from-gray-200 to-gray-50 dark:from-gray-800 dark:to-gray-900 border-2 border-gray-300 dark:border-gray-700 p-4 sm:p-6 flex flex-col justify-between">
      <!-- Art Deco Pattern Overlay -->
      <div class="absolute inset-0 bg-repeat opacity-10 dark:opacity-5" style="background-image: url('data:image/svg+xml;utf8,<svg width=\'20\' height=\'20\' viewBox=\'0 0 20 20\' xmlns=\'http://www.w3.org/2000/svg\'><g fill=\'%23000\' fill-opacity=\'0.1\'><path d=\'M0 0h1v20H0zM0 0h20v1H0zM19 0h1v20h-1zM0 19h20v1H0z\'/><rect x=\'5\' y=\'5\' width=\'10\' height=\'10\' fill=\'%23000\' opacity=\'0.2\'/><path d=\'M10 0v20M0 10h20\' stroke=\'%23000\' stroke-width=\'0.5\' opacity=\'0.1\'/></g></svg>');"></div>

      <h2 class="text-2xl sm:text-3xl font-bold mb-4 text-gray-900 drop-shadow-md dark:text-gray-50 relative z-10">Latest Intel</h2>

      <div class="space-y-4 relative z-10">
        <!-- News Item 1 -->
        <div class="bg-gray-50 dark:bg-gray-950 p-3 rounded-md border border-gray-200 dark:border-gray-800 flex items-start space-x-3 group hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors duration-200">
          <img src="https://picsum.photos/50/50?random=4" alt="News Thumbnail" class="w-16 h-16 rounded-md object-cover flex-shrink-0">
          <div>
            <p class="font-semibold text-gray-800 dark:text-gray-100 group-hover:text-gray-900 dark:group-hover:text-gray-50">New Patch incoming: 'The Void Gazer'</p>
            <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">Discover the new content, bug fixes, and balance changes for your favorite game.</p>
            <span class="text-xs text-gray-500 dark:text-gray-400 block mt-2">2 hours ago</span>
          </div>
        </div>

        <!-- News Item 2 -->
        <div class="bg-gray-50 dark:bg-gray-950 p-3 rounded-md border border-gray-200 dark:border-gray-800 flex items-start space-x-3 group hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors duration-200">
          <img src="https://picsum.photos/50/50?random=5" alt="News Thumbnail" class="w-16 h-16 rounded-md object-cover flex-shrink-0">
          <div>
            <p class="font-semibold text-gray-800 dark:text-gray-100 group-hover:text-gray-900 dark:group-hover:text-gray-50">Dev AMA Session Recap: Future of the game revealed!</p>
            <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">Highlights from our recent Ask Me Anything session with the development team.</p>
            <span class="text-xs text-gray-500 dark:text-gray-400 block mt-2">Yesterday</span>
          </div>
        </div>
      </div>

      <button class="mt-6 w-full px-6 py-3 bg-gray-50 border-2 border-gray-50 text-gray-900 font-semibold rounded-full shadow-lg hover:bg-gray-200 dark:bg-gray-100 dark:text-gray-900 dark:hover:bg-gray-300 transition-all duration-300 transform hover:-translate-y-1 hover:scale-105 focus:outline-none focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600 focus:ring-opacity-75 relative overflow-hidden group z-10">
        <span class="relative z-10">Read All News</span>
        <span class="absolute inset-0 bg-gradient-to-r from-gray-400 to-gray-500 opacity-0 group-hover:opacity-20 transition-opacity duration-300"></span>
      </button>
    </div>

    <!-- Leaderboard Card -->
    <div class="relative overflow-hidden rounded-lg shadow-lg dark:shadow-xl bg-gray-100 dark:bg-gray-900 border border-gray-200 dark:border-gray-800 p-4 sm:p-6 flex flex-col">
      <h3 class="text-xl font-bold mb-4 text-gray-900 dark:text-gray-50">Top Players</h3>
      <div class="space-y-3">
        <!-- Player 1 -->
        <div class="flex items-center space-x-3 border-b pb-3 border-gray-200 dark:border-gray-700 last:border-b-0 last:pb-0">
          <span class="font-extrabold text-2xl text-gray-700 dark:text-gray-300">1.</span>
          <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Player Avatar" class="w-10 h-10 rounded-full object-cover border-2 border-gray-400 dark:border-gray-600 flex-shrink-0">
          <div class="flex-grow">
            <p class="font-semibold text-gray-800 dark:text-gray-100">Axton_Prime</p>
            <p class="text-sm text-gray-600 dark:text-gray-400">Score: 1,230,456</p>
          </div>
          <span class="text-lg font-bold text-gray-800 dark:text-gray-100">🏆</span>
        </div>
        <!-- Player 2 -->
        <div class="flex items-center space-x-3 border-b pb-3 border-gray-200 dark:border-gray-700 last:border-b-0 last:pb-0">
          <span class="font-extrabold text-2xl text-gray-700 dark:text-gray-300">2.</span>
          <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Player Avatar" class="w-10 h-10 rounded-full object-cover border-2 border-gray-400 dark:border-gray-600 flex-shrink-0">
          <div class="flex-grow">
            <p class="font-semibold text-gray-800 dark:text-gray-100">Shadow_Queen</p>
            <p class="text-sm text-gray-600 dark:text-gray-400">Score: 987,654</p>
          </div>
          <span class="text-lg font-bold text-gray-800 dark:text-gray-100">🥈</span>
        </div>
         <!-- Player 3 -->
        <div class="flex items-center space-x-3 border-b pb-3 border-gray-200 dark:border-gray-700 last:border-b-0 last:pb-0">
          <span class="font-extrabold text-2xl text-gray-700 dark:text-gray-300">3.</span>
          <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Player Avatar" class="w-10 h-10 rounded-full object-cover border-2 border-gray-400 dark:border-gray-600 flex-shrink-0">
          <div class="flex-grow">
            <p class="font-semibold text-gray-800 dark:text-gray-100">Vortex_Hunter</p>
            <p class="text-sm text-gray-600 dark:text-gray-400">Score: 876,543</p>
          </div>
          <span class="text-lg font-bold text-gray-800 dark:text-gray-100">🥉</span>
        </div>
      </div>
      <button class="mt-6 w-full px-6 py-3 bg-gray-200 border border-gray-200 text-gray-800 font-semibold rounded-full shadow-md hover:bg-gray-300 dark:bg-gray-700 dark:text-gray-100 dark:hover:bg-gray-600 transition-all duration-300 transform hover:scale-105 focus:outline-none focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600 focus:ring-opacity-75 relative overflow-hidden group ">
        <span class="relative z-10">View Full Leaderboard</span>
        <span class="absolute inset-0 bg-gradient-to-r from-gray-500 to-gray-600 opacity-0 group-hover:opacity-20 transition-opacity duration-300"></span>
      </button>
    </div>

    <!-- Community/Stream Card -->
    <div class="relative overflow-hidden rounded-lg shadow-lg dark:shadow-xl bg-gray-100 dark:bg-gray-900 border border-gray-200 dark:border-gray-800 p-4 sm:p-6 flex flex-col">
      <h3 class="text-xl font-bold mb-4 text-gray-900 dark:text-gray-50">Live Streams</h3>
      <div class="space-y-3">
        <!-- Stream Item 1 -->
        <div class="flex items-center space-x-3 border-b pb-3 border-gray-200 dark:border-gray-700 last:border-b-0 last:pb-0">
          <img src="https://randomuser.me/api/portraits/women/4.jpg" alt="Streamer Avatar" class="w-10 h-10 rounded-full object-cover border-2 border-red-500 flex-shrink-0 animate-pulse">
          <div class="flex-grow">
            <p class="font-semibold text-gray-800 dark:text-gray-100">GamerGirl_Lexa <span class="text-red-500 text-xs font-bold ml-1">LIVE</span></p>
            <p class="text-sm text-gray-600 dark:text-gray-400">Playing: Cosmic Odyssey</p>
          </div>
          <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-50 transition-colors duration-200">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 6a2 2 0 012-2h6a2 2 0 012 2v2a2 2 0 01-2 2H4a2 2 0 01-2-2V6zm14.553 5.356A1.5 1.5 0 0117 12.004v1.992a1.5 1.5 0 01-2.447 1.156l-3.371-2.106a1.5 1.5 0 010-2.312l3.371-2.106zM9 10a1 1 0 011-1h6a1 1 0 011 1v4a1 1 0 01-1 1h-6a1 1 0 01-1-1v-4z"></path><path d="M2 13a2 2 0 012-2h6a2 2 0 012 2v2a2 2 0 01-2 2H4a2 2 0 01-2-2v-2z"></path></svg>
          </a>
        </div>
        <!-- Stream Item 2 -->
        <div class="flex items-center space-x-3 border-b pb-3 border-gray-200 dark:border-gray-700 last:border-b-0 last:pb-0">
          <img src="https://randomuser.me/api/portraits/men/5.jpg" alt="Streamer Avatar" class="w-10 h-10 rounded-full object-cover border-2 border-red-500 flex-shrink-0 animate-pulse">
          <div class="flex-grow">
            <p class="font-semibold text-gray-800 dark:text-gray-100">ProGamer_Xero <span class="text-red-500 text-xs font-bold ml-1">LIVE</span></p>
            <p class="text-sm text-gray-600 dark:text-gray-400">Playing: Neon City Racers</p>
          </div>
          <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-50 transition-colors duration-200">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 6a2 2 0 012-2h6a2 2 0 012 2v2a2 2 0 01-2 2H4a2 2 0 01-2-2V6zm14.553 5.356A1.5 1.5 0 0117 12.004v1.992a1.5 1.5 0 01-2.447 1.156l-3.371-2.106a1.5 1.5 0 010-2.312l3.371-2.106zM9 10a1 1 0 011-1h6a1 1 0 011 1v4a1 1 0 01-1 1h-6a1 1 0 01-1-1v-4z"></path><path d="M2 13a2 2 0 012-2h6a2 2 0 012 2v2a2 2 0 01-2 2H4a2 2 0 01-2-2v-2z"></path></svg>
          </a>
        </div>
      </div>
      <button class="mt-6 w-full px-6 py-3 bg-gray-200 border border-gray-200 text-gray-800 font-semibold rounded-full shadow-md hover:bg-gray-300 dark:bg-gray-700 dark:text-gray-100 dark:hover:bg-gray-600 transition-all duration-300 transform hover:scale-105 focus:outline-none focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600 focus:ring-opacity-75 relative overflow-hidden group">
        <span class="relative z-10">Join Community</span>
        <span class="absolute inset-0 bg-gradient-to-r from-gray-500 to-gray-600 opacity-0 group-hover:opacity-20 transition-opacity duration-300"></span>
      </button>
    </div>

  </div>
</div>

Neumorphism Grid Layout コンポーネント

開けるプレビュー

                <div class="min-h-screen bg-gray-200 dark:bg-gray-800 p-8 flex items-center justify-center">
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
    <!-- Card 1 -->
    <div class="rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark bg-gray-200 dark:bg-gray-700 p-6 transform hover:scale-105 transition duration-300">
      <img src="https://picsum.photos/400/200?random=1" alt="Image 1" class="rounded-lg mb-4 shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark">
      <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2">Post Title 1</h3>
      <p class="text-gray-600 dark:text-gray-300 text-sm">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      <div class="flex items-center mt-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full shadow-neumorphic-light dark:shadow-neumorphic-dark mr-3">
        <span class="text-gray-700 dark:text-gray-200 text-sm">John Doe</span>
      </div>
    </div>

    <!-- Card 2 -->
    <div class="rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark bg-gray-200 dark:bg-gray-700 p-6 transform hover:scale-105 transition duration-300">
      <img src="https://picsum.photos/400/200?random=2" alt="Image 2" class="rounded-lg mb-4 shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark">
      <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2">Post Title 2</h3>
      <p class="text-gray-600 dark:text-gray-300 text-sm">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      <div class="flex items-center mt-4">
        <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-8 h-8 rounded-full shadow-neumorphic-light dark:shadow-neumorphic-dark mr-3">
        <span class="text-gray-700 dark:text-gray-200 text-sm">Jane Smith</span>
      </div>
    </div>

    <!-- Card 3 -->
    <div class="rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark bg-gray-200 dark:bg-gray-700 p-6 transform hover:scale-105 transition duration-300">
      <img src="https://picsum.photos/400/200?random=3" alt="Image 3" class="rounded-lg mb-4 shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark">
      <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2">Post Title 3</h3>
      <p class="text-gray-600 dark:text-gray-300 text-sm">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
      <div class="flex items-center mt-4">
        <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="w-8 h-8 rounded-full shadow-neumorphic-light dark:shadow-neumorphic-dark mr-3">
        <span class="text-gray-700 dark:text-gray-200 text-sm">Peter Jones</span>
      </div>
    </div>
  </div>

  <!-- You'll need to extend your tailwind.config.js to include neumorphic shadows like this: -->
  <!--
  module.exports = {
    darkMode: 'class',
    theme: {
      extend: {
        boxShadow: {
          'neumorphic-light': '9px 9px 18px #a1a1a1, -9px -9px 18px #ffffff',
          'neumorphic-dark': '9px 9px 18px #4a4a4a, -9px -9px 18px #000000',
          'inner-neumorphic-light': 'inset 5px 5px 10px #a1a1a1, inset -5px -5px 10px #ffffff',
          'inner-neumorphic-dark': 'inset 5px 5px 10px #4a4a4a, inset -5px -5px 10px #000000',
        }
      },
    },
    plugins: [],
  }
  -->
</div>