Glassmorphism タブ コンポーネント
ポートフォリオ用のシンプルなGlassmorphismタブコンポーネントで、レスポンシブデザインとダークテーマがサポートされています。鮮やかな配色を使用。
HTMLコード
<div class="flex justify-center items-center h-screen bg-gray-200 dark:bg-gray-900 p-8">
<div class="w-full max-w-md bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-lg p-6 shadow-xl">
<div class="flex border-b border-gray-200 dark:border-gray-700">
<button class="flex-1 py-2 px-4 text-center text-lg font-medium text-indigo-700 dark:text-indigo-300 border-b-2 border-indigo-500 dark:border-indigo-400 focus:outline-none">Projects</button>
<button class="flex-1 py-2 px-4 text-center text-lg font-medium text-gray-600 dark:text-gray-400 hover:text-indigo-700 dark:hover:text-indigo-300 focus:outline-none">About</button>
<button class="flex-1 py-2 px-4 text-center text-lg font-medium text-gray-600 dark:text-gray-400 hover:text-indigo-700 dark:hover:text-indigo-300 focus:outline-none">Contact</button>
</div>
<div class="mt-6 text-gray-700 dark:text-gray-300">
<!-- Tab content goes here -->
<p>This is the content for the Projects tab. You can replace this with your actual portfolio items.</p>
</div>
</div>
</div>関連コンポーネント
スキューモーフィック タブ コンポーネント
Tailwind CSSを利用して現実世界のデザイン要素を模倣し、スキューモーフィズムでスタイル化されたレスポンシブタブコンポーネント。これには、ダークテーマのサポートとプレースホルダー画像が含まれます。