Glassmorphism Tabs Component
A responsive tabs component with glassmorphism style, designed for social media interfaces. It features a frosted glass-like effect using Tailwind CSS with a grayscale color scheme. The design supports dark mode.
HTML Code
<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>Related Components
Tabs Component
A responsive Tabs Component with a Skeuomorphic design, an Analogous color scheme, and a dark theme support, suitable for professional business websites. The component uses Tailwind CSS for styling and includes no JavaScript.
Tabs Component
Responsive Tabs Component with Earth tones and Microinteractions for Business websites, supporting dark mode using Tailwind CSS. Uses only HTML and Tailwind classes.
Tabs Component
A minimalist tabs component for e-commerce websites with interactive elements, responsive design, and dark mode support.