Skeuomorphic Tabs Component
A responsive tabs component styled with skeuomorphism, utilizing Tailwind CSS to mimic real-world design elements. It includes dark theme support and placeholder images.
HTML Code
<div class="flex flex-col w-full max-w-md mx-auto p-4">
<div class="tabs flex space-x-2">
<button class="tab px-4 py-2 font-semibold text-white bg-gray-800 rounded-lg shadow-lg focus:outline-none ">Tab 1</button>
<button class="tab px-4 py-2 font-semibold text-gray-800 bg-white rounded-lg shadow-lg focus:outline-none ">Tab 2</button>
<button class="tab px-4 py-2 font-semibold text-gray-800 bg-white rounded-lg shadow-lg focus:outline-none ">Tab 3</button>
</div>
<div class="tab-content mt-4 p-4 bg-gray-200 rounded-lg shadow-lg dark:bg-gray-800">
<div class="flex items-center space-x-4">
<img class="w-16 h-16 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" />
<div class="text-gray-700 dark:text-gray-300">
<h2 class="font-bold text-lg">Tab 1 Content</h2>
<p>This section contains information related to Tab 1.</p>
<img class="mt-2 rounded-lg" src="https://picsum.photos/400/200?random=1" alt="Placeholder Image" />
</div>
</div>
</div>
</div>
<style>
/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
.bg-gray-800 { background-color: #2d3748; }
.bg-gray-200 { background-color: #4a5568; }
.text-gray-700 { color: #cbd5e0; }
}
</style>
Related Components
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.
Tabs Component
A responsive Tabs Component with dark mode support for blog/content consumption. Uses triadic color scheme with dark backgrounds to reduce eye strain.
OrganicTabsComponent
A simple, responsive tabs component with an organic, nature-inspired design and a corporate blue color scheme, suitable for music/audio platforms. Includes dark mode support.