検索コンポーネント

カテゴリ

フッター

連絡先情報、著作権などが記載されたWebサイトの下部セクション。

Industrial_Candy_Footer_Component

フォーラム/コミュニティプラットフォーム用のレスポンシブフッターコンポーネントで、「インダストリアル」の美学と「キャンディ/スウィート」のアクセントが特徴です。ナビゲーションリンク、ソーシャルメディアアイコン、著作権、ニュースレターのサインアップが含まれ、ダークモードを完全にサポートしています。

開けるプレビュー

                <footer class="bg-zinc-100 dark:bg-zinc-900 text-zinc-900 dark:text-zinc-50 font-sans border-t-4 border-t-pink-500 dark:border-t-pink-700 shadow-lg">
  <div class="container mx-auto px-4 py-12 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12">

    <!-- Section 1: Logo & Tagline -->
    <div class="flex flex-col items-start">
      <a href="#" class="text-4xl lg:text-5xl font-extrabold tracking-tighter text-pink-500 dark:text-pink-400 mb-4 font-mono transform hover:scale-105 transition-transform duration-300">
        FORUM<span class="text-emerald-500 dark:text-emerald-400">HUB</span>
      </a>
      <p class="text-sm text-zinc-700 dark:text-zinc-300 leading-relaxed max-w-xs">
        Your vibrant community for discussions, insights, and connections. Built on solid ground.
      </p>
      <div class="mt-6 flex flex-wrap gap-4 text-zinc-600 dark:text-zinc-400">
        <p class="text-xs font-semibold uppercase tracking-wider">Powered by:</p>
        <span class="text-xs bg-pink-200 dark:bg-pink-800 text-pink-700 dark:text-pink-300 px-2 py-0.5 rounded-full shadow-inner">Gears</span>
        <span class="text-xs bg-emerald-200 dark:bg-emerald-800 text-emerald-700 dark:text-emerald-300 px-2 py-0.5 rounded-full shadow-inner">Circuits</span>
      </div>
    </div>

    <!-- Section 2: Quick Links -->
    <div>
      <h3 class="text-lg font-bold uppercase tracking-wide text-zinc-800 dark:text-zinc-100 mb-6 border-b-2 border-emerald-500 dark:border-emerald-700 pb-2 inline-block">
        Quick Links
      </h3>
      <ul class="space-y-4">
        <li>
          <a href="#" class="text-zinc-700 dark:text-zinc-300 hover:text-pink-500 dark:hover:text-pink-400 transition-colors duration-200 text-base font-medium relative group">
            Home
            <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-emerald-500 dark:bg-emerald-400 group-hover:w-full transition-all duration-300"></span>
          </a>
        </li>
        <li>
          <a href="#" class="text-zinc-700 dark:text-zinc-300 hover:text-pink-500 dark:hover:text-pink-400 transition-colors duration-200 text-base font-medium relative group">
            Forums
            <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-emerald-500 dark:bg-emerald-400 group-hover:w-full transition-all duration-300"></span>
          </a>
        </li>
        <li>
          <a href="#" class="text-zinc-700 dark:text-zinc-300 hover:text-pink-500 dark:hover:text-pink-400 transition-colors duration-200 text-base font-medium relative group">
            Members
            <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-emerald-500 dark:bg-emerald-400 group-hover:w-full transition-all duration-300"></span>
          </a>
        </li>
        <li>
          <a href="#" class="text-zinc-700 dark:text-zinc-300 hover:text-pink-500 dark:hover:text-pink-400 transition-colors duration-200 text-base font-medium relative group">
            Guidelines
            <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-emerald-500 dark:bg-emerald-400 group-hover:w-full transition-all duration-300"></span>
          </a>
        </li>
      </ul>
    </div>

    <!-- Section 3: Resources -->
    <div>
      <h3 class="text-lg font-bold uppercase tracking-wide text-zinc-800 dark:text-zinc-100 mb-6 border-b-2 border-emerald-500 dark:border-emerald-700 pb-2 inline-block">
        Resources
      </h3>
      <ul class="space-y-4">
        <li>
          <a href="#" class="text-zinc-700 dark:text-zinc-300 hover:text-pink-500 dark:hover:text-pink-400 transition-colors duration-200 text-base font-medium relative group">
            FAQ
            <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-emerald-500 dark:bg-emerald-400 group-hover:w-full transition-all duration-300"></span>
          </a>
        </li>
        <li>
          <a href="#" class="text-zinc-700 dark:text-zinc-300 hover:text-pink-500 dark:hover:text-pink-400 transition-colors duration-200 text-base font-medium relative group">
            Support
            <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-emerald-500 dark:bg-emerald-400 group-hover:w-full transition-all duration-300"></span>
          </a>
        </li>
        <li>
          <a href="#" class="text-zinc-700 dark:text-zinc-300 hover:text-pink-500 dark:hover:text-pink-400 transition-colors duration-200 text-base font-medium relative group">
            Privacy Policy
            <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-emerald-500 dark:bg-emerald-400 group-hover:w-full transition-all duration-300"></span>
          </a>
        </li>
        <li>
          <a href="#" class="text-zinc-700 dark:text-zinc-300 hover:text-pink-500 dark:hover:text-pink-400 transition-colors duration-200 text-base font-medium relative group">
            Terms of Service
            <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-emerald-500 dark:bg-emerald-400 group-hover:w-full transition-all duration-300"></span>
          </a>
        </li>
      </ul>
    </div>

    <!-- Section 4: Newsletter & Social -->
    <div>
      <h3 class="text-lg font-bold uppercase tracking-wide text-zinc-800 dark:text-zinc-100 mb-6 border-b-2 border-emerald-500 dark:border-emerald-700 pb-2 inline-block">
        Stay Connected
      </h3>
      <p class="text-zinc-700 dark:text-zinc-300 mb-4 text-sm">
        Join our newsletter for community updates and exclusive content.
      </p>
      <form class="flex flex-col sm:flex-row gap-2 mb-8">
        <input
          type="email"
          placeholder="Your email..."
          aria-label="Email for newsletter"
          class="flex-grow px-4 py-2 rounded-lg bg-zinc-200 dark:bg-zinc-800 text-zinc-900 dark:text-zinc-50 placeholder-zinc-500 dark:placeholder-zinc-400
                 border-2 border-zinc-300 dark:border-zinc-700 focus:outline-none focus:border-pink-500 dark:focus:border-pink-400
                 transition-colors duration-200 shadow-inner text-sm"
        />
        <button
          type="submit"
          aria-label="Subscribe to newsletter"
          class="bg-pink-500 dark:bg-pink-600 hover:bg-pink-600 dark:hover:bg-pink-700 text-white font-semibold py-2 px-5 rounded-lg
                 transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95
                 focus:outline-none focus:ring-2 focus:ring-pink-400 dark:focus:ring-pink-500 focus:ring-opacity-75 relative overflow-hidden text-sm"
        >
          <span class="relative z-10">Subscribe</span>
          <span class="absolute top-0 left-0 w-full h-full bg-pink-700 dark:bg-pink-800 opacity-0 hover:opacity-10 transition-opacity duration-300"></span>
        </button>
      </form>

      <h4 class="text-md font-bold uppercase tracking-wide text-zinc-800 dark:text-zinc-100 mb-4">Follow Us</h4>
      <div class="flex space-x-6">
        <a href="#" aria-label="Follow us on Facebook" class="text-zinc-700 dark:text-zinc-300 hover:text-emerald-500 dark:hover:text-emerald-400 transition-colors duration-200 text-2xl transform hover:scale-125 transition-transform duration-200">
          <svg fill="currentColor" viewBox="0 0 24 24" width="1em" height="1em"><path d="M12 2.04C6.54 2.04 2 6.51 2 11.94c0 5.09 3.69 9.35 8.5 10.32v-7.31H7.81v-3.01h2.69V8.58c0-2.6 1.59-4.01 3.88-4.01 1.11 0 2.06.08 2.34.12v2.78h-1.64c-1.29 0-1.55.61-1.55 1.51v1.98h3.08l-.5 3.01h-2.58V22.26c4.98-.97 8.5-5.23 8.5-10.32 0-5.43-4.54-9.9-10.04-9.9z"></path></svg>
        </a>
        <a href="#" aria-label="Follow us on Twitter" class="text-zinc-700 dark:text-zinc-300 hover:text-emerald-500 dark:hover:text-emerald-400 transition-colors duration-200 text-2xl transform hover:scale-125 transition-transform duration-200">
          <svg fill="currentColor" viewBox="0 0 24 24" width="1em" height="1em"><path d="M22.46 6c-.77.34-1.6.56-2.46.66.89-.53 1.57-1.37 1.89-2.37-.83.49-1.74.85-2.73 1.05C18.18 4.3 17.06 4 15.89 4c-3.3 0-5.99 2.68-5.99 5.99 0 .47.05.93.13 1.37-4.98-.25-9.39-2.64-12.34-6.28-.52.87-.82 1.87-.82 2.94 0 2.07 1.05 3.89 2.64 4.97-.8-.02-1.55-.24-2.2-.6v.07c0 2.9 2.06 5.31 4.79 5.86-.47.13-.96.2-1.47.2-.36 0-.71-.03-1.05-.1.76 2.37 2.97 4.1 5.6 4.14-2.05 1.61-4.64 2.57-7.44 2.57-.49 0-.96-.03-1.43-.09 2.64 1.7 5.77 2.7 9.17 2.7 10.99 0 17.02-9.12 17.02-17.02 0-.26-.01-.52-.02-.78.73-.53 1.36-1.19 1.86-1.92z"></path></svg>
        </a>
        <a href="#" aria-label="Follow us on Instagram" class="text-zinc-700 dark:text-zinc-300 hover:text-emerald-500 dark:hover:text-emerald-400 transition-colors duration-200 text-2xl transform hover:scale-125 transition-transform duration-200">
          <svg fill="currentColor" viewBox="0 0 24 24" width="1em" height="1em"><path d="M7.8 2h8.4C19.4 2 22 4.6 22 7.8v8.4c0 3.2-2.6 5.8-5.8 5.8H7.8C4.6 22 2 19.4 2 16.2V7.8C2 4.6 4.6 2 7.8 2zm-.2 2A2.8 2.8 0 005 6.8v8.4C5 17.1 6.9 19 9.2 19h8.4c2.3 0 4.2-1.9 4.2-4.2V7.8A2.8 2.8 0 0019.2 5H7.6zm9.2-.7h.8v.8h-.8v-.8zm-5.4 2.2c-3.1 0-5.7 2.5-5.7 5.7s2.5 5.7 5.7 5.7 5.7-2.5 5.7-5.7-2.6-5.7-5.7-5.7zm0 2c2 0 3.7 1.6 3.7 3.7S14 17.7 12 17.7 8.3 16.1 8.3 14 10 10.3 12 10.3z"></path></svg>
        </a>
        <a href="#" aria-label="Follow us on LinkedIn" class="text-zinc-700 dark:text-zinc-300 hover:text-emerald-500 dark:hover:text-emerald-400 transition-colors duration-200 text-2xl transform hover:scale-125 transition-transform duration-200">
          <svg fill="currentColor" viewBox="0 0 24 24" width="1em" height="1em"><path d="M20.5 2h-17A1.5 1.5 0 002 3.5v17A1.5 1.5 0 003.5 22h17a1.5 1.5 0 001.5-1.5v-17A1.5 1.5 0 0020.5 2zm-12 17.5h-3v-7h3zM6.91 9.4c-1.12 0-2-.82-2-1.99 0-1.18.88-2 2-2.01 1.12 0 2 .82 2 1.99S8.03 9.4 6.91 9.4zm13.11 10.1h-3.05a.5.5 0 01-.5-.5v-4.38c0-.77-.07-1.46-.86-1.46-.72 0-1.22.49-1.42 1.05-.09.25-.13.58-.13.91v4.08a.5.5 0 01-.5.5h-2.91a.5.5 0 01-.5-.5V12c0-1.3.01-2.6.01-3.69-.01-.72-.08-1.39-.77-1.39-.71 0-1.22.49-1.42 1.05-.09.25-.13.59-.13.92v6.62a.5.5 0 01-.5.5h-3.05a.5.5 0 01-.5-.5v-7h3v1.27a.5.5 0 01.12.33c.48-.68 1.18-1.22 2.76-1.22 3.12 0 5.48 2.05 5.48 6.46v5.82a.5.5 0 01-.5.5zM12 11h-3v-2h3v2z"></path></svg>
        </a>
      </div>
    </div>
  </div>

  <!-- Bottom Bar: Copyright & Theme Toggle (Placeholder) -->
  <div class="bg-zinc-200 dark:bg-zinc-800 py-6 border-t border-t-zinc-300 dark:border-t-zinc-700">
    <div class="container mx-auto px-4 flex flex-col md:flex-row justify-between items-center text-sm text-zinc-600 dark:text-zinc-400">
      <p>&copy; 2023 ForumHub. All rights reserved. Built with <span class="text-pink-500 dark:text-pink-400">&hearts;</span> by Community Devs.</p>
      <div class="mt-4 md:mt-0 flex items-center space-x-4">
        <span class="font-semibold">Industrial Charm, Sweet Vibes.</span>
        <!-- Placeholder for a real theme toggle: -->
        <button
          aria-label="Toggle dark mode"
          class="bg-zinc-300 dark:bg-zinc-700 text-zinc-800 dark:text-zinc-200 px-3 py-1 rounded-full
                 hover:bg-zinc-400 dark:hover:bg-zinc-600 transition-colors duration-200 text-xs font-bold shadow-sm"
        >
          Toggle Theme
        </button>
      </div>
    </div>
  </div>
