検索コンポーネント

すべてのコンポーネント

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

サイバーパンクメガメニュー

ネオンのアクセント、暗い背景、完全な応答性、ダークモードのサポートを特徴とする、食品/レストランのWebサイト向けの複雑なサイバーパンクをテーマにしたメガメニュー。

                <nav class="bg-zinc-950 text-white shadow-lg dark:bg-black relative font-mono">
  <div class="container mx-auto px-4 py-4 flex justify-between items-center">
    <a href="#" class="text-3xl font-bold tracking-widest text-lime-400 hover:text-lime-300 transition duration-300">CYBERBYTE</a>
    <div class="hidden lg:flex items-center space-x-8">
      <a href="#" class="text-lg uppercase hover:text-lime-400 transition duration-300 border-b-2 border-transparent hover:border-lime-400 pb-1">Home</a>
      <div class="group relative">
        <button class="text-lg uppercase hover:text-lime-400 transition duration-300 focus:outline-none border-b-2 border-transparent hover:border-lime-400 pb-1 flex items-center">
          Menu <svg class="ml-2 w-4 h-4 transform group-hover:rotate-180 transition duration-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
        </button>
        <div class="absolute hidden group-hover:block w-fit min-w-[700px] right-0 mt-3 p-6 bg-zinc-900 border border-lime-400 shadow-xl rounded-md transition duration-300 opacity-0 group-hover:opacity-100 dark:bg-zinc-950">
          <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div>
              <h3 class="text-xl font-semibold mb-3 text-electric-blue-400 border-b border-lime-400 pb-2">Categories</h3>
              <ul class="space-y-2 text-sm">
                <li><a href="#" class="block text-gray-300 hover:text-electric-blue-300 transition duration-200">Neural Nosh (Main Courses)</a></li>
                <li><a href="#" class="block text-gray-300 hover:text-electric-blue-300 transition duration-200">Synth-Snacks (Appetizers)</a></li>
                <li><a href="#" class="block text-gray-300 hover:text-electric-blue-300 transition duration-200">Glitched Grub (Vegan)</a></li>
                <li><a href="#" class="block text-gray-300 hover:text-electric-blue-300 transition duration-200">Data Drinks (Beverages)</a></li>
                <li><a href="#" class="block text-gray-300 hover:text-electric-blue-300 transition duration-200">Cyber Sweets (Desserts)</a></li>
                <li><a href="#" class="block text-gray-300 hover:text-electric-blue-300 transition duration-200">Processor Packs (Combos)</a></li>
              </ul>
            </div>
            <div>
              <h3 class="text-xl font-semibold mb-3 text-hot-pink-400 border-b border-lime-400 pb-2">Featured Items</h3>
              <div class="space-y-4">
                <div class="flex items-center space-x-3">
                  <img src="https://picsum.photos/60/60?random=1" alt="Featured Dish" class="w-16 h-16 object-cover rounded-md border-2 border-lime-400">
                  <div>
                    <p class="font-medium text-gray-200">Quantum Burger</p>
                    <p class="text-sm text-gray-400">Synth-meat, bio-cheese, hyper-sauce.</p>
                    <span class="text-lime-400 font-bold">$15.99</span>
                  </div>
                </div>
                <div class="flex items-center space-x-3">
                  <img src="https://picsum.photos/60/60?random=2" alt="Featured Dish" class="w-16 h-16 object-cover rounded-md border-2 border-electric-blue-400">
                  <div>
                    <p class="font-medium text-gray-200">Neon Noodles</p>
                    <p class="text-sm text-gray-400">Glowing pasta, cyber-shrimp.</p>
                    <span class="text-lime-400 font-bold">$18.50</span>
                  </div>
                </div>
              </div>
            </div>
            <div>
              <h3 class="text-xl font-semibold mb-3 text-lime-400 border-b border-lime-400 pb-2">Order Now!</h3>
              <div class="relative overflow-hidden w-full h-40 rounded-lg">
                <img src="https://picsum.photos/400/200?random=3" alt="Order Call to Action" class="w-full h-full object-cover transform scale-105 hover:scale-100 transition-transform duration-500 rounded-lg border-2 border-hot-pink-400">
                <div class="absolute inset-0 bg-gradient-to-t from-zinc-900 via-transparent to-transparent flex items-end p-4">
                    <a href="#" class="text-hot-pink-400 text-lg font-bold hover:underline">Explore Full Menu <span class="text-white ml-1">&#8594;</span></a>
                </div>
              </div>
              <p class="mt-3 text-sm text-gray-400">Deliveries to sectors Alpha, Beta, Gamma.</p>
               <button class="mt-4 w-full bg-electric-blue-600 hover:bg-electric-blue-500 text-white py-2 px-4 rounded-md font-bold transition duration-300 transform hover:scale-105 shadow-neon-blue-glow">
                Place Order
              </button>
            </div>
          </div>
        </div>
      </div>
      <a href="#" class="text-lg uppercase hover:text-electric-blue-400 transition duration-300 border-b-2 border-transparent hover:border-electric-blue-400 pb-1">Locations</a>
      <a href="#" class="text-lg uppercase hover:text-hot-pink-400 transition duration-300 border-b-2 border-transparent hover:border-hot-pink-400 pb-1">About Us</a>
      <a href="#" class="text-lg uppercase hover:text-lime-400 transition duration-300 border-b-2 border-transparent hover:border-lime-400 pb-1">Contact</a>
    </div>

    <div class="hidden lg:flex items-center space-x-4">
      <div class="relative group">
        <button class="flex items-center space-x-2 text-white hover:text-lime-400 transition duration-300 focus:outline-none">
          <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-9 h-9 rounded-full object-cover border-2 border-lime-400">
          <span class="text-lg">User 1</span>
        </button>
        <ul class="absolute hidden group-hover:block right-0 mt-3 w-48 bg-zinc-900 border border-lime-400 dark:bg-zinc-950 shadow-lg rounded-md overflow-hidden z-10">
          <li><a href="#" class="block px-4 py-3 text-gray-300 hover:bg-zinc-800 hover:text-electric-blue-300 transition duration-200 border-b border-zinc-800">Profile</a></li>
          <li><a href="#" class="block px-4 py-3 text-gray-300 hover:bg-zinc-800 hover:text-electric-blue-300 transition duration-200 border-b border-zinc-800">Order History</a></li>
          <li><a href="#" class="block px-4 py-3 text-gray-300 hover:bg-zinc-800 hover:text-hot-pink-300 transition duration-200">Settings</a></li>
          <li><a href="#" class="block px-4 py-3 text-gray-300 hover:bg-zinc-800 hover:text-hot-pink-300 transition duration-200">Logout</a></li>
        </ul>
      </div>
      <button aria-label="Toggle dark mode" class="p-2 rounded-full bg-zinc-800 hover:bg-zinc-700 text-lime-400 hover:text-hot-pink-400 transition duration-300 focus:outline-none dark:bg-zinc-900 dark:hover:bg-zinc-800" onclick="document.documentElement.classList.toggle('dark')">
        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path></svg>
      </button>
    </div>

    <div class="lg:hidden flex items-center">
      <button aria-label="Toggle dark mode" class="mr-4 p-2 rounded-full bg-zinc-800 hover:bg-zinc-700 text-lime-400 hover:text-hot-pink-400 transition duration-300 focus:outline-none dark:bg-zinc-900 dark:hover:bg-zinc-800" onclick="document.documentElement.classList.toggle('dark')">
        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path></svg>
      </button>
      <button id="mobile-menu-button" class="text-white hover:text-lime-400 focus:outline-none p-2 rounded-md bg-zinc-800 hover:bg-zinc-700 transition duration-300 dark:bg-zinc-900 dark:hover:bg-zinc-800">
        <svg class="w-7 h-7" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path></svg>
      </button>
    </div>
  </div>

  <!-- Mobile Menu -->
  <div id="mobile-menu" class="hidden lg:hidden flex-col bg-zinc-950 p-6 space-y-4 border-t border-lime-400 dark:bg-black">
    <a href="#" class="block text-lg uppercase text-white hover:text-lime-400 transition duration-300 py-2 border-b border-zinc-800">Home</a>
    <div class="relative group">
      <button class="flex items-center justify-between w-full text-lg uppercase text-white hover:text-lime-400 transition duration-300 focus:outline-none py-2 border-b border-zinc-800">
        Menu <svg class="ml-2 w-4 h-4 transform group-hover:rotate-180 transition duration-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
      </button>
      <div class="hidden group-hover:block py-2 pl-4 text-sm bg-zinc-900 border-l border-lime-400 dark:bg-zinc-950">
        <ul class="space-y-2">
          <li><a href="#" class="block text-gray-300 hover:text-electric-blue-300 transition duration-200">Neural Nosh</a></li>
          <li><a href="#" class="block text-gray-300 hover:text-electric-blue-300 transition duration-200">Synth-Snacks</a></li>
          <li><a href="#" class="block text-gray-300 hover:text-electric-blue-300 transition duration-200">Glitched Grub</a></li>
          <li><a href="#" class="block text-gray-300 hover:text-electric-blue-300 transition duration-200">Data Drinks</a></li>
          <li><a href="#" class="block text-gray-300 hover:text-electric-blue-300 transition duration-200">Cyber Sweets</a></li>
          <li><a href="#" class="block text-gray-300 hover:text-electric-blue-300 transition duration-200">Processor Packs</a></li>
        </ul>
      </div>
    </div>
    <a href="#" class="block text-lg uppercase text-white hover:text-electric-blue-400 transition duration-300 py-2 border-b border-zinc-800">Locations</a>
    <a href="#" class="block text-lg uppercase text-white hover:text-hot-pink-400 transition duration-300 py-2 border-b border-zinc-800">About Us</a>
    <a href="#" class="block text-lg uppercase text-white hover:text-lime-400 transition duration-300 py-2 border-b border-zinc-800">Contact</a>
    <div class="flex items-center space-x-2 py-2 border-b border-zinc-800">
      <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full object-cover border-2 border-lime-400">
      <span class="text-lg text-white">User 1 Profile</span>
    </div>
    <button class="w-full bg-electric-blue-600 hover:bg-electric-blue-500 text-white py-3 rounded-md font-bold transition duration-300 transform hover:scale-105 shadow-neon-blue-glow">
      Place Order
    </button>
  </div>
