サイトマップコンポーネント
glassmorphismで設計されたレスポンシブサイトマップコンポーネントで、すりガラスのような半透明の効果とぼかしを特徴とし、作品や製品を紹介するポートフォリオを実現します。ダークテーマをサポートし、適度な複雑さを維持しながら補色を利用します。
HTMLコード
<div class="min-h-screen bg-gray-900 dark:bg-gray-800 flex flex-col items-center justify-center p-6">
<div class="bg-white dark:bg-gray-900 rounded-xl shadow-lg backdrop-filter backdrop-blur-lg bg-opacity-30 border border-gray-200 dark:border-gray-700 p-8 mb-6">
<h1 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4">Site Map</h1>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-md hover:shadow-lg transition-all duration-300">
<img src="https://picsum.photos/200/100" alt="Project Thumbnail" class="rounded-lg mb-2">
<h2 class="text-lg font-medium text-gray-800 dark:text-white">Project Title 1</h2>
<p class="text-gray-600 dark:text-gray-300">Brief description of Project 1.</p>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-md hover:shadow-lg transition-all duration-300">
<img src="https://picsum.photos/200/100?random=1" alt="Project Thumbnail" class="rounded-lg mb-2">
<h2 class="text-lg font-medium text-gray-800 dark:text-white">Project Title 2</h2>
<p class="text-gray-600 dark:text-gray-300">Brief description of Project 2.</p>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-md hover:shadow-lg transition-all duration-300">
<img src="https://picsum.photos/200/100?random=2" alt="Project Thumbnail" class="rounded-lg mb-2">
<h2 class="text-lg font-medium text-gray-800 dark:text-white">Project Title 3</h2>
<p class="text-gray-600 dark:text-gray-300">Brief description of Project 3.</p>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-md hover:shadow-lg transition-all duration-300">
<img src="https://picsum.photos/200/100?random=3" alt="Project Thumbnail" class="rounded-lg mb-2">
<h2 class="text-lg font-medium text-gray-800 dark:text-white">Project Title 4</h2>
<p class="text-gray-600 dark:text-gray-300">Brief description of Project 4.</p>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-md hover:shadow-lg transition-all duration-300">
<img src="https://picsum.photos/200/100?random=4" alt="Project Thumbnail" class="rounded-lg mb-2">
<h2 class="text-lg font-medium text-gray-800 dark:text-white">Project Title 5</h2>
<p class="text-gray-600 dark:text-gray-300">Brief description of Project 5.</p>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-md hover:shadow-lg transition-all duration-300">
<img src="https://picsum.photos/200/100?random=5" alt="Project Thumbnail" class="rounded-lg mb-2">
<h2 class="text-lg font-medium text-gray-800 dark:text-white">Project Title 6</h2>
<p class="text-gray-600 dark:text-gray-300">Brief description of Project 6.</p>
</div>
</div>
</div>
<footer class="text-center text-gray-600 dark:text-gray-400">
<p class="text-sm">© 2023 Your Name. All Rights Reserved.</p>
<p>Follow me on <a href="#" class="text-green-500 hover:underline">LinkedIn</a> | <a href="#" class="text-blue-500 hover:underline">Twitter</a></p>
</footer>
</div>関連コンポーネント
サイトマップコンポーネント
マテリアル デザインの原則でスタイル設定され、電子商取引用に最適化されたレスポンシブ サイト マップ コンポーネントで、パステル カラーとダーク モードのサポートが特徴です。
サイトマップコンポーネント
ソーシャルメディアインターフェース用に設計されたレトロ/ビンテージサイトマップコンポーネントで、単色の配色を使用しています。読みやすさと美的魅力を高めるために、ダークテーマのシンプルなレイアウトが特徴です。
サイトマップコンポーネント
ブルータリズムスタイルでデザインされたレスポンシブサイトマップコンポーネントで、ビジネス/企業のWebサイト向けのダークテーマで、インタラクティブ機能が組み込まれています。