</footer>

Luxury_Pastel_Government_Footer

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

開けるプレビュー

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

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

サイバーパンクフッターコンポーネント

パープル/バイオレットトーンを使用した未来的なサイバーパンクの美学を備えたシンプルで応答性の高いフッターコンポーネントで、テクノロジー/ SaaSアプリケーションに適しています。ダークモードのサポートが含まれています。

開けるプレビュー

                <footer class="bg-black text-gray-300 py-8 px-4 sm:px-6 lg:px-8 shadow-inner shadow-purple-900/50 dark:bg-gray-950">
  <div class="max-w-7xl mx-auto flex flex-col items-center justify-between md:flex-row">
    
    <!-- Logo/Brand Name (Left/Top) -->
    <div class="mb-4 md:mb-0 text-center md:text-left">
      <a href="#" class="text-2xl font-extrabold tracking-tight text-purple-400 hover:text-purple-300 transition duration-300 ease-in-out glow-text">
        SYNAPTIC.AI
      </a>
      <p class="text-xs text-purple-600 mt-1 dark:text-purple-500">Unlocking Future Potential</p>
    </div>

    <!-- Navigation Links (Center) -->
    <nav class="flex flex-wrap justify-center gap-x-6 gap-y-2 mb-4 md:mb-0">
      <a href="#" class="text-sm text-purple-400 hover:text-purple-300 transition duration-300 ease-in-out relative group">
        Products
        <span class="absolute inset-x-0 bottom-0 h-0.5 bg-purple-500 transform scale-x-0 group-hover:scale-x-100 transition-transform origin-left"></span>
      </a>
      <a href="#" class="text-sm text-purple-400 hover:text-purple-300 transition duration-300 ease-in-out relative group">
        Solutions
        <span class="absolute inset-x-0 bottom-0 h-0.5 bg-purple-500 transform scale-x-0 group-hover:scale-x-100 transition-transform origin-left"></span>
      </a>
      <a href="#" class="text-sm text-purple-400 hover:text-purple-300 transition duration-300 ease-in-out relative group">
        Pricing
        <span class="absolute inset-x-0 bottom-0 h-0.5 bg-purple-500 transform scale-x-0 group-hover:scale-x-100 transition-transform origin-left"></span>
      </a>
      <a href="#" class="text-sm text-purple-400 hover:text-purple-300 transition duration-300 ease-in-out relative group">
        Contact
        <span class="absolute inset-x-0 bottom-0 h-0.5 bg-purple-500 transform scale-x-0 group-hover:scale-x-100 transition-transform origin-left"></span>
      </a>
    </nav>

    <!-- Copyright (Right/Bottom) -->
    <div class="text-center md:text-right">
      <p class="text-xs text-purple-700 dark:text-purple-600">&copy; 2077 SYNAPTIC.AI. All rights reserved.</p>
    </div>
  </div>
