Glassmorphism Tabs 구성 요소
소셜 미디어 인터페이스를 위해 설계된 glassmorphism 스타일의 반응형 탭 구성 요소입니다. 회색조 색 구성표와 함께 Tailwind CSS를 사용하여 젖빛 유리와 같은 효과가 특징입니다. 디자인은 다크 모드를 지원합니다.
HTML 코드
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-800">
<div class="bg-gray-900 bg-opacity-50 backdrop-blur-lg rounded-lg shadow-lg p-5 w-full max-w-md">
<h2 class="text-white text-2xl font-semibold mb-4 text-center">Social Media Tabs</h2>
<div class="flex justify-around mb-4">
<button class="py-2 px-4 rounded-lg text-gray-300 font-medium hover:bg-gray-700 dark:hover:bg-gray-600 transition duration-300" id="tab1">Tab 1</button>
<button class="py-2 px-4 rounded-lg text-gray-300 font-medium hover:bg-gray-700 dark:hover:bg-gray-600 transition duration-300" id="tab2">Tab 2</button>
<button class="py-2 px-4 rounded-lg text-gray-300 font-medium hover:bg-gray-700 dark:hover:bg-gray-600 transition duration-300" id="tab3">Tab 3</button>
</div>
<div class="bg-gray-800 rounded-lg p-4">
<div id="content-tab1" class="tab-content text-white hidden">
<h3 class="font-bold text-lg">Tab 1 Content</h3>
<p>Welcome to Tab 1! This is where content for the first tab goes.</p>
<img src="https://picsum.photos/200?random=1" alt="Random Image" class="rounded-md mt-2" />
<div class="flex items-center mt-2">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2" />
<span class="text-gray-300">User 1</span>
</div>
</div>
<div id="content-tab2" class="tab-content text-white hidden">
<h3 class="font-bold text-lg">Tab 2 Content</h3>
<p>Welcome to Tab 2! This is where content for the second tab goes.</p>
<img src="https://picsum.photos/200?random=2" alt="Random Image" class="rounded-md mt-2" />
<div class="flex items-center mt-2">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2" />
<span class="text-gray-300">User 2</span>
</div>
</div>
<div id="content-tab3" class="tab-content text-white hidden">
<h3 class="font-bold text-lg">Tab 3 Content</h3>
<p>Welcome to Tab 3! This is where content for the third tab goes.</p>
<img src="https://picsum.photos/200?random=3" alt="Random Image" class="rounded-md mt-2" />
<div class="flex items-center mt-2">
<img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2" />
<span class="text-gray-300">User 3</span>
</div>
</div>
</div>
</div>
</div>관련 구성 요소
탭 구성 요소
소셜 미디어 인터페이스를 위해 설계된 반응형 탭 구성 요소로, 마이크로 인터랙션과 어두운 테마를 특징으로 합니다. 이 구성 요소에는 여러 대화형 요소가 포함되어 있으며 Tailwind CSS를 사용합니다.