フッター

フッターコンポーネントフッター

類似の配色を使用した、微妙な Skeuomorphism デザインのシンプルなフッターコンポーネント。これには、著作権表示、いくつかのナビゲーションリンク、ソーシャルメディアアイコンが含まれています。デザインはレスポンシブで、ダークモードをサポートしています。

プレビューを開く

                <footer class="bg-gradient-to-br from-stone-200 to-stone-400 text-stone-800 p-6 shadow-2xl dark:from-stone-800 dark:to-stone-900 dark:text-stone-200">
  <div class="container mx-auto flex flex-col md:flex-row justify-between items-center">
    <div class="mb-4 md:mb-0 text-sm">
      <p>&copy; 2023 BlogSphere. All rights reserved.</p>
    </div>
    <nav class="mb-4 md:mb-0">
      <ul class="flex space-x-6 text-sm">
        <li><a href="#" class="hover:text-stone-600 dark:hover:text-stone-400 transition duration-300">Privacy Policy</a></li>
        <li><a href="#" class="hover:text-stone-600 dark:hover:text-stone-400 transition duration-300">Terms of Service</a></li>
        <li><a href="#" class="hover:text-stone-600 dark:hover:text-stone-400 transition duration-300">Contact Us</a></li>
      </ul>
    </nav>
    <div class="flex space-x-4">
      <a href="#" class="text-stone-600 hover:text-stone-900 dark:text-stone-400 dark:hover:text-stone-100 transition duration-300">
        <svg fill="currentColor" class="w-5 h-5" 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.505 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.33V22H12c5.523 0 10-4.477 10-10z" clip-rule="evenodd" />
        </svg>
      </a>
      <a href="#" class="text-stone-600 hover:text-stone-900 dark:text-stone-400 dark:hover:text-stone-100 transition duration-300">
        <svg fill="currentColor" class="w-5 h-5" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M12.317 2.031c2.14 0 2.457.009 3.313.048 1.547.067 2.46.368 3.018.599 1.258.513 2.072 1.002 2.65 1.597.595.578 1.085 1.392 1.597 2.65.23.558.532 1.47.599 3.017.039.856.048 1.173.048 3.312 0 2.14-.009 2.457-.048 3.313-.067 1.547-.368 2.46-.599 3.018-.513 1.258-1.002 2.072-1.597 2.65-.578.595-1.392 1.085-2.65 1.597-.558.23-1.47.532-3.017.599-.856.039-1.173.048-3.312.048-2.14 0-2.457-.009-3.313-.048-1.547-.067-2.46-.368-3.018-.599-1.258-.513-2.072-1.002-2.65-1.597-.595-.578-1.085-1.392-1.597-2.65-.23-.558-.532-1.47-.599-3.017-.039-.856-.048-1.173-.048-3.312 0-2.14.009-2.457.048-3.313.067-1.547.368-2.46.599-3.018.513-1.258 1.002-2.072 1.597-2.65.578-.595 1.392-1.085 2.65-1.597.558-.23 1.47-.532 3.017-.599.856-.039 1.173-.048 3.312-.048ZM12 4.195c-2.466 0-2.736.01-3.692.051-1.433.062-2.3.344-2.805.547-.88.375-1.517.653-2.062 1.252-.527.575-.805 1.212-1.18 2.062-.203.504-.485 1.372-.547 2.805-.041.956-.051 1.226-.051 3.692 0 2.466.01 2.736.051 3.692.062 1.433.344 2.3.547 2.805.375.88.653 1.517 1.252 2.062.575.527 1.212.805 2.062 1.18.504.203 1.372.485 2.805.547.956.041 1.226.051 3.692.051 2.466 0 2.736-.01 3.692-.051 1.433-.062 2.3-.344 2.805-.547.88-.375 1.517-.653 2.062-1.252.527-.575.805-1.212 1.18-2.062.203-.504.485-1.372.547-2.805.041-.956.051-1.226.051-3.692 0-2.466-.01-2.736-.051-3.692-.062-1.433-.344-2.3-.547-2.805-.375-.88-.653-1.517-1.252-2.062-.575-.527-1.212-.805-2.062-1.18-.504-.203-1.372-.485-2.805-.547-.956-.041-1.226-.051-3.692-.051ZM12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5Zm0 8.195c-1.761 0-3.195-1.434-3.195-3.195S10.239 8.805 12 8.805s3.195 1.434 3.195 3.195-1.434 3.195-3.195 3.195Zm6.398-9.014c-.655 0-1.186.531-1.186 1.186S17.743 7.367 18.398 7.367s1.186-.531 1.186-1.186-.531-1.186-1.186-1.186Z" />
        </svg>
      </a>
      <a href="#" class="text-stone-600 hover:text-stone-900 dark:text-stone-400 dark:hover:text-stone-100 transition duration-300">
        <svg fill="currentColor" class="w-5 h-5" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M12 2C6.477 2 2 6.477 2 12c0 4.296 2.762 7.933 6.603 9.243.484.088.662-.209.662-.463 0-.228-.009-.834-.014-1.636-2.688.586-3.254-1.297-3.254-1.297-.44-.817-1.07-1.033-1.07-1.033-.876-.597.066-.584.066-.584.969.068 1.479.995 1.479.995.86 1.474 2.25.991 2.793.758.086-.593.336-.991.613-1.22-2.144-.243-4.394-1.074-4.394-4.784 0-1.056.377-1.922 1-2.6-.1-.243-.435-1.291.096-2.564 0 0 .82-1.393 2.7-.54.78.199 1.608.298 2.435.301.827-.003 1.655-.102 2.435-.301 1.878-.853 2.7-.54 2.7-.54.531 1.273.196 2.32.096 2.564.623.678 1 1.544 1 2.6 0 3.719-2.253 4.535-4.398 4.778.347.298.654.887.654 1.787 0 1.291-.012 2.33-.012 2.645 0 .256.177.555.667.46C19.238 19.927 22 16.29 22 12c0-5.523-4.477-10-10-10z" />
        </svg>
      </a>
    </div>
  </div>