</footer>

<style>
  /* This style block is for demonstration and not part of the standard Tailwind CSS utility approach.
     It's meant to achieve a 'neon glow' effect which is typically done with custom CSS 
     or by extending Tailwind's config with plugins. For pure utility classes, 
     consider alternatives like shadow-lg with a colored shadow.
     For this specific request, a minimal custom CSS for the 'glow' is used. */
  .glow-text {
    text-shadow: 0 0 5px rgba(192, 132, 252, 0.7),
                 0 0 10px rgba(192, 132, 252, 0.5),
                 0 0 15px rgba(192, 132, 252, 0.3);
  }
  .dark .glow-text {
    text-shadow: 0 0 5px rgba(168, 85, 247, 0.8),
                 0 0 10px rgba(168, 85, 247, 0.6),
                 0 0 15px rgba(168, 85, 247, 0.4);
  }
</style>

Glassmorphism_Footer_Component

ブッキング/予約システム用に設計されたレスポンシブなglassmorphismスタイルのフッターコンポーネントで、補色の配色、インタラクティブな要素、および完全なダークモードのサポートを特徴としています。

開けるプレビュー

                <footer class="relative bg-blue-50 dark:bg-gray-900 py-12 px-4 sm:px-6 lg:px-8 overflow-hidden">
  <!-- Background elements for glassmorphism effect -->
  <div class="absolute inset-0 z-0 opacity-20 dark:opacity-10">
    <div class="absolute top-1/4 left-1/4 w-60 h-60 bg-purple-300 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob dark:bg-purple-700"></div>
    <div class="absolute top-1/2 right-1/4 w-80 h-80 bg-orange-300 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000 dark:bg-orange-700"></div>
    <div class="absolute bottom-1/4 left-1/2 w-72 h-72 bg-blue-300 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-4000 dark:bg-blue-700"></div>
  </div>

  <div class="relative z-10 max-w-7xl mx-auto backdrop-filter backdrop-blur-lg bg-white bg-opacity-20 dark:bg-gray-800 dark:bg-opacity-20 rounded-xl shadow-lg p-8 transform transition-all duration-300 hover:shadow-2xl">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 text-gray-800 dark:text-gray-200">

      <!-- Company Info / Logo -->
      <div class="space-y-4">
        <a href="#" class="flex items-center space-x-2 text-2xl font-bold text-gray-900 dark:text-white">
          <svg class="h-8 w-8 text-orange-500 dark:text-orange-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <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 2zm3-11h.01M12 11h.01M15 11h.01M8 15h.01M12 15h.01M15 15h.01"></path>
          </svg>
          <span>BookNow</span>
        </a>
        <p class="text-sm text-gray-700 dark:text-gray-300">
          Simplify your bookings with ease. Reserve your spot instantly!
        </p>
        <div class="flex space-x-4">
          <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-orange-500 dark:hover:text-orange-400 transition-colors duration-200">
            <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33V22c4.781-.75 8.438-4.887 8.438-9.879z" clip-rule="evenodd"></path>
            </svg>
          </a>
          <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-orange-500 dark:hover:text-orange-400 transition-colors duration-200">
            <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path d="M8.29 20.251c-1.413.385-2.827.601-4.22-.601C2.5 19 1 17.5 1 15v-5c0-1.5.5-3 1.5-4C3 5.5 4.5 5 6 5h1c1.5 0 2.5.5 3 1.5 1 3 2 5 4 5h7c1.5 0 2.5.5 3 1.5s.5 2.5.5 4v2c0 2-1 3.5-3 4-1.5.5-3-.5-4-1.5-1-1-2-1.5-4-1h-6.71z"/>
              <linearGradient id="twitter-gradient" x1="0%" y1="0%" x2="100%" y2="100%">
                <stop offset="0%" stop-color="#1DA1F2"/>
                <stop offset="100%" stop-color="#8A3AB9"/>
              </linearGradient>
              <path d="M22.46 6c-.73.33-1.51.55-2.32.65.84-.5 1.48-1.29 1.78-2.25-.79.47-1.67.81-2.61.99-.75-.8-1.82-1.3-3.02-1.3-2.29 0-4.15 1.86-4.15 4.15 0 .32.04.63.11.93-3.45-.17-6.5-1.82-8.54-4.3-.36.62-.56 1.35-.56 2.12 0 1.44.73 2.7 1.84 3.45-.68-.02-1.32-.2-1.88-.52v.05c0 2.01 1.43 3.69 3.32 4.07-.35.1-.71.15-1.09.15-.27 0-.53-.03-.79-.07.53 1.64 2.06 2.84 3.89 2.87-1.42 1.11-3.21 1.77-5.15 1.77-.33 0-.66-.02-.98-.06 1.83 1.17 3.99 1.86 6.32 1.86 7.58 0 11.72-6.28 11.72-11.72 0-.18-.01-.36-.01-.54.81-.58 1.52-1.3 2.08-2.13z" fill="url(#twitter-gradient)"></path>
            </svg>
          </a>
          <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-orange-500 dark:hover:text-orange-400 transition-colors duration-200">
            <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.529 2.341 1.088 2.91.829.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.93 0-1.088.384-1.979 1.024-2.678-.103-.253-.446-1.263.098-2.648 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.702.115 2.504.337 1.909-1.296 2.747-1.026 2.747-1.026.546 1.385.202 2.395.099 2.648.64.699 1.023 1.59 1.023 2.678 0 3.827-2.336 4.673-4.565 4.92.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2Z" clip-rule="evenodd"></path>
            </svg>
          </a>
        </div>
      </div>

      <!-- Quick Links -->
      <div>
        <h3 class="text-lg font-semibold mb-4 text-gray-900 dark:text-white">Quick Links</h3>
        <ul class="space-y-2">
          <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-orange-400 transition-colors duration-200">Home</a></li>
          <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-orange-400 transition-colors duration-200">Services</a></li>
          <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-orange-400 transition-colors duration-200">About Us</a></li>
          <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-orange-400 transition-colors duration-200">Contact</a></li>
        </ul>
      </div>

      <!-- Booking Categories -->
      <div>
        <h3 class="text-lg font-semibold mb-4 text-gray-900 dark:text-white">Booking Categories</h3>
        <ul class="space-y-2">
          <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-orange-400 transition-colors duration-200">Restaurant Reservations</a></li>
          <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-orange-400 transition-colors duration-200">Medical Appointments</a></li>
          <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-orange-400 transition-colors duration-200">Beauty & Spa Services</a></li>
          <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-orange-400 transition-colors duration-200">Event Tickets</a></li>
        </ul>
      </div>

      <!-- Contact Info / Newsletter -->
      <div>
        <h3 class="text-lg font-semibold mb-4 text-gray-900 dark:text-white">Contact & Newsletter</h3>
        <p class="text-gray-700 dark:text-gray-300 mb-2">
          123 Booking St, Suite 400, Reserville, BOOK 12345
        </p>
        <p class="text-gray-700 dark:text-gray-300 mb-2">
          Email: <a href="mailto:[email protected]" class="hover:text-orange-500 dark:hover:text-orange-400 transition-colors duration-200">[email protected]</a>
        </p>
        <p class="text-gray-700 dark:text-gray-300 mb-4">
          Phone: <a href="tel:+1-800-555-BOOK" class="hover:text-orange-500 dark:hover:text-orange-400 transition-colors duration-200">+1-800-555-BOOK</a>
        </p>

        <form class="flex flex-col sm:flex-row gap-2">
          <input type="email" placeholder="Your Email" aria-label="Your Email" class="flex-grow p-3 rounded-lg border border-gray-300 dark:border-gray-600 bg-white bg-opacity-50 dark:bg-gray-700 dark:bg-opacity-50 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:ring-2 focus:ring-orange-400 focus:border-transparent outline-none transition-all duration-200">
          <button type="submit" class="p-3 rounded-lg bg-orange-500 text-white font-semibold hover:bg-orange-600 dark:bg-purple-600 dark:hover:bg-purple-700 transition-colors duration-200 shadow-md transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-orange-400 focus:ring-offset-2 dark:focus:ring-purple-400 dark:focus:ring-offset-gray-900">
            Subscribe
          </button>
        </form>
      </div>

    </div>

    <!-- Copyright and Policies -->
    <div class="mt-12 pt-8 border-t border-gray-300 dark:border-gray-700 text-center text-sm text-gray-600 dark:text-gray-400">
      <p>&copy; 2023 BookNow. All rights reserved.</p>
      <div class="mt-2 space-x-4">
        <a href="#" class="hover:text-orange-500 dark:hover:text-orange-400 transition-colors duration-200">Privacy Policy</a>
        <a href="#" class="hover:text-orange-500 dark:hover:text-orange-400 transition-colors duration-200">Terms of Service</a>
        <a href="#" class="hover:text-orange-500 dark:hover:text-orange-400 transition-colors duration-200">Cookie Policy</a>
      </div>
    </div>
  </div>
  
  <!-- Tailwind CSS animation keyframes for blob -->
  <style>
    @keyframes blob {
      0% { transform: translate(0px, 0px) scale(1); }
      33% { transform: translate(30px, -50px) scale(1.1); }
      66% { transform: translate(-20px, 20px) scale(0.9); }
      100% { transform: translate(0px, 0px) scale(1); }
    }
    .animate-blob {
      animation: blob 7s infinite;
    }
    .animation-delay-2000 {
      animation-delay: 2s;
    }
    .animation-delay-4000 {
      animation-delay: 4s;
    }
  </style>
