サイトマップコンポーネント
ミニマリスト/フラットデザイン、レスポンシブエフェクト、ダークテーマのサポートを備えたサイトマップコンポーネント。
HTMLコード
<footer class='bg-white dark:bg-gray-900'>
<div class='mx-auto max-w-screen-xl px-4 py-8 sm:px-6 lg:px-8'>
<div class='grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4'>
<div>
<h2 class='text-lg font-bold text-gray-900 dark:text-white'>Company</h2>
<nav class='mt-4 flex flex-col space-y-2 text-sm text-gray-600 dark:text-gray-300'>
<a href='#' class='hover:opacity-75'>About Us</a>
<a href='#' class='hover:opacity-75'>Careers</a>
<a href='#' class='hover:opacity-75'>Contact Us</a>
</nav>
</div>
<div>
<h2 class='text-lg font-bold text-gray-900 dark:text-white'>Services</h2>
<nav class='mt-4 flex flex-col space-y-2 text-sm text-gray-600 dark:text-gray-300'>
<a href='#' class='hover:opacity-75'>Web Development</a>
<a href='#' class='hover:opacity-75'>Mobile Development</a>
<a href='#' class='hover:opacity-75'>SEO Optimization</a>
</nav>
</div>
<div>
<h2 class='text-lg font-bold text-gray-900 dark:text-white'>Legal</h2>
<nav class='mt-4 flex flex-col space-y-2 text-sm text-gray-600 dark:text-gray-300'>
<a href='#' class='hover:opacity-75'>Privacy Policy</a>
<a href='#' class='hover:opacity-75'>Terms of Service</a>
<a href='#' class='hover:opacity-75'>Cookie Policy</a>
</nav>
</div>
<div>
<h2 class='text-lg font-bold text-gray-900 dark:text-white'>Follow Us</h2>
<nav class='mt-4 flex flex-col space-y-2 text-sm text-gray-600 dark:text-gray-300'>
<a href='#' class='hover:opacity-75'>Facebook</a>
<a href='#' class='hover:opacity-75'>Twitter</a>
<a href='#' class='hover:opacity-75'>Instagram</a>
</nav>
</div>
</div>
<div class='mt-8 border-t border-gray-100 dark:border-gray-800 pt-8 sm:flex sm:items-center sm:justify-between'>
<p class='text-xs/relaxed text-gray-500 dark:text-gray-400'>
© 2024 Your Company. All rights reserved.
</p>
</div>
</div>
</footer>