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>関連コンポーネント
Industrial_Monochromatic_Tabs_Component_Booking_Reservation
インダストリアルで単色の美学を備えたシンプルで応答性の高いタブコンポーネントで、予約および予約システム用に設計されています。ダークモードをサポートし、原材料と露出した要素を使用して実用的な魅力を実現します。
Glassmorphism タブ コンポーネント
ソーシャルメディアインターフェース用に設計された、glassmorphismスタイルのレスポンシブタブコンポーネント。グレースケールの配色でTailwind CSSを使用したすりガラスのような効果が特徴です。このデザインはダークモードをサポートしています。