</footer>

Organic_Nature_Inspired_Real_Estate_Footer

不動産プラットフォーム向けの複雑で自然にインスパイアされた補完色のフッターコンポーネントで、流れるような線、自然な形、複数のインタラクティブ要素、ダークモードのサポートによる完全な応答性を特徴としています。

開けるプレビュー

                <footer class="bg-gradient-to-br from-green-50 to-blue-50 text-gray-800 py-12 dark:from-green-950 dark:to-blue-950 dark:text-gray-200 overflow-hidden relative">
  <!-- Background organic shapes - these are visual only and might need careful positioning -->
  <div class="absolute -bottom-20 -left-20 w-80 h-80 rounded-full bg-green-200 opacity-30 blur-3xl dark:bg-green-700 dark:opacity-20 transition-all duration-500 ease-in-out"></div>
  <div class="absolute -top-10 -right-10 w-96 h-96 rounded-full bg-blue-200 opacity-30 blur-3xl dark:bg-blue-700 dark:opacity-20 transition-all duration-500 ease-in-out"></div>
  <div class="absolute bottom-1/4 left-1/4 w-60 h-60 rounded-full bg-green-100 opacity-20 blur-2xl dark:bg-green-800 dark:opacity-10 transition-all duration-500 ease-in-out"></div>

  <div class="container mx-auto px-4 relative z-10">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-10 lg:gap-12">

      <!-- Company Info / Logo -->
      <div class="lg:col-span-2 flex flex-col items-start">
        <a href="#" class="flex items-center space-x-3 mb-6 transition-transform hover:scale-105 duration-300">
          <img src="https://picsum.photos/id/10/50/50" alt="Nature Estate Logo" class="rounded-full shadow-lg border-2 border-green-400 dark:border-green-600">
          <span class="font-extrabold text-3xl text-green-700 dark:text-green-300 font-serif">NatureNest</span>
        </a>
        <p class="text-base leading-relaxed text-gray-700 dark:text-gray-300 mb-6 max-w-sm">
          Discover your dream home nestled in harmony with nature. We connect you to serene properties that breathe life into your living.
        </p>
        <form class="w-full max-w-sm relative group">
          <input type="email" placeholder="Your email for updates..." class="w-full p-3 rounded-full bg-white bg-opacity-70 border-2 border-green-300 dark:bg-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-transparent dark:border-green-700 pr-12 transition-all duration-300 group-focus-within:shadow-lg group-focus-within:border-blue-400">
          <button type="submit" class="absolute right-2 top-1/2 -translate-y-1/2 p-2 bg-green-500 rounded-full text-white hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-blue-400 dark:bg-green-600 dark:hover:bg-green-700 transition-all duration-300">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M10.293 15.707a1 1 0 010-1.414L14.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd" />
              <path fill-rule="evenodd" d="M4.293 15.707a1 1 0 010-1.414L8.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd" />
            </svg>
          </button>
        </form>
      </div>

      <!-- Quick Links -->
      <div>
        <h3 class="text-xl font-bold mb-6 text-green-700 dark:text-green-300 border-b-2 border-green-400 pb-2 inline-block transition-colors duration-300">Quick Links</h3>
        <ul class="space-y-4">
          <li><a href="#" class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2 text-blue-500 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>Properties</a></li>
          <li><a href="#" class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2 text-blue-500 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>About Us</a></li>
          <li><a href="#" class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2 text-blue-500 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>Contact</a></li>
          <li><a href="#" class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2 text-blue-500 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>Blog</a></li>
          <li><a href="#" class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2 text-blue-500 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>Careers</a></li>
        </ul>
      </div>

      <!-- Services -->
      <div>
        <h3 class="text-xl font-bold mb-6 text-green-700 dark:text-green-300 border-b-2 border-green-400 pb-2 inline-block transition-colors duration-300">Services</h3>
        <ul class="space-y-4">
          <li><a href="#" class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2 text-blue-500 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>Buy Property</a></li>
          <li><a href="#" class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2 text-blue-500 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>Sell Property</a></li>
          <li><a href="#" class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2 text-blue-500 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>Property Valuation</a></li>
          <li><a href="#" class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2 text-blue-500 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>Mortgage Advice</a></li>
          <li><a href="#" class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2 text-blue-500 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>Rental Management</a></li>
        </ul>
      </div>

      <!-- Contact Info -->
      <div>
        <h3 class="text-xl font-bold mb-6 text-green-700 dark:text-green-300 border-b-2 border-green-400 pb-2 inline-block transition-colors duration-300">Connect</h3>
        <ul class="space-y-4">
          <li class="flex items-start">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3 mt-1 text-blue-500 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.727A8 8 0 016.343 7.273L7.757 8.687a6 6 0 008.486 8.486l1.414 1.414z" />
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.172 7.273a4 4 0 115.656 5.656L10 17.657 4.343 12zm0 0L4.343 7.273m0 0L9.172 2.445" />
            </svg>
            <address class="not-italic text-gray-700 dark:text-gray-300">
              123 EcoLane, Green Oasis City, GO 45678
            </address>
          </li>
          <li class="flex items-center">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3 text-blue-500 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684L10.5 9.071c.325.399.075.95-.476 1.113l-1.424.378a12.013 12.013 0 008.68-8.68l.377-1.425c.164-.551.715-.801 1.113-.476l4.045 1.554A1 1 0 0121 16.72V19a2 2 0 01-2 2H5a2 2 0 01-2-2v-5.28a1 1 0 01.684-.948l1.554-4.045z" />
            </svg>
            <a href="tel:+1234567890" class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200">+1 (234) 567-890</a>
          </li>
          <li class="flex items-center">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3 text-blue-500 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26c.73.48 1.67.48 2.4 0L21 8m-18 8V6a2 2 0 012-2h14a2 2 0 012 2v10a2 2 0 01-2 2H5a2 2 0 01-2-2z" />
            </svg>
            <a href="mailto:[email protected]" class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200">[email protected]</a>
          </li>
        </ul>
      </div>

    </div>

    <div class="mt-12 pt-8 border-t border-green-300 dark:border-green-700 flex flex-col md:flex-row items-center justify-between text-sm text-gray-600 dark:text-gray-400">
      <p class="mb-4 md:mb-0">&copy; 2023 NatureNest. All rights reserved. <span class="hidden md:inline">|</span> <br class="md:hidden"> Designed with nature in mind.</p>
      <div class="flex space-x-6">
        <a href="#" class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200">Privacy Policy</a>
        <a href="#" class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200">Terms of Service</a>
        <a href="#" class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200">Sitemap</a>
      </div>
    </div>
  </div>