</footer>

レトロなブログフッター

単色の配色、シンプルなレイアウト、レスポンシブデザイン、ダークテーマのサポートを備えたブログ用のレトロ/ビンテージフッターコンポーネント。

プレビューを開く

                <footer class="bg-gray-200 text-gray-700 dark:bg-gray-900 dark:text-gray-300 py-8">
  <div class="container mx-auto px-4">
    <div class="flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0">
      <div class="text-center md:text-left">
        <p class="text-sm">&copy; 2023 The Retro Blog. All rights reserved.</p>
      </div>
      <nav class="flex space-x-4">
        <a href="#" class="text-sm hover:underline">Privacy Policy</a>
        <a href="#" class="text-sm hover:underline">Terms of Service</a>
        <a href="#" class="text-sm hover:underline">Contact Us</a>
      </nav>
    </div>
  </div>
</footer>

フッターコンポーネント

トライアドカラースキームとダークテーマをサポートするブログ用のレスポンシブなレトロ/ビンテージフッターコンポーネント。

プレビューを開く

                <footer class="bg-gray-200 dark:bg-gray-900 text-gray-800 dark:text-gray-200 p-8">
  <div class="container mx-auto grid grid-cols-1 md:grid-cols-3 gap-8">
    <div class="mb-6 md:mb-0">
      <h3 class="text-xl font-bold mb-4 text-purple-700 dark:text-purple-400">About Us</h3>
      <p class="text-sm">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div class="mb-6 md:mb-0">
      <h3 class="text-xl font-bold mb-4 text-green-700 dark:text-green-400">Categories</h3>
      <ul class="text-sm space-y-2">
        <li><a href="#" class="hover:underline">Technology</a></li>
        <li><a href="#" class="hover:underline">Travel</a></li>
        <li><a href="#" class="hover:underline">Food</a></li>
        <li><a href="#" class="hover:underline">Lifestyle</a></li>
      </ul>
    </div>
    <div>
      <h3 class="text-xl font-bold mb-4 text-orange-700 dark:text-orange-400">Follow Us</h3>
      <div class="flex space-x-4">
        <a href="#" class="text-gray-800 dark:text-gray-200 hover:text-purple-700 dark:hover:text-purple-400"><i class="fab fa-facebook fa-2x"></i></a>
        <a href="#" class="text-gray-800 dark:text-gray-200 hover:text-green-700 dark:hover:text-green-400"><i class="fab fa-twitter fa-2x"></i></a>
        <a href="#" class="text-gray-800 dark:text-gray-200 hover:text-orange-700 dark:hover:text-orange-400"><i class="fab fa-instagram fa-2x"></i></a>
      </div>
    </div>
  </div>
  <div class="border-t border-gray-300 dark:border-gray-700 mt-8 pt-8 text-center text-sm">
    &copy; 2023 Your Blog Name. All rights reserved.
  </div>
</footer>

フッターコンポーネント

ブログ/コンテンツ Web サイト用のニューモーフィックフッターコンポーネント、モノクロカラースキーム、ダークモードサポート付き。これは、適度に複雑なコンポーネントです。応答性が高いです。

