Corporate_Industrial_Footer_Ocean_Blue
製造業向けに設計された、オーシャン/ブルーの配色を備えた、レスポンシブで企業および産業をテーマにしたフッターコンポーネント。ナビゲーションリンク、連絡先情報、ソーシャルメディア、著作権が含まれ、ダークモードを完全にサポートしています。
HTMLコード
<footer class="bg-sky-700 text-white dark:bg-gray-950 py-12">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8 md:gap-12">
<!-- Company Info / Logo -->
<div class="col-span-1 md:col-span-1">
<h3 class="text-2xl font-bold mb-4 text-sky-100 dark:text-sky-400">AeroFab Inc.</h3>
<p class="text-sky-100 dark:text-gray-400 text-sm leading-relaxed mb-4">
Leading the future of industrial manufacturing through innovation and precision engineering.
</p>
<p class="text-sky-100 dark:text-gray-400 text-sm">
Building tomorrow's industries, today.
</p>
</div>
<!-- Quick Links -->
<div class="col-span-1">
<h4 class="text-lg font-semibold mb-4 text-sky-100 dark:text-sky-400">Quick Links</h4>
<ul class="space-y-3">
<li><a href="#" class="text-sky-100 hover:text-sky-300 dark:text-gray-400 dark:hover:text-sky-300 transition duration-300 text-sm">Our Solutions</a></li>
<li><a href="#" class="text-sky-100 hover:text-sky-300 dark:text-gray-400 dark:hover:text-sky-300 transition duration-300 text-sm">Industries Served</a></li>
<li><a href="#" class="text-sky-100 hover:text-sky-300 dark:text-gray-400 dark:hover:text-sky-300 transition duration-300 text-sm">Case Studies</a></li>
<li><a href="#" class="text-sky-100 hover:text-sky-300 dark:text-gray-400 dark:hover:text-sky-300 transition duration-300 text-sm">Careers</a></li>
<li><a href="#" class="text-sky-100 hover:text-sky-300 dark:text-gray-400 dark:hover:text-sky-300 transition duration-300 text-sm">Blog & News</a></li>
</ul>
</div>
<!-- Contact Info -->
<div class="col-span-1">
<h4 class="text-lg font-semibold mb-4 text-sky-100 dark:text-sky-400">Contact Us</h4>
<div class="space-y-3 text-sky-100 dark:text-gray-400 text-sm">
<p>
123 Industrial Way<br>
Tech City, TX 75001<br>
USA
</p>
<p>
Email: <a href="mailto:[email protected]" class="hover:text-sky-300 transition duration-300">[email protected]</a>
</p>
<p>
Phone: <a href="tel:+1234567890" class="hover:text-sky-300 transition duration-300">+1 (234) 567-890</a>
</p>
<p>
Fax: +1 (234) 567-891
</p>
</div>
</div>
<!-- Newsletter & Social Media -->
<div class="col-span-1">
<h4 class="text-lg font-semibold mb-4 text-sky-100 dark:text-sky-400">Stay Connected</h4>
<p class="text-sky-100 dark:text-gray-400 text-sm mb-4">Subscribe to our newsletter for the latest updates.</p>
<form class="flex flex-col sm:flex-row gap-2 mb-6">
<input type="email" placeholder="Your email address" class="flex-grow px-4 py-2 rounded-md bg-sky-800 border border-sky-600 text-white placeholder-sky-200 focus:outline-none focus:ring-2 focus:ring-sky-300 dark:bg-gray-800 dark:border-gray-700 dark:placeholder-gray-500 dark:text-gray-200 dark:focus:ring-sky-500 text-sm">
<button type="submit" class="bg-sky-500 hover:bg-sky-600 text-white px-5 py-2 rounded-md font-semibold transition duration-300 dark:bg-sky-600 dark:hover:bg-sky-700 text-sm">
Subscribe
</button>
</form>
<div class="flex space-x-4">
<a href="#" aria-label="Facebook" class="text-sky-100 hover:text-sky-300 dark:text-gray-400 dark:hover:text-sky-300 transition duration-300">
<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.33V22C17.34 21.128 22 16.991 22 12z" clip-rule="evenodd" />
</svg>
</a>
<a href="#" aria-label="Twitter" class="text-sky-100 hover:text-sky-300 dark:text-gray-400 dark:hover:text-sky-300 transition duration-300">
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M8.29 20.251c-2.096.166-4.103-.687-5.556-2.18l-.51-.595s4.9-1.928 8-1.57c2.97.337 5.166-.821 5.927-2.36l1.378-2.757-.101-.01c-1.391-.144-2.738-2.09-.766-3.82L20.5 4.3 22 4.3c-.015 2.92-1.306 5.239-3.414 7.02l-1.025.856s-.66-.45-1.527-1.1c-1.284-.967-2.285-2.274-2.868-3.79l.523-1.05s-2.001 1.776-3.078 2.057l-1.12.28s-1.89-1.1-2.903-2.58l.191-.19s-2.92 5.09-2.92 5.09c.677.29 1.579-.9 2.042-1.3l.086.08s-.486 1.13.013 1.96c.49-.69.96-.92 1.341-1.09l.343-2.09s.893.3 1.258.46c.928-.27 1.597-.73 2.158-1.48l-.05.02c.005.006.012.012.019.019.566-.75.766-1.56 1-2.25l-.2-.14s-.2-.16-.3-.3l.04.14s-.5.06-1.05.2c-.44.2-.84.4-1.21.6-.33.1-.6.1-.7.1s-.4-.1-.7-.1c-1.87-1.34-3.1-3.69-3.7-6.22l-1.4 0H4s-.2 1.5.8 2.6c1.65 1.8 1.95 3.5 2.15 4.07l.08.19s-.01.07-.01.12l-.02.04s-.06.27-.06.49c-.06.2-.2.4-.2.4ZM3.109 20.211l-.813-.812c-.524-.523-.972-1.246-1.347-2.09-.38-.85-.689-1.802-.934-2.859-.245-1.057-.42-2.195-.526-3.399-.105-1.204-.158-2.457-.158-3.753 0-1.295.052-2.548.158-3.752.106-1.205.277-2.343.523-3.399.245-1.057.59-2.009 1.05-2.859.458-.85.992-1.574 1.599-2.164.607-.59 1.306-1.042 2.098-1.353.791-.31 1.666-.465 2.624-.465 0 0 1.296-.062 2.618.318 1.488-.309 3.01-.132 4.416.533C19.141 3.32 20.35 4.71 21.08 6.45c.731 1.74 1.1 3.55 1.1 5.43s-.369 3.69-1.1 5.43c-.73 1.74-1.94 3.13-3.46 4.102-1.52.973-3.19 1.459-5.01 1.459-.958 0-1.833-.156-2.624-.465-.792-.31-1.492-.763-2.098-1.353-.607-.59-1.141-1.314-1.599-2.164-.464-.85-.81-1.802-1.055-2.859-.245-1.056-.42-2.194-.526-3.399-.105-1.204-.158-2.457-.158-3.752 0-1.295.052-2.548.158-3.752.106-1.205.277-2.343.523-3.399.245-1.057.59-2.009 1.05-2.859.458-.85.992-1.574 1.599-2.164.607-.59 1.306-1.042 2.098-1.353.791-.31 1.666-.465 2.624-.465 0 0 1.296-.062 2.618.318 1.488-.309 3.01-.132 4.416.533C19.141 3.32 20.35 4.71 21.08 6.45c.731 1.74 1.1 3.55 1.1 5.43s-.369 3.69-1.1 5.43c-.73 1.74-1.94 3.13-3.46 4.102-1.52.973-3.19 1.459-5.01 1.459-.958 0-1.833-.156-2.624-.465-.792-.31-1.492-.763-2.098-1.353-.607-.59-1.141-1.314-1.599-2.164-.464-.85-.81-1.802-1.055-2.859-.245-1.056-.42-2.194-.526-3.399-.105-1.204-.158-2.457-.158-3.752 0-1.295.052-2.548.158-3.752.106-1.205.277-2.343.523-3.399.245-1.057-.015-.018-.031-.035-.047-.05ZM5.2 7A1 1 0 014 7.2L3 13.9C2.7 15.6 3.6 17 5 17s2.3-1.4 2.3-3.1L7 7.2A117 117 0 005.2 7zM18.8 7a1 1 0 00-1.2.2L17 13.9c.3 1.7 1.2 3.1 2.6 3.1s2.3-1.4 2.3-3.1L21 7.2A117 117 0 0118.8 7z" />
</svg>
</a>
<a href="#" aria-label="LinkedIn" class="text-sky-100 hover:text-sky-300 dark:text-gray-400 dark:hover:text-sky-300 transition duration-300">
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" clip-rule="evenodd" />
</svg>
</a>
<a href="#" aria-label="YouTube" class="text-sky-100 hover:text-sky-300 dark:text-gray-400 dark:hover:text-sky-300 transition duration-300">
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M19.8 4.3c.09-1.07.72-1.93 1.7-2.3C21.8 1.9 23 2.1 24 2.6l-1 2.4c-.09.3-.12.6-.09 1c.09 1.07.72 1.93 1.7 2.3C23.6 8.5 24 7.6 24 6.8c0-.6-.3-.9-1-1.3-.8-.3-1.6-.2-2.3 0-.7.3-1.2.9-1.4 1.7-.2.7-.2 1.5-.1 2.3.1.8.4 1.5.8 2.2l.4.7c.09.2-.03.5-.2.6l-2.4 1c-.3.09-.6.12-1 .09-1.07-.09-1.93-.72-2.3-1.7-.4-1-.1-2.1.2-3.1.2-.8.5-1.5.8-2.2l.4-.7c.09-.2.03-.5-.2-.6l-2.4-1.1c-.3-.09-.6-.12-1-.09-1.07.09-1.93.72-2.3 1.7-.4 1-.1 2.1.2 3.1.2.8.5 1.5.8 2.2l.4.7c.09.2-.03.5-.2.6l-2.4 1c-.3.09-.6.12-1 .09-1.07-.09-1.93-.72-2.3-1.7-.4-1-.1-2.1.2-3.1.2-.8.5-1.5.8-2.2l.4-.7c.09-.2.03-.5-.2-.6l-2.4-1.1c-.3-.09-.6-.12-1-.09-1.07.09-1.93.72-2.3 1.7-.4 1-.1 2.1.2 3.1.2.8.5 1.5.8 2.2l.4.7c.09.2-.03.5-.2.6l-2.4 1c-.3.09-.6.12-1 .09-1.07-.09-1.93-.72-2.3-1.7-.4-1-.1-2.1.2-3.1.2-.8.5-1.5.8-2.2l.4-.7c.09-.2.03-.5-.2-.6L0 7.2c-.3-.09-.6-.12-1-.09-1.07.09-1.93.72-2.3 1.7-.4.9-.1 2 .2 3 .2.8.5 1.5.8 2.2l.4.7c.09.2-.03.5-.2.6l-2.4 1.1c-.3.09-.6.12-1 .09-1.07-.09-1.93-.72-2.3-1.7-.4-1-.1-2.1.2-3.1.2-.8.5-1.5.8-2.2l.4-.7c.09-.2.03-.5-.2-.6L0 7.2c-.3-.09-.6-.12-1-.09-1.07.09-1.93.72-2.3 1.7-.4.9-.1 2 .2 3 .2.8.5 1.5.8 2.2l.4.7c.09.2-.03.5-.2.6l-2.4 1.1c-.3.09-.6.12-1 .09-1.07-.09-1.93-.72-2.3 1.7-.4.9-.1 2 .2 3 .2.8.5 1.5.8 2.2l.4.7c.09.2-.03.5-.2.6L0 7.2c-.3-.09-.6-.12-1-.09-1.07.09-1.93.72-2.3 1.7-.4.9-.1 2 .2 3 .2.8.5 1.5.8 2.2l.4.7c.09.2-.03.5-.2.6L0 7.2c-.3-.09-.6-.12-1-.09-1.07.09-1.93.72-2.3 1.7-.4.9-.1 2 .2 3 .2.8.5 1.5.8 2.2l.4.7c.09.2-.03.5-.2.6L0 7.2c-.3-.09-.6-.12-1-.09-1.07.09-1.93.72-2.3 1.7-.4.9-.1 2 .2 3 .2.8.5 1.5.8 2.2l.4.7c.09.2-.03.5-.2.6L0 7.2c-.3-.09-.6-.12-1-.09-1.07.09-1.93.72-2.3 1.7-.4.9-.1 2 .2 3 .2.8.5 1.5.8 2.2l.4.7c.09.2-.03.5-.2.6L0 7.2c-.3-.09-.6-.12-1-.09-1.07.09-1.93.72-2.3 1.7-.4.9-.1 2 .2 3 .2.8.5 1.5.8 2.2l.4.7c.09.2-.03.5-.2.6L0 7.2c-.3-.09-.6-.12-1-.09-1.07.09-1.93.72-2.3 1.7-.4.9-.1 2 .2 3 .2.8.5 1.5.8 2.2l.4.7c.09.2-.03.5-.2.6L0 7.2c-.3-.09-.6-.12-1-.09-1.07.09-1.93.72-2.3 1.7-.4.9-.1 2 .2 3 .2.8.5 1.5.8 2.2l.4.7c.09.2-.03.5-.2.6L0 7.2c-.3-.09-.6-.12-1-.09-1.07.09-1.93.72-2.3 1.7-.4.9-.1 2 .2 3 .2.8.5 1.5.8 2.2l.4.7c.09.2-.03.5-.2.6L0 7.2c-.3-.09-.6-.12-1-.09-1.07.09-1.93.72-2.3 1.7-.4.9-.1 2 .2 3 .2.8.5 1.5.8 2.2l.4.7c.09.2-.03.5-.2.6L0 7.2c-.3-.09-.6-.12-1-.09-1.07.09-1.93.72-2.3 1.7-.4.9-.1 2 .2 3 .2.8.5 1.5.8 2.2l.4.7c.09.2-.03.5-.2.6L0 7.2c-.3-.09-.6-.12-1-.09-1.07.09-1.93.72-2.3 1.7-.4.9-.1 2 .2 3 .2.8.5 1.5.8 2.2l.4.7c.09.2-.03.5-.2.6L0 7.2c-.3-.09-.6-.12-1-.09-1.07.09-1.93.72-2.3 1.7c-.4.9-.1 2 .2 3 .2.8.5 1.5.8 2.2l.4.7c.09.2-.03.5-.2.6l-2.4 1.1c-.3-.09-.6-.12-1-.09-1.07.09-1.93.72-2.3 1.7-.4 1-.1 2.1.2 3.1.2.8.5 1.5.8 2.2l.4.7c.09.2-.03.5-.2.6l-2.4 1c-.3.09-.6.12-1 .09-1.07-.09-1.93-.72-2.3-1.7-.4-1-.1-2.1.2-3.1.2-.8.5-1.5.8-2.2l.4-.7c.09-.2.03-.5-.2-.6l-2.4-1.1c-.3-.09-.6-.12-1-.09-1.07.09-1.93.72-2.3 1.7-.4 1-.1 2.1.2 3.1.2.8.5 1.5.8 2.2l.4.7c.09.2-.03.5-.2.6L0 7.2c-.3-.09-.6-.12-1-.09-1.07.09-1.93.72-2.3 1.7-.4.9-.1 2 .2 3 .2.8.5 1.5.8 2.2l.4.7c.09.2-.03.5-.2.6l-2.4 1.1c-.3-.09-.6-.12-1-.09z" clip-rule="evenodd" />
</svg>
</a>
</div>
</div>
</div>
<!-- Divider -->
<hr class="my-8 border-sky-600 dark:border-gray-700">
<!-- Copyright / Bottom Text -->
<div class="text-center text-sky-100 dark:text-gray-400 text-sm">
© 2023 AeroFab Inc. All rights reserved. | <a href="#" class="hover:text-sky-300 dark:hover:text-sky-300 transition duration-300">Privacy Policy</a> | <a href="#" class="hover:text-sky-300 dark:hover:text-sky-300 transition duration-300">Terms of Service</a>
</div>
</div>
</footer>関連コンポーネント
Neumorphic フッター コンポーネント
ソーシャルメディアインターフェイス用のNeumorphicスタイルのフッターコンポーネントで、鮮やかな色と複雑なレイアウト、ダークモードをサポートします。
Organic_Nature_Inspired_Real_Estate_Footer
不動産プラットフォーム向けの複雑で自然にインスパイアされた補完色のフッターコンポーネントで、流れるような線、自然な形、複数のインタラクティブ要素、ダークモードのサポートによる完全な応答性を特徴としています。
Glassmorphism_Footer_Component
ブッキング/予約システム用に設計されたレスポンシブなglassmorphismスタイルのフッターコンポーネントで、補色の配色、インタラクティブな要素、および完全なダークモードのサポートを特徴としています。