</footer>

水彩/アーティスティックなネオンフッター

ポートフォリオWebサイトに適した、水彩画/芸術的な美学と鮮やかなネオン配色を備えたシンプルでレスポンシブなフッターコンポーネント。ダークモードのサポートが含まれています。

開けるプレビュー

                <footer class="relative bg-gradient-to-br from-purple-100 via-pink-100 to-blue-100 text-gray-800 py-8 px-4 sm:px-6 lg:px-8 overflow-hidden dark:from-gray-950 dark:via-gray-900 dark:to-gray-800 dark:text-gray-200">
  <!-- Artistic Overlays (Simulated watercolor effect with gradients) -->
  <div class="absolute inset-0 z-0 opacity-40 mix-blend-multiply">
    <div class="absolute -top-1/4 -left-1/4 w-1/2 h-1/2 bg-blue-400 rounded-full filter blur-3xl opacity-60 dark:bg-blue-600"></div>
    <div class="absolute -bottom-1/4 -right-1/4 w-1/2 h-1/2 bg-pink-400 rounded-full filter blur-3xl opacity-60 dark:bg-pink-600"></div>
    <div class="absolute top-1/4 right-0 w-1/3 h-1/3 bg-lime-300 rounded-full filter blur-3xl opacity-60 dark:bg-lime-500"></div>
  </div>

  <div class="relative z-10 max-w-7xl mx-auto flex flex-col md:flex-row items-center justify-between gap-4 text-center md:text-left">
    <div class="flex flex-col items-center md:items-start space-y-2">
      <p class="text-3xl font-extrabold tracking-tight text-transparent bg-clip-text bg-gradient-to-r from-blue-600 via-pink-600 to-lime-600 dark:from-blue-400 dark:via-pink-400 dark:to-lime-400">
        [Your Name/Studio]
      </p>
      <p class="text-sm text-gray-600 dark:text-gray-400">
        &copy; <span id="current-year"></span> All rights reserved.
      </p>
    </div>

    <nav class="flex flex-wrap justify-center md:justify-end gap-x-6 gap-y-2">
      <a href="#" class="text-sm font-medium hover:text-blue-500 transition duration-300 dark:hover:text-blue-300">Home</a>
      <a href="#" class="text-sm font-medium hover:text-pink-500 transition duration-300 dark:hover:text-pink-300">Portfolio</a>
      <a href="#" class="text-sm font-medium hover:text-lime-500 transition duration-300 dark:hover:text-lime-300">About</a>
      <a href="#" class="text-sm font-medium hover:text-purple-500 transition duration-300 dark:hover:text-purple-300">Contact</a>
    </nav>
  </div>

  <script>
    document.getElementById('current-year').textContent = new Date().getFullYear();
  </script>
</footer>

ポートフォリオ-ミニマリスト-トライアド-コンプレックス-フッター

ポートフォリオWebサイト用の複雑でミニマリストスタイルのフッターで、トライアドの配色を使用しています。ナビゲーションリンク、ソーシャルメディアアイコン、著作権、連絡先の召喚状が含まれ、完全な応答性とダークモードがサポートされています。