プレビューを開く

                <footer class="dark:bg-gray-800 bg-gray-200 text-gray-700 dark:text-gray-300 py-10 px-4 md:px-8 shadow-neumorphic-light dark:shadow-neumorphic-dark">
  <div class="max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-8">
    
    <div class="col-span-1">
      <h3 class="text-lg font-semibold mb-4 text-gray-800 dark:text-gray-200">About Us</h3>
      <p class="text-sm leading-relaxed">We are a passionate team dedicated to delivering high-quality content and insights on various topics. Stay tuned for more!</p>
    </div>
    
    <div class="col-span-1">
      <h3 class="text-lg font-semibold mb-4 text-gray-800 dark:text-gray-200">Quick Links</h3>
      <ul class="text-sm space-y-2">
        <li><a href="#" class="hover:text-gray-900 dark:hover:text-white transition-colors duration-200">Home</a></li>
        <li><a href="#" class="hover:text-gray-900 dark:hover:text-white transition-colors duration-200">Blog</a></li>
        <li><a href="#" class="hover:text-gray-900 dark:hover:text-white transition-colors duration-200">About</a></li>
        <li><a href="#" class="hover:text-gray-900 dark:hover:text-white transition-colors duration-200">Contact</a></li>
      </ul>
    </div>
    
    <div class="col-span-1">
      <h3 class="text-lg font-semibold mb-4 text-gray-800 dark:text-gray-200">Subscribe</h3>
      <p class="text-sm mb-4">Get the latest articles and updates directly in your inbox.</p>
      <div class="flex">
        <input type="email" placeholder="Your email" class="w-full px-4 py-2 rounded-l-md focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600 bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-gray-200 shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark">
        <button class="bg-gray-400 dark:bg-gray-600 text-white px-4 py-2 rounded-r-md hover:bg-gray-500 dark:hover:bg-gray-700 transition-colors duration-200 shadow-neumorphic-btn-light dark:shadow-neumorphic-btn-dark">Subscribe</button>
      </div>
    </div>
  </div>
  
  <div class="border-t border-gray-300 dark:border-gray-700 mt-8 pt-8 text-center text-sm">
    &copy; 2023 Your Blog Name. All rights reserved.
  </div>
</footer>

<style>
  .shadow-neumorphic-light {
    box-shadow: 6px 6px 12px #b0b0b0, -6px -6px 12px #ffffff;
  }
  .dark .shadow-neumorphic-dark {
    box-shadow: 6px 6px 12px #4a4a4a, -6px -6px 12px #222222;
  }
  .shadow-inner-neumorphic-light {
    box-shadow: inset 5px 5px 10px #b0b0b0, inset -5px -5px 10px #ffffff;
  }
  .dark .shadow-inner-neumorphic-dark {
    box-shadow: inset 5px 5px 10px #4a4a4a, inset -5px -5px 10px #222222;
  }
  .shadow-neumorphic-btn-light {
    box-shadow: 3px 3px 6px #b0b0b0, -3px -3px 6px #ffffff;
  }
  .dark .shadow-neumorphic-btn-dark {
    box-shadow: 3px 3px 6px #4a4a4a, -3px -3px 6px #222222;
  }
</style>

Neumorphism フッターコンポーネント

Resposive Neumorphism フッターコンポーネント (ダークテーマ対応)

プレビューを開く

                <footer class="bg-gray-200 dark:bg-gray-800 text-gray-700 dark:text-gray-300 body-font">
  <div class="container px-5 py-24 mx-auto">
    <div class="flex flex-wrap md:text-left text-center order-first">
      <div class="lg:w-1/4 md:w-1/2 w-full px-4">
        <h2 class="title-font font-medium text-gray-900 dark:text-white tracking-widest text-sm mb-3">CATEGORIES</h2>
        <nav class="list-none mb-10">
          <li>
            <a class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">First Link</a>
          </li>
          <li>
            <a class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">Second Link</a>
          </li>
          <li>
            <a class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">Third Link</a>
          </li>
          <li>
            <a class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">Fourth Link</a>
          </li>
        </nav>
      </div>
      <div class="lg:w-1/4 md:w-1/2 w-full px-4">
        <h2 class="title-font font-medium text-gray-900 dark:text-white tracking-widest text-sm mb-3">CATEGORIES</h2>
        <nav class="list-none mb-10">
          <li>
            <a class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">First Link</a>
          </li>
          <li>
            <a class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">Second Link</a>
          </li>
          <li>
            <a class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">Third Link</a>
          </li>
          <li>
            <a class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">Fourth Link</a>
          </li>
        </nav>
      </div>
      <div class="lg:w-1/4 md:w-1/2 w-full px-4">
        <h2 class="title-font font-medium text-gray-900 dark:text-white tracking-widest text-sm mb-3">CATEGORIES</h2>
        <nav class="list-none mb-10">
          <li>
            <a class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">First Link</a>
          </li>
          <li>
            <a class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">Second Link</a>
          </li>
          <li>
            <a class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">Third Link</a>
          </li>
          <li>
            <a class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">Fourth Link</a>
          </li>
        </nav>
      </div>
      <div class="lg:w-1/4 md:w-1/2 w-full px-4 lg:mt-0 mt-10">
        <h2 class="title-font font-medium text-gray-900 dark:text-white tracking-widest text-sm mb-3">SUBSCRIBE</h2>
        <div class="flex xl:flex-nowrap md:flex-nowrap lg:flex-wrap flex-wrap justify-center items-end md:justify-start">
          <div class="relative w-40 sm:w-auto xl:mr-4 lg:mr-0 sm:mr-4 mr-2">
            <label for="footer-field" class="leading-7 text-sm text-gray-700 dark:text-gray-300">Placeholder</label>
            <input type="text" id="footer-field" name="footer-field" class="w-full bg-gray-100 dark:bg-gray-700 bg-opacity-50 rounded border border-gray-300 dark:border-gray-700 focus:ring-2 focus:ring-indigo-200 focus:bg-transparent focus:border-indigo-500 text-base outline-none text-gray-700 dark:text-gray-300 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out">
          </div>
          <button class="lg:mt-2 xl:mt-0 flex-shrink-0 inline-flex text-white bg-indigo-500 border-0 py-2 px-6 focus:outline-none hover:bg-indigo-600 rounded">Button</button>
        </div>
        <p class="text-gray-700 dark:text-gray-300 text-sm mt-2 md:text-left text-center">Bitian theme
          <br class="lg:block hidden">whatever future is there for them</p>
      </div>
    </div>
  </div>
  <div class="bg-gray-300 dark:bg-gray-900">
    <div class="container px-5 py-6 mx-auto flex items-center sm:flex-row flex-col">
      <a class="flex title-font font-medium items-center md:justify-start justify-center text-gray-900 dark:text-white">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-10 h-10 text-white p-2 bg-indigo-500 rounded-full" viewBox="0 0 24 24">
          <path d="M12 2L2 12l10 10 10-10L12 2zM12 12l8-8-8-8Z"></path>
     </svg>
        <span class="ml-3 text-xl">Tailblocks</span>
      </a>
      <p class="text-sm text-gray-700 dark:text-gray-300 sm:ml-6 sm:mt-0 mt-4">© 2024 Tailwind —
        <a href="https://twitter.com/knyttneve" rel="noopener noreferrer" class="text-gray-700 dark:text-gray-300 ml-1" target="_blank">@knyttneve</a>
      </p>
      <span class="inline-flex sm:ml-auto sm:mt-0 mt-4 justify-center sm:justify-start">
        <a class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">
          <svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
            <path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z"></path>
          </svg>
        </a>
        <a class="ml-3 text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">
          <svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
            <path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-.8 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z"></path>
          </svg>
        </a>
        <a class="ml-3 text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">
          <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
            <rect width="20" height="20" x="2" y="2" rx="5" ry="5"></rect>
            <path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37zm1.5-4.87h.01"></path>
          </svg>
        </a>
        <a class="ml-3 text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">
          <svg fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="0" class="w-5 h-5" viewBox="0 0 24 24">
            <path stroke="none" d="M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-2-2 2 2 0 00-2 2v7h-4v-7a6 6 0 016-6zM2 9h4v12H2z"></path>
            <circle cx="4" cy="4" r="2" stroke="none"></circle>
          </svg>
        </a>
      </span>
    </div>
  </div>
