玻璃质感标签组件
一个具有 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>