開けるプレビュー

                <footer class="bg-blue-50 dark:bg-gray-950 text-gray-800 dark:text-gray-100 py-12 px-4 sm:px-6 lg:px-8">
  <div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-4 lg:grid-cols-5 gap-8">
    
    <div class="col-span-full lg:col-span-1 flex flex-col items-center md:items-start mb-6 md:mb-0">
      <a href="#" class="text-2xl font-bold tracking-tight text-orange-600 dark:text-teal-400 mb-4">
        Your Portfolio
      </a>
      <p class="text-center md:text-left text-sm text-gray-600 dark:text-gray-400 leading-relaxed">
        Showcasing creative work and innovative solutions.
      </p>
    </div>

    <div class="col-span-full md:col-span-1 lg:col-span-1">
      <h3 class="text-lg font-semibold text-orange-600 dark:text-teal-400 mb-4 text-center md:text-left">Quick Links</h3>
      <ul class="space-y-3 text-center md:text-left">
        <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-teal-300 transition-colors duration-200">Home</a></li>
        <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-teal-300 transition-colors duration-200">Projects</a></li>
        <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-teal-300 transition-colors duration-200">Services</a></li>
        <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-teal-300 transition-colors duration-200">About Me</a></li>
      </ul>
    </div>

    <div class="col-span-full md:col-span-1 lg:col-span-1">
      <h3 class="text-lg font-semibold text-orange-600 dark:text-teal-400 mb-4 text-center md:text-left">Resources</h3>
      <ul class="space-y-3 text-center md:text-left">
        <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-teal-300 transition-colors duration-200">Blog</a></li>
        <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-teal-300 transition-colors duration-200">Case Studies</a></li>
        <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-teal-300 transition-colors duration-200">Client Testimonials</a></li>
        <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-teal-300 transition-colors duration-200">FAQs</a></li>
      </ul>
    </div>

    <div class="col-span-full md:col-span-1 lg:col-span-1">
      <h3 class="text-lg font-semibold text-orange-600 dark:text-teal-400 mb-4 text-center md:text-left">Get in touch</h3>
      <div class="text-center md:text-left space-y-3">
        <p class="text-gray-700 dark:text-gray-300">123 Creative Studio, City, Country</p>
        <p class="text-gray-700 dark:text-gray-300">[email protected]</p>
        <p class="text-gray-700 dark:text-gray-300">+1 (555) 123-4567</p>
      </div>
    </div>

    <div class="col-span-full md:col-span-4 lg:col-span-1 flex flex-col items-center lg:items-end justify-between">
      <h3 class="text-lg font-semibold text-orange-600 dark:text-teal-400 mb-4">Socials</h3>
      <div class="flex space-x-6 mb-8 lg:mb-0">
        <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-teal-300 transition-colors duration-200">
          <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.502 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33V22C17.361 21.088 22 16.991 22 12z" clip-rule="evenodd" />
          </svg>
          <span class="sr-only">Facebook</span>
        </a>
        <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-teal-300 transition-colors duration-200">
          <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path fill-rule="evenodd" d="M12.315 2c2.43 0 2.784.002 3.797.048.85.04 1.488.165 1.802.272.937.333 1.404 1.093 1.487 2.305.047.508.09 1.109.09 3.003v.404c0 2.441-.001 2.784-.048 3.797-.04.85-.165 1.487-.272 1.802-.333.937-1.093 1.404-2.305 1.488-.508.047-1.109.09-3.003.09h-.404c-2.441 0-2.784-.001-3.797-.048-.85-.04-1.487-.165-1.802-.272-.937-.333-1.404-1.093-1.488-2.305-.047-.508-.09-1.109-.09-3.003v-.404c0-2.43.001-2.784.048-3.797.04-.85.165-1.488.272-1.802.333-.937 1.093-1.404 2.305-1.488.508-.047 1.109-.09 3.003-.09h.404ZM12 2.163c-3.178 0-3.578.013-4.858.077-.975.051-1.666.241-2.185.421-.504.179-.902.439-1.302.839-.399.4-.659.798-.839 1.302-.18.519-.37 1.21-.421 2.185-.064 1.28-.076 1.679-.076 4.858 0 3.178.013 3.577.076 4.858.051.975.241 1.667.421 2.186.179.504.439.902.839 1.302.4.399.798.659 1.302.839.519.18 1.21.37 2.185.421 1.28.064 1.679.076 4.858.076 3.178 0 3.577-.013 4.858-.076.975-.051 1.668-.241 2.186-.421.504-.179.902-.439 1.302-.839.399-.4.659-.798.839-1.302.18-.519.37-1.21.421-2.186.064-1.28.076-1.678.076-4.858 0-3.178-.013-3.578-.076-4.858-.051-.975-.241-1.666-.421-2.185-.179-.504-.439-.902-.839-1.302-.4-.399-.798-.659-1.302-.839-.519-.18-1.21-.37-2.186-.421C15.577 2.176 15.178 2.163 12 2.163Zm0 3.024c3.484 0 6.31 2.825 6.31 6.31 0 3.484-2.826 6.31-6.31 6.31-3.484 0-6.31-2.826-6.31-6.31 0-3.485 2.826-6.31 6.31-6.31Zm0 1.938c-2.486 0-4.5 2.014-4.5 4.5 0 2.485 2.014 4.5 4.5 4.5 2.485 0 4.5-2.015 4.5-4.5 0-2.486-2.015-4.5-4.5-4.5Zm6.55-.992a1.08 1.08 0 1 0 0 2.16 1.08 1.08 0 0 0 0-2.16Z" clip-rule="evenodd" />
          </svg>
          <span class="sr-only">Instagram</span>
        </a>
        <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-teal-300 transition-colors duration-200">
          <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M8.29 20.251c-.034.004-.067.006-.101.006C7.062 20.251 2 15.188 2 8.79C2 4.717 5.5.94 10.366 2.083c3.085.736 5.8 3.513 6.942 6.784L21.2 21.4c-.032.096-.064.192-.096.288L22 22.428V20h-4c-2.209 0-4-1.791-4-4V6h4V4H6v2H2c0 2.209 1.791 4 4 4h4v4h4v4h4Z" />
          </svg>
          <span class="sr-only">LinkedIn</span>
        </a>
        <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-teal-300 transition-colors duration-200">
          <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M12 2C6.475 2 2 6.475 2 12c0 4.296 2.65 7.914 6.36 9.387.52.09.712-.224.712-.49v-1.72c-2.434.529-2.956-1.173-2.956-1.173-.424-1.077-1.034-1.36-1.034-1.36-.84-.576.064-.565.064-.565.93.065 1.417.95 1.417.95.824 1.41 2.156 1.004 2.684.767.085-.597.322-1.004.587-1.233-2.052-.232-4.212-1.026-4.212-4.577 0-1.008.358-1.83.945-2.472-.095-.232-.41-1.174.09-2.447 0 0 .77-.247 2.52.945.73-.204 1.5-.31 2.29-.31.79 0 1.56.106 2.29.31 1.75-1.192 2.52-.945 2.52-.945.5 1.273.187 2.215.093 2.447.587.642.945 1.464.945 2.472 0 3.56-2.164 4.343-4.223 4.57.34.293.645.867.645 1.758v2.59c0 .267.19.58.716.49C19.35 19.914 22 16.296 22 12c0-5.525-4.475-10-10-10Z" />
          </svg>
          <span class="sr-only">GitHub</span>
        </a>
      </div>
    </div>

  </div>
  
  <div class="border-t border-gray-200 dark:border-gray-700 mt-12 pt-8 text-center">
    <p class="text-sm text-gray-600 dark:text-gray-400">&copy; 2023 Your Portfolio. All rights reserved.</p>
  </div>
</footer>

ラグジュアリーSaaSフッター

SaaSアプリケーション用のエレガントで洗練されたフッターコンポーネントで、複数のナビゲーションセクション、ニュースレターのサインアップ、ソーシャルメディアリンク、著作権情報を備えています。オーシャン/ブルーのカラーパレット、完全な応答性、ダークモードのサポートで設計されています。