</footer>

Skeuomorphic フッターコンポーネント

スキューモーフィックデザイン、類似の配色(緑、青緑)、およびビジネスWebサイトに適した適度な複雑さを備えたレスポンシブフッターコンポーネント。リンク、ロゴプレースホルダー、シャドウとグラデーションで実現される微妙なスキューモーフィック効果が含まれています。ライトモードとダークモードをサポートします。

プレビューを開く

                <footer class="bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-800 dark:to-gray-900 text-gray-800 dark:text-gray-200 py-12">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap justify-between items-center">
      <div class="w-full md:w-1/4 mb-6 md:mb-0">
        <!-- Logo Placeholder with Skeuomorphic effect -->
        <div class="w-24 h-24 bg-gradient-to-br from-gray-300 to-gray-400 dark:from-gray-700 dark:to-gray-800 rounded-lg shadow-xl dark:shadow-xl-dark flex items-center justify-center">
          <svg class="w-12 h-12 text-gray-600 dark:text-gray-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="M19 21v-2a4 4 0 00-4-4H9a4 4 0 00-4 4v2m16 0h-3.586a1 1 0 01-.707-.293l-.031-.032A1.5 1.5 0 0015 18a1.5 1.5 0 00-2.121-1.06l-.032-.032A1 1 0 0112.586 17H9.414a1 1 0 01-.707.293l-.031.032A1.5 1.5 0 006 18a1.5 1.5 0 00-2.121-1.06l-.032-.032A1 1 0 013.586 19H1"></path></svg>
        </div>
      </div>
      <div class="w-full md:w-1/4 mb-6 md:mb-0">
        <h4 class="text-lg font-semibold mb-4">Quick Links</h4>
        <ul class="space-y-2">
          <li><a href="#" class="hover:text-gray-600 dark:hover:text-gray-400 transition duration-300 ease-in-out">Home</a></li>
          <li><a href="#" class="hover:text-gray-600 dark:hover:text-gray-400 transition duration-300 ease-in-out">About Us</a></li>
          <li><a href="#" class="hover:text-gray-600 dark:hover:text-gray-400 transition duration-300 ease-in-out">Services</a></li>
          <li><a href="#" class="hover:text-gray-600 dark:hover:text-gray-400 transition duration-300 ease-in-out">Contact</a></li>
        </ul>
      </div>
      <div class="w-full md:w-1/4 mb-6 md:mb-0">
        <h4 class="text-lg font-semibold mb-4">Resources</h4>
        <ul class="space-y-2">
          <li><a href="#" class="hover:text-gray-600 dark:hover:text-gray-400 transition duration-300 ease-in-out">Blog</a></li>
          <li><a href="#" class="hover:text-gray-600 dark:hover:text-gray-400 transition duration-300 ease-in-out">Support</a></li>
          <li><a href="#" class="hover:text-gray-600 dark:hover:text-gray-400 transition duration-300 ease-in-out">Privacy Policy</a></li>
          <li><a href="#" class="hover:text-gray-600 dark:hover:text-gray-400 transition duration-300 ease-in-out">Terms of Service</a></li>
        </ul>
      </div>
      <div class="w-full md:w-1/4">
        <h4 class="text-lg font-semibold mb-4">Contact Us</h4>
        <p class="mb-2">123 Business Lane, Corporate City</p>
        <p class="mb-2">Email: [email protected]</p>
        <p>Phone: (123) 456-7890</p>
      </div>
    </div>
    <hr class="my-8 border-gray-400 dark:border-gray-600">
    <div class="text-center text-sm">
      &copy; 2023 Your Business. All rights reserved.
    </div>
  </div>