</nav>

<style>
  /* Custom colors for cyberpunk theme */
  .text-electric-blue-400 { color: #00FFFF; /* Cyan */ }
  .hover\:text-electric-blue-300:hover { color: #00DDDD; }
  .bg-electric-blue-600 { background-color: #00BFFF; /* Deep Sky Blue */ }
  .hover\:bg-electric-blue-500:hover { background-color: #00AADD; }
  
  .text-hot-pink-400 { color: #FF00FF; /* Magenta */ }
  .hover\:text-hot-pink-300:hover { color: #DD00DD; }

  .text-lime-400 { color: #A7FF00; /* Neon Green */ }
  .hover\:text-lime-300:hover { color: #88EE00; }

  .border-electric-blue-400 { border-color: #00FFFF; }
  .border-hot-pink-400 { border-color: #FF00FF; }
  .border-lime-400 { border-color: #A7FF00; }

  .shadow-neon-blue-glow {
    box-shadow: 0 0 8px #00BFFF, 0 0 16px #00BFFF, 0 0 24px #00BFFF, 0 0 32px #00BFFF;
  }
  .dark .shadow-neon-blue-glow {
    box-shadow: 0 0 8px #00BFFF, 0 0 16px #00BFFF;
  }
</style>

<script>
  document.getElementById('mobile-menu-button').addEventListener('click', function() {
    document.getElementById('mobile-menu').classList.toggle('hidden');
    document.getElementById('mobile-menu').classList.toggle('flex');
  });
</script>

バッジコンポーネント

予約/予約システム用に設計されたすっきりとしたミニマリストのバッジコンポーネントで、レスポンシブレイアウト、パステルカラースキーム、ダークモードのサポートを特徴とし、スイス/インターナショナルタイポグラフィに触発されています。

開けるプレビュー

                <div class="font-sans antialiased bg-gray-50 text-gray-800 dark:bg-gray-900 dark:text-gray-100 p-4 sm:p-6 lg:p-8">
  <div class="max-w-7xl mx-auto py-8 sm:py-12">
    <h2 class="text-3xl sm:text-4xl font-bold mb-8 text-center tracking-tight text-gray-900 dark:text-gray-50">
      Your Upcoming Bookings
    </h2>

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

      <!-- Badge 1: Confirmed Appointment -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm overflow-hidden border border-gray-200 dark:border-gray-700 hover:shadow-md transition-shadow duration-300">
        <div class="p-5 flex flex-col items-start">
          <span class="inline-flex items-center px-3 py-1.5 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-700 dark:text-green-50 animate-pulse-slow">
            <svg class="-ml-0.5 mr-1.5 h-3 w-3 text-green-700 dark:text-green-50" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
              <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" />
            </svg>
            Confirmed
          </span>
          <h3 class="mt-4 text-xl font-semibold text-gray-900 dark:text-gray-50">Dental Check-up</h3>
          <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">Dr. Alice Smith</p>
          <div class="mt-4 text-gray-700 dark:text-gray-300 text-sm">
            <p class="flex items-center"><svg class="mr-2 h-4 w-4 text-gray-400 dark:text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>Oct 26, 2023</p>
            <p class="flex items-center mt-1"><svg class="mr-2 h-4 w-4 text-gray-400 dark:text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>10:00 AM</p>
          </div>
          <a href="#" class="mt-5 inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-500 hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-900 transition-colors duration-200">
            View Details
            <svg class="ml-2 -mr-1 h-3 w-3" 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>

      <!-- Badge 2: Pending Reservation -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm overflow-hidden border border-gray-200 dark:border-gray-700 hover:shadow-md transition-shadow duration-300">
        <div class="p-5 flex flex-col items-start">
          <span class="inline-flex items-center px-3 py-1.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800 dark:bg-yellow-700 dark:text-yellow-50">
            <svg class="-ml-0.5 mr-1.5 h-3 w-3 text-yellow-700 dark:text-yellow-50" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
              <path fill-rule="evenodd" d="M8.257 3.099c.765-1.3 2.624-1.3 3.389 0l7.25 12.482A1.5 1.5 0 0118.25 17H1.75a1.5 1.5 0 01-1.301-2.19l7.25-12.482zM10 13a1 1 0 100-2 1 1 0 000 2zm0 4a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd" />
            </svg>
            Pending
          </span>
          <h3 class="mt-4 text-xl font-semibold text-gray-900 dark:text-gray-50">Restaurant Table Booking</h3>
          <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">The Fancy Bistro</p>
          <div class="mt-4 text-gray-700 dark:text-gray-300 text-sm">
            <p class="flex items-center"><svg class="mr-2 h-4 w-4 text-gray-400 dark:text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>Nov 15, 2023</p>
            <p class="flex items-center mt-1"><svg class="mr-2 h-4 w-4 text-gray-400 dark:text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>7:30 PM (4 Guests)</p>
          </div>
          <a href="#" class="mt-5 inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 text-sm font-medium rounded-md text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-900 transition-colors duration-200">
            Review / Cancel
          </a>
        </div>
      </div>

      <!-- Badge 3: Completed Session -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm overflow-hidden border border-gray-200 dark:border-gray-700 hover:shadow-md transition-shadow duration-300">
        <div class="p-5 flex flex-col items-start">
          <span class="inline-flex items-center px-3 py-1.5 rounded-full text-xs font-medium bg-indigo-100 text-indigo-800 dark:bg-indigo-700 dark:text-indigo-50">
            <svg class="-ml-0.5 mr-1.5 h-3 w-3 text-indigo-700 dark:text-indigo-50" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
              <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.725c-.783-.57-.38-.72.588-1.81l3.462-.002a1 1 0 00.95-.69L9.049 2.927z" />
            </svg>
            Completed
          </span>
          <h3 class="mt-4 text-xl font-semibold text-gray-900 dark:text-gray-50">Yoga Session</h3>
          <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">Zen Flow Studio</p>
          <div class="mt-4 text-gray-700 dark:text-gray-300 text-sm">
            <p class="flex items-center"><svg class="mr-2 h-4 w-4 text-gray-400 dark:text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>Sep 20, 2023</p>
            <p class="flex items-center mt-1"><svg class="mr-2 h-4 w-4 text-gray-400 dark:text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"; xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>6:00 PM</p>
          </div>
          <a href="#" class="mt-5 inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 text-sm font-medium rounded-md text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-900 transition-colors duration-200">
            Leave Feedback
          </a>
        </div>
      </div>

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

<style>
  /* This is for the pulsating effect on the 'Confirmed' badge only */
  @keyframes pulse-slow {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.03); opacity: 0.8; }
    100% { transform: scale(1); opacity: 1; }
  }
  .animate-pulse-slow {
    animation: pulse-slow 3s infinite ease-in-out;
  }
</style>

サイバーパンクチャートコンポーネント

サイバーパンクの美学、暗い背景、ネオンのアクセント、クールなニュートラルカラーを備えた、レスポンシブでインタラクティブな外観のチャートコンポーネントで、教育プラットフォームに適しています。

開けるプレビュー

                <div class="font-sans antialiased bg-gray-950 text-gray-200 dark:bg-gray-950 dark:text-gray-200 min-h-screen p-4 sm:p-6 lg:p-8">
  <div class="max-w-6xl mx-auto bg-gray-900 rounded-3xl shadow-2xl overflow-hidden border border-blue-900/50 relative">
    <div class="absolute inset-0 bg-gradient-to-br from-blue-950/20 via-transparent to-purple-950/20 pointer-events-none z-0"></div>
    <div class="relative z-10 p-4 sm:p-6 lg:p-8">
      <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6 border-b border-gray-700/50 pb-4">
        <div>
          <h2 class="text-2xl sm:text-3xl font-bold text-blue-400 group-hover:text-blue-300 transition-colors duration-300 tracking-wide mb-2">
            <span class="text-blue-500">\\</span> Data Progression Analysis
          </h2>
          <p class="text-gray-400 text-sm sm:text-base">Visualize your learning journey and track progress over time.</p>
        </div>
        <div class="mt-4 md:mt-0 flex space-x-2">
          <button class="flex items-center px-4 py-2 bg-gray-800 text-blue-300 rounded-lg text-sm transition-all duration-300 hover:bg-blue-600 hover:text-white focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75 shadow-lg group">
            <svg class="w-4 h-4 mr-2 text-blue-400 group-hover:text-white transition-colors duration-300" 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="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
            <span class="group-hover:translate-x-0.5 transition-transform duration-300">Filter by Date</span>
          </button>
          <button class="flex items-center px-4 py-2 bg-blue-700 text-white rounded-lg text-sm transition-all duration-300 hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75 shadow-lg group">
            <svg class="w-4 h-4 mr-2 text-white group-hover:animate-pulse" 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="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"></path></svg>
            <span class="group-hover:translate-x-0.5 transition-transform duration-300">Settings</span>
          </button>
        </div>
      </div>

      <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
        <div class="col-span-1 lg:col-span-2 bg-gray-800 rounded-xl p-5 border border-blue-900/40 shadow-inner shadow-blue-900/20 transform hover:-translate-y-0.5 transition-all duration-300">
          <h3 class="text-xl font-semibold text-blue-300 mb-4">Weekly Performance Overview</h3>
          <!-- Placeholder for Chart -->
          <div class="relative w-full h-64 sm:h-80 md:h-96 flex items-center justify-center bg-gray-900 border border-blue-800/60 rounded-lg overflow-hidden">
            <div class="absolute inset-0 bg-gradient-to-br from-purple-800/10 via-transparent to-blue-800/10 animate-pulse-slow pointer-events-none"></div>
            <div class="absolute top-0 left-0 w-full h-full p-4 flex flex-col justify-between items-end text-right text-xs text-gray-500">
              <span class="text-red-400">100%</span>
              <span>80%</span>
              <span>60%</span>
              <span>40%</span>
              <span>20%</span>
              <span class="text-blue-400">0%</span>
            </div>
            <div class="absolute bottom-0 left-0 w-full p-4 flex justify-around text-gray-500 text-xs">
              <span>Mon</span>
              <span>Tue</span>
              <span>Wed</span>
              <span>Thu</span>
              <span>Fri</span>
              <span>Sat</span>
              <span>Sun</span>
            </div>
            <!-- Example 'graph' elements - can be replaced with actual chart library output -->
            <div class="absolute bottom-8 left-8 right-8 top-8 flex items-end justify-around">
              <div class="w-6 sm:w-8 bg-blue-600 rounded-t-sm transition-all duration-500 ease-out h-[60%] hover:scale-x-105 hover:bg-blue-400"></div>
              <div class="w-6 sm:w-8 bg-purple-600 rounded-t-sm transition-all duration-500 ease-out delay-75 h-[80%] hover:scale-x-105 hover:bg-purple-400"></div>
              <div class="w-6 sm:w-8 bg-blue-600 rounded-t-sm transition-all duration-500 ease-out delay-150 h-[40%] hover:scale-x-105 hover:bg-blue-400"></div>
              <div class="w-6 sm:w-8 bg-purple-600 rounded-t-sm transition-all duration-500 ease-out delay-225 h-[90%] hover:scale-x-105 hover:bg-purple-400"></div>
              <div class="w-6 sm:w-8 bg-blue-600 rounded-t-sm transition-all duration-500 ease-out delay-300 h-[70%] hover:scale-x-105 hover:bg-blue-400"></div>
              <div class="w-6 sm:w-8 bg-purple-600 rounded-t-sm transition-all duration-500 ease-out delay-375 h-[50%] hover:scale-x-105 hover:bg-purple-400"></div>
              <div class="w-6 sm:w-8 bg-blue-600 rounded-t-sm transition-all duration-500 ease-out delay-450 h-[85%] hover:scale-x-105 hover:bg-blue-400"></div>
            </div>
            <div class="absolute inset-0 flex items-center justify-center text-gray-600 text-lg sm:text-xl font-bold opacity-30 pointer-events-none">
              CHART DATA
            </div>
          </div>
          <p class="mt-4 text-gray-400 text-sm">This chart displays your average score and completion rate for various learning modules throughout the week.</p>
        </div>

        <div class="col-span-1 flex flex-col space-y-6">
          <!-- Key Metrics -->
          <div class="bg-gray-800 rounded-xl p-5 border border-blue-900/40 shadow-inner shadow-blue-900/20 transform hover:-translate-y-0.5 transition-all duration-300 group">
            <h3 class="text-xl font-semibold text-blue-300 mb-3">Key Metrics</h3>
            <div class="space-y-4">
              <div class="flex items-center text-gray-300">
                <div class="w-3 h-3 rounded-full bg-blue-500 mr-3 animate-pulse group-hover:scale-110"></div>
                <span>Average Score: <strong class="text-blue-400">88.5%</strong></span>
              </div>
              <div class="flex items-center text-gray-300">
                <div class="w-3 h-3 rounded-full bg-purple-500 mr-3 animate-pulse delay-100 group-hover:scale-110"></div>
                <span>Modules Completed: <strong class="text-purple-400">12/15</strong></span>
              </div>
              <div class="flex items-center text-gray-300">
                <div class="w-3 h-3 rounded-full bg-red-500 mr-3 animate-pulse delay-200 group-hover:scale-110"></div>
                <span>Time Spent (Hrs): <strong class="text-red-400">24.5</strong></span>
              </div>
            </div>
          </div>

          <!-- Daily Trend -->
          <div class="bg-gray-800 rounded-xl p-5 border border-blue-900/40 shadow-inner shadow-blue-900/20 transform hover:-translate-y-0.5 transition-all duration-300 group">
            <h3 class="text-xl font-semibold text-blue-300 mb-3">Daily Trend</h3>
            <p class="text-gray-400 text-sm mb-4">See your average score by day.</p>
            <div class="flex justify-between items-end h-24 sm:h-32 relative">
              <div class="absolute w-full h-0.5 bg-gray-700 bottom-0 left-0"></div>
              <!-- Bars -->
              <div class="flex flex-col items-center flex-1 mx-1">
                <div class="w-full bg-blue-600 rounded-t-sm transition-all duration-300 group-hover:bg-blue-400" style="height: 80%;"></div>
                <span class="text-xs text-gray-500 mt-1">Mon</span>
              </div>
              <div class="flex flex-col items-center flex-1 mx-1">
                <div class="w-full bg-purple-600 rounded-t-sm transition-all duration-300 group-hover:bg-purple-400" style="height: 65%;"></div>
                <span class="text-xs text-gray-500 mt-1">Tue</span>
              </div>
              <div class="flex flex-col items-center flex-1 mx-1">
                <div class="w-full bg-blue-600 rounded-t-sm transition-all duration-300 group-hover:bg-blue-400" style="height: 90%;"></div>
                <span class="text-xs text-gray-500 mt-1">Wed</span>
              </div>
              <div class="flex flex-col items-center flex-1 mx-1">
                <div class="w-full bg-purple-600 rounded-t-sm transition-all duration-300 group-hover:bg-purple-400" style="height: 75%;"></div>
                <span class="text-xs text-gray-500 mt-1">Thu</span>
              </div>
              <div class="flex flex-col items-center flex-1 mx-1">
                <div class="w-full bg-blue-600 rounded-t-sm transition-all duration-300 group-hover:bg-blue-400" style="height: 85%;"></div>
                <span class="text-xs text-gray-500 mt-1">Fri</span>
              </div>
              <div class="flex flex-col items-center flex-1 mx-1">
                <div class="w-full bg-purple-600 rounded-t-sm transition-all duration-300 group-hover:bg-purple-400" style="height: 50%;"></div>
                <span class="text-xs text-gray-500 mt-1">Sat</span>
              </div>
              <div class="flex flex-col items-center flex-1 mx-1">
                <div class="w-full bg-blue-600 rounded-t-sm transition-all duration-300 group-hover:bg-blue-400" style="height: 70%;"></div>
                <span class="text-xs text-gray-500 mt-1">Sun</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Recommendations/Insights -->
      <div class="bg-gray-800 rounded-xl p-5 border border-blue-900/40 shadow-inner shadow-blue-900/20 transform hover:-translate-y-0.5 transition-all duration-300 group">
        <h3 class="text-xl font-semibold text-blue-300 mb-3">Insights & Recommendations</h3>
        <ul class="list-disc list-inside text-gray-400 space-y-2">
          <li class="hover:text-blue-300 transition-colors duration-200 group-hover:translate-x-1">You had a strong performance on Wednesday. Keep up the momentum!</li>
          <li class="hover:text-blue-300 transition-colors duration-200 group-hover:translate-x-1">Consider reviewing modules related to 'Data Structures' as your scores dipped on Tuesday.</li>
          <li class="hover:text-blue-300 transition-colors duration-200 group-hover:translate-x-1">Your weekend learning hours are lower. A short review session could make a difference.</li>
          <li class="hover:text-blue-300 transition-colors duration-200 group-hover:translate-x-1">Aim to achieve 90% completion rate by end of next week.</li>
        </ul>
      </div>
    </div>
  </div>
</div>

<style>
  /* Custom pulsing animation for background effect */
  @keyframes pulse-slow {
    0%, 100% { transform: scale(1); opacity: 0.1; }
    50% { transform: scale(1.05); opacity: 0.2; }
  }
  .animate-pulse-slow {
    animation: pulse-slow 6s infinite ease-in-out;
  }
</style>

Industrial_Chart_Component_Ocean_Blue_Simple

海/青の色調を使用した工業的な原材料の美学を備えたシンプルで応答性の高いチャートコンポーネントで、非営利団体/慈善団体向けに設計されています。ダークモードのサポートが含まれています。

開けるプレビュー

                <div class="bg-gray-100 dark:bg-gray-900 p-4 sm:p-6 md:p-8 rounded-lg shadow-xl border border-blue-200 dark:border-blue-800">
  <div class="flex justify-between items-center mb-6 border-b pb-4 border-blue-300 dark:border-blue-700">
    <h2 class="text-xl sm:text-2xl font-bold text-blue-800 dark:text-blue-200 font-mono tracking-wide">Donation Impact Overview</h2>
    <p class="text-sm text-blue-600 dark:text-blue-400 uppercase tracking-widest font-mono">Q4 2023</p>
  </div>

  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
    <div class="bg-blue-50 dark:bg-blue-950 p-4 rounded-md border border-blue-200 dark:border-blue-800 flex flex-col justify-between">
      <div>
        <p class="text-sm text-blue-700 dark:text-blue-300 font-semibold mb-2">Total Contributions</p>
        <p class="text-2xl font-extrabold text-blue-800 dark:text-sky-300 font-mono">$12,450</p>
      </div>
      <div class="w-full bg-blue-200 dark:bg-blue-700 rounded-full h-2 mt-4">
        <div class="bg-blue-600 dark:bg-blue-400 h-2 rounded-full" style="width: 75%;"></div>
      </div>
    </div>

    <div class="bg-blue-50 dark:bg-blue-950 p-4 rounded-md border border-blue-200 dark:border-blue-800 flex flex-col justify-between">
      <div>
        <p class="text-sm text-blue-700 dark:text-blue-300 font-semibold mb-2">Beneficiaries Reached</p>
        <p class="text-2xl font-extrabold text-blue-800 dark:text-sky-300 font-mono">87</p>
      </div>
      <div class="text-xs text-blue-600 dark:text-blue-400 mt-4">+15% from Q3</div>
    </div>

    <div class="bg-blue-50 dark:bg-blue-950 p-4 rounded-md border border-blue-200 dark:border-blue-800 flex flex-col justify-between">
      <div>
        <p class="text-sm text-blue-700 dark:text-blue-300 font-semibold mb-2">Volunteer Hours</p>
        <p class="text-2xl font-extrabold text-blue-800 dark:text-sky-300 font-mono">320 hrs</p>
      </div>
      <a href="#" class="text-sm text-blue-600 dark:text-blue-400 hover:underline mt-4 self-end">View Details &rarr;</a>
    </div>
  </div>

  <div class="bg-blue-100 dark:bg-blue-900 p-6 rounded-md border border-blue-300 dark:border-blue-700">
    <h3 class="text-lg font-semibold text-blue-800 dark:text-blue-200 mb-4">Impact Distribution</h3>
    <div class="relative h-48 sm:h-64">
      <!-- Placeholder for a simple bar chart or pie chart representation -->
      <div class="absolute inset-0 flex items-end p-2 sm:p-4">
        <div class="flex flex-grow justify-around items-end h-full">
          <div class="w-8 sm:w-10 bg-blue-600 dark:bg-sky-400 rounded-t-sm animate-bar-grow" style="height: 70%; animation-delay: 0s;"></div>
          <div class="w-8 sm:w-10 bg-blue-700 dark:bg-sky-500 rounded-t-sm animate-bar-grow" style="height: 50%; animation-delay: 0.1s;"></div>
          <div class="w-8 sm:w-10 bg-blue-800 dark:bg-sky-600 rounded-t-sm animate-bar-grow" style="height: 90%; animation-delay: 0.2s;"></div>
          <div class="w-8 sm:w-10 bg-blue-600 dark:bg-sky-400 rounded-t-sm animate-bar-grow" style="height: 40%; animation-delay: 0.3s;"></div>
          <div class="w-8 sm:w-10 bg-blue-700 dark:bg-sky-500 rounded-t-sm animate-bar-grow" style="height: 60%; animation-delay: 0.4s;"></div>
        </div>
      </div>

      <div class="absolute bottom-0 left-0 right-0 h-px bg-blue-400 dark:bg-blue-600"></div>
      <div class="absolute top-0 bottom-0 left-4 w-px bg-blue-400 dark:bg-blue-600"></div>
      
      <div class="absolute bottom-0 left-0 right-0 flex justify-around text-xs text-blue-700 dark:text-blue-300 pt-2 pb-1">
        <span>Food</span>
        <span>Water</span>
        <span>Shelter</span>
        <span>Health</span>
        <span>Educ.</span>
      </div>
    </div>
  </div>

  <div class="mt-6 text-center">
    <button class="px-6 py-2 bg-blue-700 hover:bg-blue-800 text-white dark:bg-blue-600 dark:hover:bg-blue-700 rounded-md font-semibold transition-colors duration-200 border border-blue-900 dark:border-blue-400 shadow-md font-mono">
      Generate Report
    </button>
  </div>
</div>

<style>
  @keyframes bar-grow {
    from { height: 0%; transform: translateY(100%); opacity: 0; }
    to { transform: translateY(0%); opacity: 1; }
  }
  .animate-bar-grow {
    animation: bar-grow 0.8s ease-out forwards;
  }
</style>

物件リストカード - スイスパステル

スイス/インターナショナルのタイポグラフィスタイルとパステルカラーの配色を備えた、シンプルでクリーンでレスポンシブな物件リスティングカードで、不動産プラットフォームに適しています。ダークモードのサポートが含まれています。

開けるプレビュー

                <div class="p-4 sm:p-6 bg-rose-50 dark:bg-zinc-800 rounded-lg shadow-md max-w-sm mx-auto transition-colors duration-300">
  <div class="relative mb-4 overflow-hidden rounded-md">
    <img src="https://picsum.photos/400/250?random=10" alt="Property Image" class="w-full h-48 object-cover rounded-md transition-transform duration-300 hover:scale-105">
    <div class="absolute bottom-2 left-2 bg-rose-200 dark:bg-zinc-700 text-zinc-800 dark:text-zinc-200 px-3 py-1 rounded-full text-xs font-semibold uppercase opacity-90">
      For Sale
    </div>
  </div>
  <h3 class="text-xl sm:text-2xl font-bold text-zinc-800 dark:text-rose-100 mb-2 truncate">
    Modern City Apartment
  </h3>
  <p class="text-sm text-zinc-600 dark:text-zinc-400 mb-3 truncate">
    123 Main St, Anytown, CA 90210
  </p>

  <div class="grid grid-cols-2 gap-y-2 text-zinc-700 dark:text-zinc-300 text-sm mb-4">
    <div class="flex items-center">
      <svg class="w-4 h-4 mr-2 text-rose-500 dark:text-rose-300" 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="M8 14v3m4-3v3m4-3v3M3 21h18M3 10L6 7l9 4 6-3v11H3V10z"></path></svg>
      3 Beds
    </div>
    <div class="flex items-center">
      <svg class="w-4 h-4 mr-2 text-rose-500 dark:text-rose-300" 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="M20.25 15.3A4.5 4.5 0 0115.75 21H12a2.25 2.25 0 00-2.25 2.25h-1.5A2.25 2.25 0 016 21H3.75A2.25 2.25 0 011.5 18.75V9A2.25 2.25 0 013.75 6.75h1.5A2.25 2.25 0 007.5 4.5h9A2.25 2.25 0 0119.5 6.75h1.5A2.25 2.25 0 0122.5 9v9.75A4.5 4.5 0 0120.25 15.3z"></path></svg>
      2 Baths
    </div>
    <div class="flex items-center">
      <svg class="w-4 h-4 mr-2 text-rose-500 dark:text-rose-300" 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="M16 12V4zm-4 4V4zm-4 4V4zm-4 4v7h16v-7c0-2-1-4-3-4H7c-2 0-3 2-3 4z"></path></svg>
      1,200 sqft
    </div>
    <div class="flex items-center">
      <svg class="w-4 h-4 mr-2 text-rose-500 dark:text-rose-300" 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.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
      Central
    </div>
  </div>

  <div class="flex items-center justify-between">
    <p class="text-xl sm:text-2xl font-extrabold text-zinc-900 dark:text-rose-200">
      $350,000
    </p>
    <a href="#" class="inline-flex items-center px-4 py-2 bg-rose-400 dark:bg-rose-600 text-white rounded-md hover:bg-rose-500 dark:hover:bg-rose-700 transition-colors duration-200 text-sm sm:text-base font-semibold">
      Details
      <svg class="w-4 h-4 ml-2" 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.25 8.25L21 12m0 0l-3.75 3.75M21 12H3"></path></svg>
    </a>
  </div>
</div>

Cyberpunk_User_Profiles_Component

サイバーパンクの美学と温かみのある夕焼けの配色を備えた、旅行/観光Webサイトに適した、複雑で応答性の高いユーザープロファイルコンポーネント。ダークモードのサポート、ネオンアクセント、インタラクティブな要素を備えています。

開けるプレビュー

                <div class="min-h-screen bg-gray-900 text-orange-200 p-4 sm:p-8 dark:bg-gray-950">
  <div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-8">
    <!-- Left Column: User Profile -->
    <div class="md:col-span-1 bg-gradient-to-br from-indigo-900 to-purple-900 rounded-3xl shadow-xl border border-purple-700 transform hover:scale-105 transition-all duration-300 dark:from-purple-950 dark:to-gray-900">
      <div class="p-6 sm:p-8 text-center relative">
        <div class="absolute top-4 right-4 flex space-x-2">
          <span class="relative flex h-3 w-3">
            <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"></span>
            <span class="relative inline-flex rounded-full h-3 w-3 bg-red-500"></span>
          </span>
          <span class="text-xs font-mono text-orange-400">STATUS: ONLINE</span>
        </div>
        <img class="w-32 h-32 rounded-full mx-auto border-4 border-orange-500 shadow-lg glow-effect-orange mb-4" src="https://randomuser.me/api/portraits/women/68.jpg" alt="User Avatar">
        <h2 class="text-3xl font-bold text-orange-400 mb-2 font-mono">AURORA_SKYWALKER</h2>
        <p class="text-sm text-purple-300 mb-4">Cyber-Explorer | Data-Nomad | Pixel-Poet</p>
        <div class="flex justify-center space-x-4 mb-6">
          <a href="#" class="text-orange-400 hover:text-orange-300 transition-colors duration-200"><i class="fas fa-envelope"></i></a>
          <a href="#" class="text-orange-400 hover:text-orange-300 transition-colors duration-200"><i class="fab fa-twitter"></i></a>
          <a href="#" class="text-orange-400 hover:text-orange-300 transition-colors duration-200"><i class="fab fa-instagram"></i></a>
        </div>
        <div class="text-left space-y-3">
          <div class="border-t border-purple-800 pt-4 flex items-center space-x-2">
            <i class="fas fa-map-marker-alt text-orange-500"></i>
            <span class="text-sm text-indigo-300">Location: Neo-Vegas Sector 7</span>
          </div>
          <div class="flex items-center space-x-2">
            <i class="fas fa-calendar-alt text-orange-500"></i>
            <span class="text-sm text-indigo-300">Member Since: 2077.01.15</span>
          </div>
          <div class="flex items-center space-x-2">
            <i class="fas fa-star text-orange-500"></i>
            <span class="text-sm text-indigo-300">Rating: 4.8 / 5.0 (2,104 reviews)</span>
          </div>
        </div>
        <button class="mt-8 px-6 py-3 bg-orange-600 text-white rounded-full text-lg font-bold uppercase tracking-wider shadow-lg transform hover:scale-105 hover:bg-orange-700 transition-all duration-300 glow-button-orange focus:outline-none focus:ring-4 focus:ring-orange-500 focus:ring-opacity-75">
          Edit Profile
        </button>
      </div>
    </div>

    <!-- Right Column: Stats & Activity -->
    <div class="md:col-span-2 space-y-8">
      <!-- Navigation Tabs -->
      <div class="bg-gradient-to-r from-red-800 to-orange-800 rounded-3xl p-2 shadow-xl border border-red-700 dark:from-red-950 dark:to-orange-900">
        <div class="flex flex-wrap justify-around text-sm sm:text-base font-bold font-mono">
          <a href="#" class="px-4 py-2 text-white glow-text-white-active rounded-2xl hover:bg-orange-700 transition-all duration-200 transform hover:scale-105 active:bg-orange-900 active:ring-2 active:ring-orange-500">Dashboard</a>
          <a href="#" class="px-4 py-2 text-red-100 hover:text-white rounded-2xl hover:bg-orange-700 transition-all duration-200 transform hover:scale-105">Bookings</a>
          <a href="#" class="px-4 py-2 text-red-100 hover:text-white rounded-2xl hover:bg-orange-700 transition-all duration-200 transform hover:scale-105">Trips</a>
          <a href="#" class="px-4 py-2 text-red-100 hover:text-white rounded-2xl hover:bg-orange-700 transition-all duration-200 transform hover:scale-105">Reviews</a>
          <a href="#" class="px-4 py-2 text-red-100 hover:text-white rounded-2xl hover:bg-orange-700 transition-all duration-200 transform hover:scale-105">Settings</a>
        </div>
      </div>

      <!-- Stats Section -->
      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
        <div class="bg-gradient-to-br from-gray-800 to-gray-700 rounded-2xl p-5 text-center border-l-4 border-orange-500 shadow-lg transition-transform duration-300 hover:scale-105 dark:from-gray-900 dark:to-gray-800">
          <i class="fas fa-plane-departure text-orange-400 text-3xl mb-3 glow-effect-orange-sm"></i>
          <p class="text-2xl font-bold font-mono text-orange-300">17</p>
          <p class="text-sm text-gray-400">Total Expeditions</p>
        </div>
        <div class="bg-gradient-to-br from-gray-800 to-gray-700 rounded-2xl p-5 text-center border-l-4 border-purple-500 shadow-lg transition-transform duration-300 hover:scale-105 dark:from-gray-900 dark:to-gray-800">
          <i class="fas fa-map-marked-alt text-purple-400 text-3xl mb-3 glow-effect-purple-sm"></i>
          <p class="text-2xl font-bold font-mono text-purple-300">5</p>
          <p class="text-sm text-gray-400">Planetary Zones</p>
        </div>
        <div class="bg-gradient-to-br from-gray-800 to-gray-700 rounded-2xl p-5 text-center border-l-4 border-red-500 shadow-lg transition-transform duration-300 hover:scale-105 dark:from-gray-900 dark:to-gray-800">
          <i class="fas fa-hourglass-half text-red-400 text-3xl mb-3 glow-effect-red-sm"></i>
          <p class="text-2xl font-bold font-mono text-red-300">234</p>
          <p class="text-sm text-gray-400">Hours Logged</p>
        </div>
        <div class="bg-gradient-to-br from-gray-800 to-gray-700 rounded-2xl p-5 text-center border-l-4 border-green-500 shadow-lg transition-transform duration-300 hover:scale-105 dark:from-gray-900 dark:to-gray-800">
          <i class="fas fa-users text-green-400 text-3xl mb-3 glow-effect-green-sm"></i>
          <p class="text-2xl font-bold font-mono text-green-300">12</p>
          <p class="text-sm text-gray-400">Travel Buddies</p>
        </div>
      </div>

      <!-- Recent Activity / Upcoming Bookings -->
      <div class="bg-gradient-to-br from-gray-800 to-gray-800 rounded-3xl p-6 sm:p-8 shadow-xl border border-gray-700 dark:from-gray-900 dark:to-gray-900">
        <h3 class="text-2xl font-bold font-mono text-orange-400 mb-6 glow-text-orange">RECENT SYNAPSE LOGS</h3>
        <div class="space-y-6">
          <!-- Activity Item 1 -->
          <div class="flex items-center bg-gray-700 p-4 rounded-xl border border-gray-600 transition-transform duration-200 hover:scale-[1.02] dark:bg-gray-800">
            <div class="flex-shrink-0 w-16 h-16 rounded-lg overflow-hidden border-2 border-orange-500 shadow-md glow-effect-orange-sm">
              <img src="https://picsum.photos/id/1040/80/80" alt="Destination" class="w-full h-full object-cover">
            </div>
            <div class="flex-grow ml-4">
              <p class="text-lg font-semibold text-orange-300 mb-1">Trip to Kepler-186f: Red Canopy Forests</p>
              <p class="text-sm text-gray-400">Departure: 2083.05.20 <span class="text-purple-400">//</span> Status: <span class="text-green-400">COMPLETED</span></p>
              <p class="text-xs text-gray-500">Booking ID: #KX93F-AX7</p>
            </div>
            <button class="ml-4 px-4 py-2 bg-purple-600 text-white rounded-full text-sm font-bold shadow-md hover:bg-purple-700 transition-colors duration-200 glow-button-purple focus:outline-none focus:ring-2 focus:ring-purple-500">
              View Details
            </button>
          </div>
          <!-- Activity Item 2 -->
          <div class="flex items-center bg-gray-700 p-4 rounded-xl border border-gray-600 transition-transform duration-200 hover:scale-[1.02] dark:bg-gray-800">
            <div class="flex-shrink-0 w-16 h-16 rounded-lg overflow-hidden border-2 border-purple-500 shadow-md glow-effect-purple-sm">
              <img src="https://picsum.photos/id/1043/80/80" alt="Destination" class="w-full h-full object-cover">
            </div>
            <div class="flex-grow ml-4">
              <p class="text-lg font-semibold text-purple-300 mb-1">Lunar Base Alpha: Gravity Chamber Training</p>
              <p class="text-sm text-gray-400">Departure: 2084.01.10 <span class="text-orange-400">//</span> Status: <span class="text-red-400">PENDING APPROVAL</span></p>
              <p class="text-xs text-gray-500">Booking ID: #LBX2C-Y-4</p>
            </div>
            <button class="ml-4 px-4 py-2 bg-orange-600 text-white rounded-full text-sm font-bold shadow-md hover:bg-orange-700 transition-colors duration-200 glow-button-orange focus:outline-none focus:ring-2 focus:ring-orange-500">
              Modify Booking
            </button>
          </div>
          <!-- Activity Item 3 -->
          <div class="flex items-center bg-gray-700 p-4 rounded-xl border border-gray-600 transition-transform duration-200 hover:scale-[1.02] dark:bg-gray-800">
            <div class="flex-shrink-0 w-16 h-16 rounded-lg overflow-hidden border-2 border-red-500 shadow-md glow-effect-red-sm">
              <img src="https://picsum.photos/id/1051/80/80" alt="Destination" class="w-full h-full object-cover">
            </div>
            <div class="flex-grow ml-4">
              <p class="text-lg font-semibold text-red-300 mb-1">Mars Colonization Project: Phase 3 Briefing</p>
              <p class="text-sm text-gray-400">Departure: 2085.03.15 <span class="text-indigo-400">//</span> Status: <span class="text-yellow-400">CONFIRMED</span></p>
              <p class="text-xs text-gray-500">Booking ID: #MCP7E-Z1</p>
            </div>
            <button class="ml-4 px-4 py-2 bg-indigo-600 text-white rounded-full text-sm font-bold shadow-md hover:bg-indigo-700 transition-colors duration-200 glow-button-indigo focus:outline-none focus:ring-2 focus:ring-indigo-500">
              View Itinerary
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Custom Glow Effects (using pseudo-elements or custom classes) -->
  <style>
    .glow-effect-orange {
      box-shadow: 0 0 15px rgba(255, 165, 0, 0.7), 0 0 30px rgba(255, 140, 0, 0.5);
    }
    .glow-effect-orange-sm {
      filter: drop-shadow(0 0 5px rgba(255, 165, 0, 0.6));
    }
    .glow-button-orange {
      box-shadow: 0 0 8px rgba(255, 165, 0, 0.7);
    }
    .glow-button-orange:hover {
      box-shadow: 0 0 15px rgba(255, 165, 0, 0.9);
    }

    .glow-effect-purple-sm {
      filter: drop-shadow(0 0 5px rgba(128, 0, 128, 0.6));
    }
    .glow-button-purple {
      box-shadow: 0 0 8px rgba(128, 0, 128, 0.7);
    }
    .glow-button-purple:hover {
      box-shadow: 0 0 15px rgba(128, 0, 128, 0.9);
    }

    .glow-effect-red-sm {
      filter: drop-shadow(0 0 5px rgba(255, 0, 0, 0.6));
    }
    .glow-button-red {
      box-shadow: 0 0 8px rgba(255, 0, 0, 0.7);
    }

    .glow-button-indigo {
      box-shadow: 0 0 8px rgba(79, 70, 229, 0.7);
    }
    .glow-button-indigo:hover {
      box-shadow: 0 0 15px rgba(79, 70, 229, 0.9);
    }

    .glow-effect-green-sm {
      filter: drop-shadow(0 0 5px rgba(0, 128, 0, 0.6));
    }

    .glow-text-orange {
      text-shadow: 0 0 8px rgba(255, 165, 0, 0.8);
    }
    .glow-text-white-active {
        text-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
    }
  </style>

  <!-- Font Awesome for icons -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</div>

ウィッシュリストコンポーネント

ニュースやジャーナリズムのWebサイトに適した、マルチカラーグラデーションレインボーテーマを備えたミニマリストでレスポンシブなウィッシュリストコンポーネント。ダークモードのサポートとインタラクティブな要素が含まれています。

開けるプレビュー

                <div class="p-4 sm:p-6 md:p-8 lg:p-10 bg-gray-50 dark:bg-gray-900 min-h-screen font-sans">

  <h1 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-red-500 via-yellow-500 to-green-500 mb-6 sm:mb-8 lg:mb-10 text-center dark:from-red-400 dark:via-yellow-400 dark:to-green-400">
    Your Reading List
  </h1>

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

    <!-- Wishlist Item 1 -->
    <div class="relative bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden group transform hover:scale-105 transition-transform duration-300 ease-in-out border-t-4 border-l-4 border-pink-500 dark:border-pink-600">
      <img src="https://picsum.photos/400/250?random=1" alt="Article thumbnail" class="w-full h-48 object-cover object-center">
      <div class="p-4">
        <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2 line-clamp-2">The Future of AI in Journalism: A Deep Dive into Ethical Considerations</h3>
        <p class="text-sm text-gray-600 dark:text-gray-400 mb-3 line-clamp-3">Explore the ethical dilemmas and opportunities presented by artificial intelligence in the evolving landscape of news reporting and editorial processes.</p>
        <div class="flex items-center text-sm text-gray-500 dark:text-gray-400 mb-4">
          <img class="w-7 h-7 rounded-full mr-2" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Author Avatar">
          <span>Jane Doe</span>
          <span class="mx-2">•</span>
          <span>Mar 10, 2023</span>
        </div>
        <div class="flex justify-between items-center">
          <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline text-sm font-medium">Read More</a>
          <button class="p-2 rounded-full text-gray-400 hover:text-red-500 dark:text-gray-500 dark:hover:text-red-400 transition-colors duration-200">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
            </svg>
          </button>
        </div>
      </div>
    </div>

    <!-- Wishlist Item 2 -->
    <div class="relative bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden group transform hover:scale-105 transition-transform duration-300 ease-in-out border-t-4 border-l-4 border-purple-500 dark:border-purple-600">
      <img src="https://picsum.photos/400/250?random=2" alt="Article thumbnail" class="w-full h-48 object-cover object-center">
      <div class="p-4">
        <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2 line-clamp-2">The Comeback of Investigative Reporting: Why It Matters Now More Than Ever</h3>
        <p class="text-sm text-gray-600 dark:text-gray-400 mb-3 line-clamp-3">In an era of misinformation, a renewed focus on deep, investigative journalism is crucial for a well-informed public and accountable institutions.</p>
        <div class="flex items-center text-sm text-gray-500 dark:text-gray-400 mb-4">
          <img class="w-7 h-7 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Author Avatar">
          <span>John Smith</span>
          <span class="mx-2">•</span>
          <span>Feb 28, 2023</span>
        </div>
        <div class="flex justify-between items-center">
          <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline text-sm font-medium">Read More</a>
          <button class="p-2 rounded-full text-gray-400 hover:text-red-500 dark:text-gray-500 dark:hover:text-red-400 transition-colors duration-200">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
            </svg>
          </button>
        </div>
      </div>
    </div>

    <!-- Wishlist Item 3 -->
    <div class="relative bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden group transform hover:scale-105 transition-transform duration-300 ease-in-out border-t-4 border-l-4 border-blue-500 dark:border-blue-600">
      <img src="https://picsum.photos/400/250?random=3" alt="Article thumbnail" class="w-full h-48 object-cover object-center">
      <div class="p-4">
        <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2 line-clamp-2">Interactive Storytelling: Engaging Audiences in the Digital Age</h3>
        <p class="text-sm text-gray-600 dark:text-gray-400 mb-3 line-clamp-3">How news outlets are using immersive technologies and data visualizations to create compelling, interactive narratives that captivate readers.</p>
        <div class="flex items-center text-sm text-gray-500 dark:text-gray-400 mb-4">
          <img class="w-7 h-7 rounded-full mr-2" src="https://randomuser.me/api/portraits/women/3.jpg" alt="Author Avatar">
          <span>Emily White</span>
          <span class="mx-2">•</span>
          <span>Jan 15, 2023</span>
        </div>
        <div class="flex justify-between items-center">
          <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline text-sm font-medium">Read More</a>
          <button class="p-2 rounded-full text-gray-400 hover:text-red-500 dark:text-gray-500 dark:hover:text-red-400 transition-colors duration-200">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
            </svg>
          </button>
        </div>
      </div>
    </div>

    <!-- Wishlist Item 4 -->
    <div class="relative bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden group transform hover:scale-105 transition-transform duration-300 ease-in-out border-t-4 border-l-4 border-green-500 dark:border-green-600">
      <img src="https://picsum.photos/400/250?random=4" alt="Article thumbnail" class="w-full h-48 object-cover object-center">
      <div class="p-4">
        <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2 line-clamp-2">Local News Revival: Strategies for Sustaining Community Journalism</h3>
        <p class="text-sm text-gray-600 dark:text-gray-400 mb-3 line-clamp-3">Examining successful models and innovative approaches to reinvigorate local news organizations, ensuring vital information reaches communities.</p>
        <div class="flex items-center text-sm text-gray-500 dark:text-gray-400 mb-4">
          <img class="w-7 h-7 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/4.jpg" alt="Author Avatar">
          <span>David Lee</span>
          <span class="mx-2">•</span>
          <span>Jan 01, 2023</span>
        </div>
        <div class="flex justify-between items-center">
          <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline text-sm font-medium">Read More</a>
          <button class="p-2 rounded-full text-gray-400 hover:text-red-500 dark:text-gray-500 dark:hover:text-red-400 transition-colors duration-200">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
            </svg>
          </button>
        </div>
      </div>
    </div>

    <!-- Wishlist Item 5 -->
    <div class="relative bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden group transform hover:scale-105 transition-transform duration-300 ease-in-out border-t-4 border-l-4 border-yellow-500 dark:border-yellow-600">
      <img src="https://picsum.photos/400/250?random=5" alt="Article thumbnail" class="w-full h-48 object-cover object-center">
      <div class="p-4">
        <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2 line-clamp-2">The Psychology of Clickbait: Deconstructing Sensational Headlines</h3>
        <p class="text-sm text-gray-600 dark:text-gray-400 mb-3 line-clamp-3">An analytical look into the psychological triggers behind clickbait headlines and their impact on journalistic integrity and reader trust.</p>
        <div class="flex items-center text-sm text-gray-500 dark:text-gray-400 mb-4">
          <img class="w-7 h-7 rounded-full mr-2" src="https://randomuser.me/api/portraits/women/5.jpg" alt="Author Avatar">
          <span>Sarah Chen</span>
          <span class="mx-2">•</span>
          <span>Dec 18, 2022</span>
        </div>
        <div class="flex justify-between items-center">
          <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline text-sm font-medium">Read More</a>
          <button class="p-2 rounded-full text-gray-400 hover:text-red-500 dark:text-gray-500 dark:hover:text-red-400 transition-colors duration-200">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
            </svg>
          </button>
        </div>
      </div>
    </div>

    <!-- Wishlist Item 6 -->
    <div class="relative bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden group transform hover:scale-105 transition-transform duration-300 ease-in-out border-t-4 border-l-4 border-red-500 dark:border-red-600">
      <img src="https://picsum.photos/400/250?random=6" alt="Article thumbnail" class="w-full h-48 object-cover object-center">
      <div class="p-4">
        <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2 line-clamp-2">Fact-Checking in the Digital Age: Tools and Techniques for Journalists</h3>
        <p class="text-sm text-gray-600 dark:text-gray-400 mb-3 line-clamp-3">A guide to essential resources and methodologies for verifying information and combating the spread of disinformation in online environments.</p>
        <div class="flex items-center text-sm text-gray-500 dark:text-gray-400 mb-4">
          <img class="w-7 h-7 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/6.jpg" alt="Author Avatar">
          <span>Michael Brown</span>
          <span class="mx-2">•</span>
          <span>Nov 05, 2022</span>
        </div>
        <div class="flex justify-between items-center">
          <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline text-sm font-medium">Read More</a>
          <button class="p-2 rounded-full text-gray-400 hover:text-red-500 dark:text-gray-500 dark:hover:text-red-400 transition-colors duration-200">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
            </svg>
          </button>
        </div>
      </div>
    </div>

  </div>
</div>

グラデーションセピアバッジ

セピア/ブラウンのグラデーショントランジションを備えたレスポンシブ音楽/オーディオ固有のバッジコンポーネントで、ジャンル、ムード、アーティストカテゴリの表示に適しています。ダークモードのサポートが含まれています。

開けるプレビュー

                <div class="p-6 sm:p-8 bg-gradient-to-br from-amber-50 to-orange-100 dark:from-neutral-900 dark:to-neutral-800 min-h-screen font-sans antialiased">
  <div class="max-w-7xl mx-auto">
    <h2 class="text-3xl sm:text-4xl font-extrabold text-stone-800 dark:text-stone-100 mb-8 sm:mb-12 text-center">
      Explore Music Categories
    </h2>

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

      <!-- Badge 1: Jazz -->
      <div class="group relative overflow-hidden rounded-xl shadow-lg ring-1 ring-amber-200 dark:ring-neutral-700
                  bg-gradient-to-br from-amber-100 to-orange-200 dark:from-neutral-800 dark:to-neutral-700
                  transition-all duration-300 ease-in-out transform hover:scale-105 hover:shadow-xl">
        <img src="https://picsum.photos/id/1049/300/200" alt="Jazz music icon" class="w-full h-24 sm:h-32 object-cover object-center transition-all duration-300 group-hover:opacity-80">
        <div class="p-3 sm:p-4 text-center">
          <p class="text-sm sm:text-base font-semibold text-stone-800 dark:text-stone-200">Jazz</p>
          <p class="text-xs text-stone-600 dark:text-stone-400 mt-1">Smooth & Serene</p>
        </div>
        <div class="absolute inset-0 bg-gradient-to-bl from-amber-400/20 to-orange-500/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
      </div>

      <!-- Badge 2: Rock -->
      <div class="group relative overflow-hidden rounded-xl shadow-lg ring-1 ring-amber-200 dark:ring-neutral-700
                  bg-gradient-to-br from-amber-100 to-orange-200 dark:from-neutral-800 dark:to-neutral-700
                  transition-all duration-300 ease-in-out transform hover:scale-105 hover:shadow-xl">
        <img src="https://picsum.photos/id/15/300/200" alt="Rock music icon" class="w-full h-24 sm:h-32 object-cover object-center transition-all duration-300 group-hover:opacity-80">
        <div class="p-3 sm:p-4 text-center">
          <p class="text-sm sm:text-base font-semibold text-stone-800 dark:text-stone-200">Rock</p>
          <p class="text-xs text-stone-600 dark:text-stone-400 mt-1">Energetic & Bold</p>
        </div>
        <div class="absolute inset-0 bg-gradient-to-bl from-amber-400/20 to-orange-500/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
      </div>

      <!-- Badge 3: Electronic -->
      <div class="group relative overflow-hidden rounded-xl shadow-lg ring-1 ring-amber-200 dark:ring-neutral-700
                  bg-gradient-to-br from-amber-100 to-orange-200 dark:from-neutral-800 dark:to-neutral-700
                  transition-all duration-300 ease-in-out transform hover:scale-105 hover:shadow-xl">
        <img src="https://picsum.photos/id/1084/300/200" alt="Electronic music icon" class="w-full h-24 sm:h-32 object-cover object-center transition-all duration-300 group-hover:opacity-80">
        <div class="p-3 sm:p-4 text-center">
          <p class="text-sm sm:text-base font-semibold text-stone-800 dark:text-stone-200">Electronic</p>
          <p class="text-xs text-stone-600 dark:text-stone-400 mt-1">Pulsing & Modern</p>
        </div>
        <div class="absolute inset-0 bg-gradient-to-bl from-amber-400/20 to-orange-500/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
      </div>

      <!-- Badge 4: Classical -->
      <div class="group relative overflow-hidden rounded-xl shadow-lg ring-1 ring-amber-200 dark:ring-neutral-700
                  bg-gradient-to-br from-amber-100 to-orange-200 dark:from-neutral-800 dark:to-neutral-700
                  transition-all duration-300 ease-in-out transform hover:scale-105 hover:shadow-xl">
        <img src="https://picsum.photos/id/123/300/200" alt="Classical music icon" class="w-full h-24 sm:h-32 object-cover object-center transition-all duration-300 group-hover:opacity-80">
        <div class="p-3 sm:p-4 text-center">
          <p class="text-sm sm:text-base font-semibold text-stone-800 dark:text-stone-200">Classical</p>
          <p class="text-xs text-stone-600 dark:text-stone-400 mt-1">Timeless & Grand</p>
        </div>
        <div class="absolute inset-0 bg-gradient-to-bl from-amber-400/20 to-orange-500/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
      </div>

      <!-- Badge 5: Hip Hop -->
      <div class="group relative overflow-hidden rounded-xl shadow-lg ring-1 ring-amber-200 dark:ring-neutral-700
                  bg-gradient-to-br from-amber-100 to-orange-200 dark:from-neutral-800 dark:to-neutral-700
                  transition-all duration-300 ease-in-out transform hover:scale-105 hover:shadow-xl">
        <img src="https://picsum.photos/id/1025/300/200" alt="Hip Hop music icon" class="w-full h-24 sm:h-32 object-cover object-center transition-all duration-300 group-hover:opacity-80">
        <div class="p-3 sm:p-4 text-center">
          <p class="text-sm sm:text-base font-semibold text-stone-800 dark:text-stone-200">Hip Hop</p>
          <p class="text-xs text-stone-600 dark:text-stone-400 mt-1">Rhythmic & Urban</p>
        </div>
        <div class="absolute inset-0 bg-gradient-to-bl from-amber-400/20 to-orange-500/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
      </div>

      <!-- Badge 6: Country -->
      <div class="group relative overflow-hidden rounded-xl shadow-lg ring-1 ring-amber-200 dark:ring-neutral-700
                  bg-gradient-to-br from-amber-100 to-orange-200 dark:from-neutral-800 dark:to-neutral-700
                  transition-all duration-300 ease-in-out transform hover:scale-105 hover:shadow-xl">
        <img src="https://picsum.photos/id/1069/300/200" alt="Country music icon" class="w-full h-24 sm:h-32 object-cover object-center transition-all duration-300 group-hover:opacity-80">
        <div class="p-3 sm:p-4 text-center">
          <p class="text-sm sm:text-base font-semibold text-stone-800 dark:text-stone-200">Country</p>
          <p class="text-xs text-stone-600 dark:text-stone-400 mt-1">Rustic & Soulful</p>
        </div>
        <div class="absolute inset-0 bg-gradient-to-bl from-amber-400/20 to-orange-500/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
      </div>

      <!-- Badge 7: Pop -->
      <div class="group relative overflow-hidden rounded-xl shadow-lg ring-1 ring-amber-200 dark:ring-neutral-700
                  bg-gradient-to-br from-amber-100 to-orange-200 dark:from-neutral-800 dark:to-neutral-700
                  transition-all duration-300 ease-in-out transform hover:scale-105 hover:shadow-xl">
        <img src="https://picsum.photos/id/1012/300/200" alt="Pop music icon" class="w-full h-24 sm:h-32 object-cover object-center transition-all duration-300 group-hover:opacity-80">
        <div class="p-3 sm:p-4 text-center">
          <p class="text-sm sm:text-base font-semibold text-stone-800 dark:text-stone-200">Pop</p>
          <p class="text-xs text-stone-600 dark:text-stone-400 mt-1">Catchy & Mainstream</p>
        </div>
        <div class="absolute inset-0 bg-gradient-to-bl from-amber-400/20 to-orange-500/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
      </div>

      <!-- Badge 8: R&B -->
      <div class="group relative overflow-hidden rounded-xl shadow-lg ring-1 ring-amber-200 dark:ring-neutral-700
                  bg-gradient-to-br from-amber-100 to-orange-200 dark:from-neutral-800 dark:to-neutral-700
                  transition-all duration-300 ease-in-out transform hover:scale-105 hover:shadow-xl">
        <img src="https://picsum.photos/id/152/300/200" alt="R&B music icon" class="w-full h-24 sm:h-32 object-cover object-center transition-all duration-300 group-hover:opacity-80">
        <div class="p-3 sm:p-4 text-center">
          <p class="text-sm sm:text-base font-semibold text-stone-800 dark:text-stone-200">R&B</p>
          <p class="text-xs text-stone-600 dark:text-stone-400 mt-1">Smooth & Soulful</p>
        </div>
        <div class="absolute inset-0 bg-gradient-to-bl from-amber-400/20 to-orange-500/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
      </div>

      <!-- Badge 9: Indie -->
      <div class="group relative overflow-hidden rounded-xl shadow-lg ring-1 ring-amber-200 dark:ring-neutral-700
                  bg-gradient-to-br from-amber-100 to-orange-200 dark:from-neutral-800 dark:to-neutral-700
                  transition-all duration-300 ease-in-out transform hover:scale-105 hover:shadow-xl">
        <img src="https://picsum.photos/id/40/300/200" alt="Indie music icon" class="w-full h-24 sm:h-32 object-cover object-center transition-all duration-300 group-hover:opacity-80">
        <div class="p-3 sm:p-4 text-center">
          <p class="text-sm sm:text-base font-semibold text-stone-800 dark:text-stone-200">Indie</p>
          <p class="text-xs text-stone-600 dark:text-stone-400 mt-1">Alternative & Unique</p>
        </div>
        <div class="absolute inset-0 bg-gradient-to-bl from-amber-400/20 to-orange-500/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
      </div>

      <!-- Badge 10: Folk -->
      <div class="group relative overflow-hidden rounded-xl shadow-lg ring-1 ring-amber-200 dark:ring-neutral-700
                  bg-gradient-to-br from-amber-100 to-orange-200 dark:from-neutral-800 dark:to-neutral-700
                  transition-all duration-300 ease-in-out transform hover:scale-105 hover:shadow-xl">
        <img src="https://picsum.photos/id/29/300/200" alt="Folk music icon" class="w-full h-24 sm:h-32 object-cover object-center transition-all duration-300 group-hover:opacity-80">
        <div class="p-3 sm:p-4 text-center">
          <p class="text-sm sm:text-base font-semibold text-stone-800 dark:text-stone-200">Folk</p>
          <p class="text-xs text-stone-600 dark:text-stone-400 mt-1">Acoustic & Storytelling</p>
        </div>
        <div class="absolute inset-0 bg-gradient-to-bl from-amber-400/20 to-orange-500/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
      </div>

    </div>

    <div class="mt-12 text-center">
      <a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-full shadow-sm 
      bg-gradient-to-r from-amber-600 to-orange-700 text-white 
      hover:from-amber-700 hover:to-orange-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500
      dark:from-amber-700 dark:to-orange-800 dark:hover:from-amber-800 dark:hover:to-orange-900 dark:focus:ring-amber-600
      transition-all duration-300 ease-in-out">
        View All Genres
        <svg class="ml-2 -mr-1 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path fill-rule="evenodd" d="M10.293 15.707a1 1 0 010-1.414L13.586 11H4a1 1 0 110-2h9.586l-3.293-3.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd" />
        </svg>
      </a>
    </div>
  </div>
</div>

フィードバックコンポーネントコンポーネント

コンサルティング/サービスWebサイトに適したシンプルで応答性の高いフィードバックコンポーネントで、トライアドカラースキームとマイクロインタラクション設計原則を特長としています。ダークモードのサポートが含まれています。

開けるプレビュー

                <div class="font-sans antialiased text-gray-900 bg-white dark:bg-gray-900 dark:text-gray-100 min-h-screen flex items-center justify-center p-4">
  <div class="w-full max-w-md bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 hover:shadow-2xl">
    <div class="p-6 sm:p-8 space-y-6">
      <h2 class="text-2xl sm:text-3xl font-bold text-center text-indigo-700 dark:text-indigo-400 mb-4 tracking-tight">
        We Value Your Feedback!
      </h2>
      <p class="text-center text-gray-600 dark:text-gray-300 leading-relaxed">
        Help us improve our services by sharing your thoughts.
      </p>

      <form class="space-y-6">
        <div>
          <label for="feedback-type" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">
            What type of feedback is this?
          </label>
          <div class="relative">
            <select id="feedback-type" name="feedback-type" class="block w-full py-2 px-3 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm appearance-none transition-colors duration-200">
              <option value="general">General Feedback</option>
              <option value="suggestion">Suggestion</option>
              <option value="bug">Bug Report</option>
              <option value="compliment">Compliment</option>
              <option value="other">Other</option>
            </select>
            <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700 dark:text-gray-200">
              <svg class="h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
              </svg>
            </div>
          </div>
        </div>

        <div>
          <label for="message" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">
            Your Message
          </label>
          <textarea id="message" name="message" rows="4" class="block w-full py-2 px-3 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-teal-500 focus:border-teal-500 sm:text-sm transition-colors duration-200 placeholder-gray-400 dark:placeholder-gray-500" placeholder="Tell us what's on your mind..."></textarea>
        </div>

        <div>
          <label class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">How would you rate your experience?</label>
          <div class="flex justify-center space-x-2">
            <button type="button" class="rating-btn group flex flex-col items-center justify-center p-2 rounded-lg transition-all duration-200 transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900 border border-transparent hover:border-orange-400 dark:hover:border-orange-600">
              <span class="text-2xl lg:text-3xl transition-transform duration-200 group-hover:-translate-y-1 group-active:translate-y-0">😡</span>
              <span class="text-xs text-gray-500 dark:text-gray-400 group-hover:text-orange-600 dark:group-hover:text-orange-400 mt-1">Poor</span>
            </button>
            <button type="button" class="rating-btn group flex flex-col items-center justify-center p-2 rounded-lg transition-all duration-200 transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900 border border-transparent hover:border-orange-400 dark:hover:border-orange-600">
              <span class="text-2xl lg:text-3xl transition-transform duration-200 group-hover:-translate-y-1 group-active:translate-y-0">😐</span>
              <span class="text-xs text-gray-500 dark:text-gray-400 group-hover:text-orange-600 dark:group-hover:text-orange-400 mt-1">Okay</span>
            </button>
            <button type="button" class="rating-btn group flex flex-col items-center justify-center p-2 rounded-lg transition-all duration-200 transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900 border border-transparent hover:border-orange-400 dark:hover:border-orange-600">
              <span class="text-2xl lg:text-3xl transition-transform duration-200 group-hover:-translate-y-1 group-active:translate-y-0">😊</span>
              <span class="text-xs text-gray-500 dark:text-gray-400 group-hover:text-orange-600 dark:group-hover:text-orange-400 mt-1">Good</span>
            </button>
          </div>
        </div>

        <button type="submit" class="w-full flex items-center justify-center px-4 py-2 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 dark:bg-indigo-500 dark:hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-900 transition-all duration-200 transform hover:-translate-y-0.5 active:translate-y-0 active:scale-98">
          <svg class="-ml-1 mr-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
            <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" />
          </svg>
          Submit Feedback
        </button>
      </form>
    </div>
  </div>
</div>

メディア埋め込みコンポーネント - 暗号/ブロックチェーン

暗号通貨またはブロックチェーンアプリケーション用に設計されたシンプルで応答性の高いメディア埋め込みコンポーネントで、セピア/ブラウンの色調と目の疲れを軽減するダークモードのサポートが特徴です。

開けるプレビュー

                <div class="flex items-center justify-center min-h-screen bg-stone-100 dark:bg-stone-900 p-4 sm:p-6 lg:p-8">
  <div class="w-full max-w-xl rounded-lg shadow-xl overflow-hidden bg-stone-200 dark:bg-stone-800 transition-colors duration-300 transform">
    <!-- Header -->
    <div class="flex items-center justify-between p-4 sm:p-5 border-b border-stone-300 dark:border-stone-700">
      <div class="flex items-center">
        <svg class="w-6 h-6 sm:w-7 sm:h-7 text-stone-700 dark:text-stone-300" 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="M9.75 17L9 20l-1 1h8l-1-1l-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
        </svg>
        <h3 class="ml-2 text-lg sm:text-xl font-semibold text-stone-800 dark:text-stone-200">Decentralized Insights</h3>
      </div>
      <button class="p-2 rounded-full hover:bg-stone-300 dark:hover:bg-stone-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-stone-400 dark:focus:ring-offset-stone-800 dark:focus:ring-stone-600 transition-colors duration-200">
        <svg class="w-5 h-5 sm:w-6 sm:h-6 text-stone-600 dark:text-stone-400" 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="M6 18L18 6M6 6l12 12"></path>
        </svg>
      </button>
    </div>

    <!-- Media Placeholder -->
    <div class="relative w-full overflow-hidden" style="padding-top: 56.25%;">
      <!-- 16:9 Aspect Ratio -->
      <iframe class="absolute top-0 left-0 w-full h-full" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>

    <!-- Content -->
    <div class="p-4 sm:p-5">
      <h4 class="text-xl sm:text-2xl font-bold text-stone-800 dark:text-stone-100 mb-2 leading-tight">Understanding Bitcoin Halving: A Deep Dive</h4>
      <p class="text-sm sm:text-base text-stone-700 dark:text-stone-300 mb-4">
        Explore the mechanisms and historical impact of Bitcoin halving events on its supply, scarcity, and market dynamics.
        Essential knowledge for every crypto enthusiast.
      </p>
      <div class="flex items-center text-sm sm:text-base text-stone-600 dark:text-stone-400">
        <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="Author Avatar" class="w-8 h-8 sm:w-10 sm:h-10 rounded-full mr-3 border-2 border-stone-400 dark:border-stone-600">
        <div>
          <span class="font-medium text-stone-700 dark:text-stone-300">Crypto Insights Hub</span>
          <span class="block text-stone-500 dark:text-stone-400 text-xs sm:text-sm">Published 2 days ago</span>
        </div>
      </div>
    </div>

    <!-- Footer/Actions -->
    <div class="p-4 sm:p-5 border-t border-stone-300 dark:border-stone-700 flex items-center justify-between">
      <button class="flex items-center text-stone-700 dark:text-stone-300 hover:text-brown-700 dark:hover:text-brown-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brown-400 dark:focus:ring-offset-stone-800 dark:focus:ring-brown-600 transition-colors duration-200">
        <svg class="w-5 h-5 sm:w-6 sm:h-6 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="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
        </svg>
        <span class="text-sm sm:text-base">Like</span>
      </button>
      <button class="px-4 py-2 bg-amber-700 dark:bg-amber-600 text-white rounded-md text-sm sm:text-base font-semibold shadow-md hover:bg-amber-800 dark:hover:bg-amber-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-500 dark:focus:ring-offset-stone-800 dark:focus:ring-amber-400 transition-colors duration-200">
        Share to DApp
      </button>
    </div>
  </div>
</div>

1 ... 71 72 73 74 75 ... 335