開けるプレビュー

                <footer class="bg-gradient-to-r from-blue-900 to-indigo-900 text-blue-200 dark:from-gray-950 dark:to-gray-800 dark:text-gray-300 py-12 md:py-16 lg:py-20">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-8 md:gap-12 lg:gap-16">

      <!-- Company Info & Logo -->
      <div class="lg:col-span-2 space-y-6">
        <a href="#" class="flex items-center space-x-3">
          <svg class="h-8 w-8 text-blue-400 dark:text-indigo-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-1.25-3M15 10V5m0 0l-3 3m3-3l3 3M6.75 20h10.5c.75 0 1.5-.75 1.5-1.5V11.25c0-1.25-1-2.25-2.25-2.25H6.75C5.5 9 4.5 10.25 4.5 11.25v7.25c0 .75.75 1.5 1.5 1.5z" />
          </svg>
          <span class="text-3xl font-extrabold tracking-tight text-white dark:text-gray-100">AQUA</span><span class="text-3xl font-extrabold tracking-tight text-blue-300 dark:text-blue-400">DRIFT</span>
        </a>
        <p class="text-blue-300 dark:text-gray-400 leading-relaxed text-sm lg:text-base pr-8">
          Revolutionizing the way you manage and scale your digital presence with cutting-edge cloud solutions.
        </p>
        <div class="flex space-x-4">
          <a href="#" class="text-blue-300 hover:text-blue-100 dark:text-gray-400 dark:hover:text-gray-100 transition duration-300 ease-in-out">
            <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.79c0-2.508 1.493-3.89 3.776-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33V22H12c5.523 0 10-4.477 10-10z" clip-rule="evenodd" />
            </svg>
          </a>
          <a href="#" class="text-blue-300 hover:text-blue-100 dark:text-gray-400 dark:hover:text-gray-100 transition duration-300 ease-in-out">
            <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path d="M8.29 20.251c-.03.01-.06.02-.09.03-.46.163-1.02.242-1.59.242-2.24 0-4.06-1.803-4.06-4.025 0-.75.21-1.427.67-2.008C3.77 14.1 4.7 15.657 6.24 16.7L7.2 16.27c.45.16 1 .25 1.56.25 2.23 0 4.04-1.79 4.04-4S10.55 8.25 8.32 8.25c-.56 0-1.12.09-1.57.25l-.94-.4.07-.1c.3-.59.7-1.15 1.18-1.6L8.29 20.251zm-5.75-8.5v.02c.03-.01.06-.02.09-.03.46-.163 1.02-.242 1.59-.242 2.24 0 4.06 1.803 4.06 4.025 0 .75-.21 1.427-.67 2.008-1.1.9-2.03 2.457-3.57 3.55l-1.05.47c-.45-.16-1-.25-1.56-.25-2.23 0-4.04 1.79-4.04 4S10.55 8.25 8.32 8.25c-.56 0-1.12.09-1.57.25l-.94-.4.07-.1c.3-.59.7-1.15 1.18-1.6L8.29 20.251z" />
              <path d="M8 0c4.417 0 8 3.582 8 8s-3.583 8-8 8-8-3.582-8-8 3.583-8 8-8zm0 2.2C4.1 2.2 1 5.3 1 9.2s3.1 7 7 7 7-3.1 7-7S11.9 2.2 8 2.2z" fill="#1da1f2" />
              <path d="M17.448 3.858c-.851.378-1.748.636-2.613.743.975-.583 1.724-1.503 2.072-2.593-.91.54-1.921.93-3.003 1.15a5.59 5.59 0 00-9.605 5.093c-4.664-.22-8.78-2.455-11.542-5.836C.68 6.968 1 8.878 2.2 9.489c-.7.01-1.35-.21-1.9-.53v.07c0 2.12 1.5 3.89 3.5 4.3c-.3.08-.6.12-.9.12-.2 0-.4 0-.6-.05.5 1.7 2.1 2.9 3.9 2.94-1.5 1.2-3.4 1.9-5.4 1.9-.3 0-.6 0-.8-.04C2.5 21.2 4.7 22 7.1 22c8.6 0 13-7.1 13-13 0-.2 0-.4 0-.6.9-2 1.7-4 2.2-6.1z" />
            </svg>
          </a>
          <a href="#" class="text-blue-300 hover:text-blue-100 dark:text-gray-400 dark:hover:text-gray-100 transition duration-300 ease-in-out">
            <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path fill-rule="evenodd" d="M12.315 2c2.43 0 2.784.013 3.715.056 8.903.417 10.579 2.083 10.998 10.998.043.93.056 1.286.056 3.715 0 2.43-.013 2.784-.056 3.715-.417 8.903-2.083 10.579-10.998 10.998-.93.043-1.286.056-3.715.056-2.43 0-2.784-.013-3.715-.056-8.903-.417-10.579-2.083-10.998-10.998-.043-.93-.056-1.286-.056-3.715 0-2.43.013-2.784.056-3.715.417-8.903 2.083-10.579 10.998-10.998.93-.043 1.286-.056 3.715-.056zm0 2.18c-2.427 0-2.753.011-3.693.051-7.16 0-8.498 1.4-8.89 8.89-.04.94-.051 1.266-.051 3.693 0 2.427.011 2.753.051 3.693.392 7.16 1.73 8.498 8.89 8.89.94.04 1.266.051 3.693.051 2.427 0 2.753-.011 3.693-.051 7.16-.392 8.498-1.73 8.89-8.89.04-.94.051-1.266.051-3.693 0-2.427-.011-2.753-.051-3.693-.392-7.16-1.73-8.498-8.89-8.89zM12.315 9.255c-1.68 0-3.056 1.376-3.056 3.056s1.376 3.056 3.056 3.056 3.056-1.376 3.056-3.056-1.376-3.056-3.056-3.056zm0 5.011c-1.076 0-1.955-.879-1.955-1.955s.879-1.955 1.955-1.955 1.955.879 1.955 1.955-.879 1.955-1.955 1.955zm6.606-5.87a1.442 1.442 0 100-2.884 1.442 1.442 0 000 2.884z" clip-rule="evenodd" />
            </svg>
          </a>
          <a href="#" class="text-blue-300 hover:text-blue-100 dark:text-gray-400 dark:hover:text-gray-100 transition duration-300 ease-in-out">
            <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path d="M12 0c-6.627 0-12 5.372-12 12 0 5.308 3.435 9.799 8.203 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.016-2.03-3.338.724-4.042-1.61-4.042-1.61-.546-1.387-1.334-1.758-1.334-1.758-1.09-.744.08-.729.08-.729 1.205.086 1.838 1.238 1.838 1.238 1.07 1.833 2.809 1.303 3.492.996.108-.775.419-1.303.762-1.602-2.665-.304-5.467-1.334-5.467-5.932 0-1.31.465-2.383 1.235-3.22-.124-.303-.535-1.52.117-3.176 0 0 1.008-.323 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.046.138 3.003.404 2.292-1.553 3.3-1.23 3.3-1.23.653 1.656.242 2.873.118 3.176.77.837 1.233 1.91 1.233 3.22 0 4.61-2.809 5.624-5.474 5.922.43.37.817 1.109.817 2.23 0 1.61-.015 2.904-.015 3.29 0 .322.218.698.827.576C20.565 21.795 24 17.308 24 12 24 5.372 18.627 0 12 0z" />
            </svg>
          </a>
        </div>
      </div>

      <!-- Navigation Sections -->
      <div class="space-y-6">
        <h3 class="text-lg font-semibold text-white dark:text-gray-100">Product</h3>
        <ul class="space-y-3">
          <li><a href="#" class="text-blue-300 hover:text-blue-100 dark:text-gray-400 dark:hover:text-gray-100 transition duration-300 ease-in-out text-sm">Features</a></li>
          <li><a href="#" class="text-blue-300 hover:text-blue-100 dark:text-gray-400 dark:hover:text-gray-100 transition duration-300 ease-in-out text-sm">Pricing</a></li>
          <li><a href="#" class="text-blue-300 hover:text-blue-100 dark:text-gray-400 dark:hover:text-gray-100 transition duration-300 ease-in-out text-sm">Integrations</a></li>
          <li><a href="#" class="text-blue-300 hover:text-blue-100 dark:text-gray-400 dark:hover:text-gray-100 transition duration-300 ease-in-out text-sm">Testimonials</a></li>
        </ul>
      </div>

      <div class="space-y-6">
        <h3 class="text-lg font-semibold text-white dark:text-gray-100">Company</h3>
        <ul class="space-y-3">
          <li><a href="#" class="text-blue-300 hover:text-blue-100 dark:text-gray-400 dark:hover:text-gray-100 transition duration-300 ease-in-out text-sm">About Us</a></li>
          <li><a href="#" class="text-blue-300 hover:text-blue-100 dark:text-gray-400 dark:hover:text-gray-100 transition duration-300 ease-in-out text-sm">Careers</a></li>
          <li><a href="#" class="text-blue-300 hover:text-blue-100 dark:text-gray-400 dark:hover:text-gray-100 transition duration-300 ease-in-out text-sm">Blog</a></li>
          <li><a href="#" class="text-blue-300 hover:text-blue-100 dark:text-gray-400 dark:hover:text-gray-100 transition duration-300 ease-in-out text-sm">Press</a></li>
        </ul>
      </div>

      <div class="space-y-6">
        <h3 class="text-lg font-semibold text-white dark:text-gray-100">Support</h3>
        <ul class="space-y-3">
          <li><a href="#" class="text-blue-300 hover:text-blue-100 dark:text-gray-400 dark:hover:text-gray-100 transition duration-300 ease-in-out text-sm">Help Center</a></li>
          <li><a href="#" class="text-blue-300 hover:text-blue-100 dark:text-gray-400 dark:hover:text-gray-100 transition duration-300 ease-in-out text-sm">Contact Us</a></li>
          <li><a href="#" class="text-blue-300 hover:text-blue-100 dark:text-gray-400 dark:hover:text-gray-100 transition duration-300 ease-in-out text-sm">API Docs</a></li>
          <li><a href="#" class="text-blue-300 hover:text-blue-100 dark:text-gray-400 dark:hover:text-gray-100 transition duration-300 ease-in-out text-sm">Status</a></li>
        </ul>
      </div>

      <!-- Newsletter Signup -->
      <div class="lg:col-span-1 space-y-6 md:col-span-2">
        <h3 class="text-lg font-semibold text-white dark:text-gray-100">Stay Updated</h3>
        <p class="text-blue-300 dark:text-gray-400 text-sm">Subscribe to our newsletter for the latest news and updates.</p>
        <form class="flex flex-col sm:flex-row gap-3">
          <label for="email-address" class="sr-only">Email address</label>
          <input id="email-address" name="email" type="email" autocomplete="email" required class="min-w-0 flex-auto rounded-md border-0 bg-blue-800/50 dark:bg-gray-700/50 px-3.5 py-2 text-white dark:text-gray-200 shadow-sm ring-1 ring-inset ring-blue-700/50 dark:ring-gray-600 focus:ring-2 focus:ring-inset focus:ring-blue-400 dark:focus:ring-indigo-400 sm:text-sm sm:leading-6 placeholder:text-blue-300/80 dark:placeholder:text-gray-400" placeholder="Enter your email">
          <button type="submit" class="flex-none rounded-md bg-blue-500 dark:bg-indigo-600 px-4 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-blue-600 dark:hover:bg-indigo-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-400 dark:focus-visible:outline-indigo-500 transition duration-300 ease-in-out">
            Subscribe
          </button>
        </form>
      </div>
    </div>

    <!-- Divider -->
    <div class="mt-12 md:mt-16 lg:mt-20 border-t border-blue-700/50 dark:border-gray-700 pt-8">
      <div class="flex flex-col md:flex-row items-center justify-between text-blue-400 dark:text-gray-500 text-sm space-y-4 md:space-y-0">
        <p>&copy; 2023 AquaDrift. All rights reserved.</p>
        <div class="flex space-x-6">
          <a href="#" class="hover:text-blue-100 dark:hover:text-gray-300 transition duration-300 ease-in-out">Privacy Policy</a>
          <a href="#" class="hover:text-blue-100 dark:hover:text-gray-300 transition duration-300 ease-in-out">Terms of Service</a>
          <a href="#" class="hover:text-blue-100 dark:hover:text-gray-300 transition duration-300 ease-in-out">Cookies Settings</a>
        </div>
      </div>
    </div>
  </div>