</footer>

Neumorphic フッターコンポーネント

ソーシャルメディアインターフェイス用のNeumorphicスタイルのフッターコンポーネントで、鮮やかな色と複雑なレイアウト、ダークモードをサポートします。

プレビューを開く

                <footer class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg dark:shadow-2xl">
    <div class="flex flex-col items-center">
        <div class="flex space-x-6 mb-4">
            <a href="#" class="bg-blue-500 dark:bg-blue-700 text-white p-2 rounded-full shadow-md hover:shadow-lg transition transform hover:scale-105">
                <img src="https://picsum.photos/50?random=1" alt="Facebook" class="h-8 w-8 rounded-full">
            </a>
            <a href="#" class="bg-blue-400 dark:bg-blue-600 text-white p-2 rounded-full shadow-md hover:shadow-lg transition transform hover:scale-105">
                <img src="https://picsum.photos/50?random=2" alt="Twitter" class="h-8 w-8 rounded-full">
            </a>
            <a href="#" class="bg-red-500 dark:bg-red-700 text-white p-2 rounded-full shadow-md hover:shadow-lg transition transform hover:scale-105">
                <img src="https://picsum.photos/50?random=3" alt="Instagram" class="h-8 w-8 rounded-full">
            </a>
            <a href="#" class="bg-purple-500 dark:bg-purple-700 text-white p-2 rounded-full shadow-md hover:shadow-lg transition transform hover:scale-105">
                <img src="https://picsum.photos/50?random=4" alt="LinkedIn" class="h-8 w-8 rounded-full">
            </a>
        </div>
        <p class="text-gray-700 dark:text-gray-300 text-sm mb-2">© 2023 Your Company</p>
        <p class="text-gray-500 dark:text-gray-400 text-xs">Follow us on social media!</p>
    </div>
</footer>

フッターコンポーネント

Tailwind CSS を使用して、ダークテーマをサポートするレトロ/ビンテージスタイルでデザインされたシンプルなレスポンシブフッターコンポーネント。ビジネス/企業のWebサイトに適した基本的なレイアウトが特徴です。

プレビューを開く

                <footer class="bg-blue-900 text-white py-6 mt-10 dark:bg-gray-800">
    <div class="container mx-auto text-center">
        <div class="flex flex-col md:flex-row justify-between items-center">
            <div class="mb-4 md:mb-0">
                <img src="https://picsum.photos/100/50" alt="Company Logo" class="mx-auto mb-2">
                <h2 class="text-lg font-bold">Company Name</h2>
                <p class="text-sm">Your tagline goes here.</p>
            </div>
            <div>
                <h3 class="text-md font-semibold mb-2">Follow Us</h3>
                <div class="flex justify-center space-x-4">
                    <a href="#" class="text-gray-400 hover:text-gray-200"><img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Facebook" class="h-6 w-6"></a>
                    <a href="#" class="text-gray-400 hover:text-gray-200"><img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Twitter" class="h-6 w-6"></a>
                    <a href="#" class="text-gray-400 hover:text-gray-200"><img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Instagram" class="h-6 w-6"></a>
                </div>
            </div>
        </div>
        <div class="mt-6 border-t border-gray-600 pt-4">
            <p class="text-xs">&copy; 2023 Company Name. All rights reserved.</p>
        </div>
    </div>
</footer>

ソーシャルネットワーキングインターフェイス用のレスポンシブフッターコンポーネントで、モノクロの青の配色を使用してマテリアルデザインの原則に基づいて設計されています。グリッドベースのレイアウト、深度効果(シャドウ)、インタラクティブ要素のホバーおよびトランジションアニメーション、ニュースレター購読フォーム、ソーシャルアイコン、ユーザーアバター、およびTailwindのdark:モディファイアによるダークモードのサポートを備えています。

プレビューを開く

                <footer class="bg-blue-50 dark:bg-blue-900 text-blue-900 dark:text-blue-100 shadow-inner pt-16 pb-8 transition-colors duration-200">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="grid grid-cols-1 md:grid-cols-3 gap-12">
      <!-- Brand & Description -->
      <div>
        <img class="h-8 mb-4 rounded shadow-md" src="https://picsum.photos/100/40?grayscale" alt="SocialNet Logo" />
        <h2 class="text-lg font-semibold mb-2">About SocialNet</h2>
        <p class="text-sm leading-relaxed">Connect with friends, share your moments, and explore what's happening around you.</p>
      </div>
      <!-- Useful Links -->
      <div class="grid grid-cols-2 gap-8">
        <div>
          <h3 class="text-sm font-semibold mb-3">Product</h3>
          <ul class="space-y-2">
            <li><a href="#" class="text-sm transition-colors duration-200 hover:text-blue-600 dark:hover:text-blue-300">Features</a></li>
            <li><a href="#" class="text-sm transition-colors duration-200 hover:text-blue-600 dark:hover:text-blue-300">Integrations</a></li>
            <li><a href="#" class="text-sm transition-colors duration-200 hover:text-blue-600 dark:hover:text-blue-300">Privacy</a></li>
          </ul>
        </div>
        <div>
          <h3 class="text-sm font-semibold mb-3">Company</h3>
          <ul class="space-y-2">
            <li><a href="#" class="text-sm transition-colors duration-200 hover:text-blue-600 dark:hover:text-blue-300">About Us</a></li>
            <li><a href="#" class="text-sm transition-colors duration-200 hover:text-blue-600 dark:hover:text-blue-300">Careers</a></li>
            <li><a href="#" class="text-sm transition-colors duration-200 hover:text-blue-600 dark:hover:text-blue-300">Contact</a></li>
          </ul>
        </div>
      </div>
      <!-- Subscription & Social Icons -->
      <div>
        <h3 class="text-sm font-semibold mb-4">Stay Connected</h3>
        <form class="flex flex-col sm:flex-row sm:items-center space-y-3 sm:space-y-0 sm:space-x-2">
          <input type="email" placeholder="Your email" class="flex-grow px-3 py-2 bg-blue-100 dark:bg-blue-800 border border-blue-200 dark:border-blue-700 text-sm placeholder-blue-400 dark:placeholder-blue-500 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-600 transition-colors duration-200" />
          <button type="submit" class="px-4 py-2 bg-blue-500 hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700 text-white text-sm font-medium rounded-md shadow hover:shadow-lg transition-all duration-200">Subscribe</button>
        </form>
        <div class="mt-6 flex space-x-4">
          <a href="#" class="text-blue-500 hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-300 transition-colors duration-200">
            <!-- Facebook Icon -->
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 fill-current" viewBox="0 0 24 24"><path d="M22.676 0H1.324C.593 0 0 .593 0 1.324v21.352C0 23.407.593 24 1.324 24H12V14.709h-3.292v-3.63H12V8.271c0-3.265 1.993-5.043 4.897-5.043 1.392 0 2.586.104 2.934.15v3.403l-2.015.001c-1.58 0-1.885.752-1.885 1.85v2.426h3.77l-.492 3.63h-3.278V24h6.422c.73 0 1.324-.593 1.324-1.324V1.324C24 .593 23.407 0 22.676 0z"/></svg>
          </a>
          <a href="#" class="text-blue-500 hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-300 transition-colors duration-200">
            <!-- Twitter Icon -->
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 fill-current" viewBox="0 0 24 24"><path d="M24 4.557a9.93 9.93 0 0 1-2.827.775 4.93 4.93 0 0 0 2.165-2.724 9.865 9.865 0 0 1-3.127 1.195 4.916 4.916 0 0 0-8.384 4.482A13.94 13.94 0 0 1 1.671 3.149 4.916 4.916 0 0 0 3.194 9.723 4.9 4.9 0 0 1 .964 9.1v.062a4.917 4.917 0 0 0 3.941 4.817 4.913 4.913 0 0 1-2.212.084 4.919 4.919 0 0 0 4.594 3.417A9.868 9.868 0 0 1 .48 19.292 13.94 13.94 0 0 0 7.548 21c9.356 0 14.407-7.721 13.995-14.646A10.025 10.025 0 0 0 24 4.557z"/></svg>
          </a>
          <a href="#" class="text-blue-500 hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-300 transition-colors duration-200">
            <!-- Instagram Icon -->
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 fill-current" viewBox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 1.206.056 2.052.248 2.528.415a5.003 5.003 0 0 1 1.845 1.17 5.006 5.006 0 0 1 1.17 1.845c.167.476.359 1.322.415 2.528.058 1.266.07 1.646.07 4.85s-.012 3.584-.07 4.85c-.056 1.206-.248 2.052-.415 2.528a5.002 5.002 0 0 1-1.17 1.845 5.004 5.004 0 0 1-1.845 1.17c-.476.167-1.322.359-2.528.415-1.266.058-1.646.07-4.85.07s-3.584-.012-4.85-.07c-1.206-.056-2.052-.248-2.528-.415a4.993 4.993 0 0 1-1.845-1.17 4.994 4.994 0 0 1-1.17-1.845c-.167-.476-.359-1.322-.415-2.528C2.175 15.747 2.163 15.367 2.163 12s.012-3.584.07-4.85c.056-1.206.248-2.052.415-2.528a5.005 5.005 0 0 1 1.17-1.845 5.005 5.005 0 0 1 1.845-1.17c.476-.167 1.322-.359 2.528-.415C8.416 2.175 8.796 2.163 12 2.163zm0-2.163C8.741 0 8.332.013 7.052.072 5.775.131 4.836.343 4.1.626a7.005 7.005 0 0 0-2.541 1.636A7.005 7.005 0 0 0 .626 4.1C.343 4.836.131 5.775.072 7.052.013 8.332 0 8.741 0 12s.013 3.668.072 4.948c.059 1.277.271 2.216.554 2.952a7.002 7.002 0 0 0 1.636 2.541 7.003 7.003 0 0 0 2.541 1.636c.736.283 1.675.495 2.952.554C8.332 23.987 8.741 24 12 24s3.668-.013 4.948-.072c1.277-.059 2.216-.271 2.952-.554a7.006 7.006 0 0 0 2.541-1.636 7.004 7.004 0 0 0 1.636-2.541c.283-.736.495-1.675.554-2.952.059-1.28.072-1.689.072-4.948s-.013-3.668-.072-4.948c-.059-1.277-.271-2.216-.554-2.952a7.003 7.003 0 0 0-1.636-2.541A7.005 7.005 0 0 0 19.9.626c-.736-.283-1.675-.495-2.952-.554C15.668.013 15.259 0 12 0z"/><path d="M12 5.838a6.162 6.162 0 1 0 0 12.324 6.162 6.162 0 0 0 0-12.324zm0 10.162a3.999 3.999 0 1 1 0-7.998 3.999 3.999 0 0 1 0 7.998zm6.406-10.845a1.44 1.44 0 1 0 0 2.881 1.44 1.44 0 0 0 0-2.881z"/></svg>
          </a>
        </div>
      </div>
    </div>
    <div class="mt-12 flex flex-col md:flex-row items-center justify-between border-t border-blue-200 dark:border-blue-700 pt-6">
      <p class="text-xs">&copy; 2023 SocialNet. All rights reserved.</p>
      <div class="flex -space-x-2 mt-4 md:mt-0">
        <img class="w-8 h-8 rounded-full border-2 border-white dark:border-blue-900 shadow-md transition-transform transform hover:scale-110" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User avatar" />
        <img class="w-8 h-8 rounded-full border-2 border-white dark:border-blue-900 shadow-md transition-transform transform hover:scale-110" src="https://randomuser.me/api/portraits/men/35.jpg" alt="User avatar" />
        <img class="w-8 h-8 rounded-full border-2 border-white dark:border-blue-900 shadow-md transition-transform transform hover:scale-110" src="https://randomuser.me/api/portraits/women/68.jpg" alt="User avatar" />
        <img class="w-8 h-8 rounded-full border-2 border-white dark:border-blue-900 shadow-md transition-transform transform hover:scale-110" src="https://randomuser.me/api/portraits/men/22.jpg" alt="User avatar" />
      </div>
    </div>
  </div>