</footer>

フッターコンポーネント

補色、適度な複雑さ、ソーシャルメディアの統合を備えたミニマリストのフッターコンポーネント。レスポンシブデザインとダークモードのサポートが特徴です。

開けるプレビュー

                <footer class="bg-gray-100 dark:bg-gray-900 py-8">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex flex-wrap justify-between items-center">
      <div class="w-full md:w-1/3 text-center md:text-left mb-4 md:mb-0">
        <p class="text-gray-600 dark:text-gray-400 text-sm">&copy; 2023 SocialApp. All rights reserved.</p>
      </div>
      <div class="w-full md:w-1/3 flex justify-center mb-4 md:mb-0">
        <ul class="flex space-x-6">
          <li><a href="#" class="text-blue-600 dark:text-orange-400 hover:text-blue-800 dark:hover:text-orange-500 text-sm">Privacy Policy</a></li>
          <li><a href="#" class="text-blue-600 dark:text-orange-400 hover:text-blue-800 dark:hover:text-orange-500 text-sm">Terms of Service</a></li>
        </ul>
      </div>
      <div class="w-full md:w-1/3 flex justify-center md:justify-end">
        <ul class="flex space-x-4">
          <li><a href="#" class="text-blue-600 dark:text-orange-400 hover:text-blue-800 dark:hover:text-orange-500"><i class="fab fa-facebook-f"></i></a></li>
          <li><a href="#" class="text-blue-600 dark:text-orange-400 hover:text-blue-800 dark:hover:text-orange-500"><i class="fab fa-twitter"></i></a></li>
          <li><a href="#" class="text-blue-600 dark:text-orange-400 hover:text-blue-800 dark:hover:text-orange-500"><i class="fab fa-instagram"></i></a></li>
          <li><a href="#" class="text-blue-600 dark:text-orange-400 hover:text-blue-800 dark:hover:text-orange-500"><i class="fab fa-linkedin-in"></i></a></li>
        </ul>
      </div>
    </div>
  </div>
</footer>

Glassmorphism単色フッター

ブログ用のシンプルな単色のglassmorphismフッターコンポーネントで、レスポンシブデザインとダークモードがサポートされています。

開けるプレビュー

                
<footer class="backdrop-blur-md bg-white/30 dark:bg-gray-800/30 text-gray-800 dark:text-gray-200 p-6">
  <div class="container mx-auto flex flex-col items-center justify-between md:flex-row">
    <div class="mb-4 md:mb-0 text-center md:text-left">
      <p>&copy; 2023 Blog Name. All rights reserved.</p>
    </div>
    <div class="flex space-x-4">
      <a href="#" class="hover:text-gray-600 dark:hover:text-gray-400 transition-colors duration-200">Privacy Policy</a>
      <a href="#" class="hover:text-gray-600 dark:hover:text-gray-400 transition-colors duration-200">Terms of Service</a>
      <a href="#" class="hover:text-gray-600 dark:hover:text-gray-400 transition-colors duration-200">Contact</a>
    </div>
  </div>
</footer>