</footer>

ニューモーフィックバイブラントフッター

シンプルでレスポンシブなフッターコンポーネントで、ニューモルフィックなデザイン原則と鮮やかな色でスタイル付けされています。繊細な影のある柔らかく押し出された外観が特徴で、彩度の高いアクセントカラーを維持しています。フッターには、サイトナビゲーション、ソーシャルリンク、およびダークモードを完全にサポートする著作権情報の基本セクションが含まれています。

プレビューを開く

                <!-- Neumorphic Vibrant Footer -->
<footer class="w-full py-8 bg-gray-100 dark:bg-gray-800 transition-colors duration-300">
  <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
    <!-- Main Footer Content -->
    <div class="rounded-2xl bg-gray-200 dark:bg-gray-700 p-8 shadow-[8px_8px_16px_#d1d1d1,_-8px_-8px_16px_#ffffff] dark:shadow-[8px_8px_16px_#1a1a1a,_-8px_-8px_16px_#333333]">
      
      <!-- Logo & Tagline -->
      <div class="flex flex-col md:flex-row justify-between items-center mb-8">
        <div class="mb-6 md:mb-0">
          <h2 class="text-2xl font-bold text-fuchsia-600 dark:text-fuchsia-400">Blog Title</h2>
          <p class="text-gray-600 dark:text-gray-300 mt-1">Insights & Stories</p>
        </div>
        
        <!-- Newsletter Signup -->
        <div class="flex items-center space-x-2">
          <input 
            type="email" 
            placeholder="Your email" 
            class="px-4 py-2 rounded-xl bg-gray-300 dark:bg-gray-600 text-gray-700 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-fuchsia-500 shadow-inner"
          >
          <button class="px-4 py-2 rounded-xl bg-gradient-to-br from-fuchsia-500 to-purple-600 text-white font-medium shadow-[3px_3px_6px_#d1d1d1,_-3px_-3px_6px_#ffffff] dark:shadow-[3px_3px_6px_#1a1a1a,_-3px_-3px_6px_#333333] hover:opacity-90 transition-opacity">
            Subscribe
          </button>
        </div>
      </div>
      
      <!-- Navigation Links -->
      <div class="grid grid-cols-2 md:grid-cols-4 gap-6 mb-8">
        <div>
          <h3 class="font-semibold text-lg mb-3 text-cyan-600 dark:text-cyan-400">Content</h3>
          <ul class="space-y-2 text-gray-600 dark:text-gray-300">
            <li><a href="#" class="hover:text-fuchsia-500 dark:hover:text-fuchsia-400 transition-colors">Articles</a></li>
            <li><a href="#" class="hover:text-fuchsia-500 dark:hover:text-fuchsia-400 transition-colors">Tutorials</a></li>
            <li><a href="#" class="hover:text-fuchsia-500 dark:hover:text-fuchsia-400 transition-colors">Stories</a></li>
          </ul>
        </div>
        
        <div>
          <h3 class="font-semibold text-lg mb-3 text-emerald-600 dark:text-emerald-400">Company</h3>
          <ul class="space-y-2 text-gray-600 dark:text-gray-300">
            <li><a href="#" class="hover:text-fuchsia-500 dark:hover:text-fuchsia-400 transition-colors">About</a></li>
            <li><a href="#" class="hover:text-fuchsia-500 dark:hover:text-fuchsia-400 transition-colors">Team</a></li>
            <li><a href="#" class="hover:text-fuchsia-500 dark:hover:text-fuchsia-400 transition-colors">Careers</a></li>
          </ul>
        </div>
        
        <div>
          <h3 class="font-semibold text-lg mb-3 text-amber-600 dark:text-amber-400">Support</h3>
          <ul class="space-y-2 text-gray-600 dark:text-gray-300">
            <li><a href="#" class="hover:text-fuchsia-500 dark:hover:text-fuchsia-400 transition-colors">Help Center</a></li>
            <li><a href="#" class="hover:text-fuchsia-500 dark:hover:text-fuchsia-400 transition-colors">Contact</a></li>
            <li><a href="#" class="hover:text-fuchsia-500 dark:hover:text-fuchsia-400 transition-colors">Privacy</a></li>
          </ul>
        </div>
        
        <div>
          <h3 class="font-semibold text-lg mb-3 text-blue-600 dark:text-blue-400">Connect</h3>
          <div class="flex space-x-4">
            <!-- Social Icons -->
            <a href="#" class="w-10 h-10 rounded-xl flex items-center justify-center bg-gray-300 dark:bg-gray-600 text-fuchsia-500 dark:text-fuchsia-400 shadow-[3px_3px_6px_#d1d1d1,_-3px_-3px_6px_#ffffff] dark:shadow-[3px_3px_6px_#1a1a1a,_-3px_-3px_6px_#333333] hover:bg-fuchsia-500 hover:text-white dark:hover:bg-fuchsia-500 dark:hover:text-white transition-all">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
                <path d="M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.667c0-.955.192-1.333 1.115-1.333h2.885v-5h-3.808c-3.596 0-5.192 1.583-5.192 4.615v3.385z"/>
              </svg>
            </a>
            <a href="#" class="w-10 h-10 rounded-xl flex items-center justify-center bg-gray-300 dark:bg-gray-600 text-cyan-500 dark:text-cyan-400 shadow-[3px_3px_6px_#d1d1d1,_-3px_-3px_6px_#ffffff] dark:shadow-[3px_3px_6px_#1a1a1a,_-3px_-3px_6px_#333333] hover:bg-cyan-500 hover:text-white dark:hover:bg-cyan-500 dark:hover:text-white transition-all">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
                <path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/>
              </svg>
            </a>
            <a href="#" class="w-10 h-10 rounded-xl flex items-center justify-center bg-gray-300 dark:bg-gray-600 text-pink-500 dark:text-pink-400 shadow-[3px_3px_6px_#d1d1d1,_-3px_-3px_6px_#ffffff] dark:shadow-[3px_3px_6px_#1a1a1a,_-3px_-3px_6px_#333333] hover:bg-pink-500 hover:text-white dark:hover:bg-pink-500 dark:hover:text-white transition-all">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
                <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/>
              </svg>
            </a>
          </div>
        </div>
      </div>
      
      <!-- Footer Bottom -->
      <div class="pt-6 border-t border-gray-300 dark:border-gray-600 flex flex-col sm:flex-row justify-between items-center space-y-4 sm:space-y-0">
        <p class="text-gray-600 dark:text-gray-300 text-sm">
          © 2023 Blog Title. All rights reserved.
        </p>
        <div class="flex space-x-4 text-sm text-gray-500 dark:text-gray-400">
          <a href="#" class="hover:text-fuchsia-500 dark:hover:text-fuchsia-400 transition-colors">Terms</a>
          <a href="#" class="hover:text-fuchsia-500 dark:hover:text-fuchsia-400 transition-colors">Privacy</a>
          <a href="#" class="hover:text-fuchsia-500 dark:hover:text-fuchsia-400 transition-colors">Cookies</a>
        </div>
      </div>
      
    </div>
  </div>
</footer>

カテゴリ

フッターコンポーネントフッター

レトロなブログフッター

フッターコンポーネント

フッターコンポーネント

Neumorphism フッターコンポーネント

Skeuomorphic フッターコンポーネント

Neumorphic フッターコンポーネント

フッターコンポーネント

ソーシャルメディアフッターコンポーネント

ニューモーフィックバイブラントフッター