Tabs-Komponente
Responsive Tabs Component mit Erdtönen und Microinteractions for Business-Websites, die den Dunkelmodus mit Tailwind CSS unterstützen. Verwendet nur HTML- und Tailwind-Klassen.
HTML-Code
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
<div class="w-full max-w-md">
<div class="flex justify-center">
<button class="px-4 py-2 text-sm font-medium text-gray-600 dark:text-gray-400 bg-gray-200 dark:bg-gray-800 rounded-tl-lg focus:outline-none transition duration-300 ease-in-out hover:bg-gray-300 dark:hover:bg-gray-700 data-[state=active]:bg-white dark:data-[state=active]:bg-gray-700 data-[state=active]:text-gray-800 dark:data-[state=active]:text-white" data-state="active" data-tab="tab1">
About Us
</button>
<button class="px-4 py-2 text-sm font-medium text-gray-600 dark:text-gray-400 bg-gray-200 dark:bg-gray-800 focus:outline-none transition duration-300 ease-in-out hover:bg-gray-300 dark:hover:bg-gray-700 data-[state=active]:bg-white dark:data-[state=active]:bg-gray-700 data-[state=active]:text-gray-800 dark:data-[state=active]:text-white" data-tab="tab2">
Our Services
</button>
<button class="px-4 py-2 text-sm font-medium text-gray-600 dark:text-gray-400 bg-gray-200 dark:bg-gray-800 rounded-tr-lg focus:outline-none transition duration-300 ease-in-out hover:bg-gray-300 dark:hover:bg-gray-700 data-[state=active]:bg-white dark:data-[state=active]:bg-gray-700 data-[state=active]:text-gray-800 dark:data-[state=active]:text-white" data-tab="tab3">
Contact
</button>
</div>
<div class="bg-white dark:bg-gray-700 p-4 rounded-b-lg shadow-md">
<div data-tab-content="tab1">
<h2 class="text-xl font-bold text-gray-800 dark:text-white mb-4">Our Company Story</h2>
<p class="text-gray-600 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<img src="https://picsum.photos/400/200" alt="Company Image" class="mt-4 rounded-md">
</div>
<div class="hidden" data-tab-content="tab2">
<h2 class="text-xl font-bold text-gray-800 dark:text-white mb-4">What We Offer</h2>
<ul class="list-disc list-inside text-gray-600 dark:text-gray-300">
<li>Consulting Services</li>
<li>Development & Design</li>
<li>Marketing Solutions</li>
</ul>
<img src="https://picsum.photos/400/201" alt="Services Image" class="mt-4 rounded-md">
</div>
<div class="hidden" data-tab-content="tab3">
<h2 class="text-xl font-bold text-gray-800 dark:text-white mb-4">Get in Touch</h2>
<p class="text-gray-600 dark:text-gray-300">Email: [email protected]</p>
<p class="text-gray-600 dark:text-gray-300">Phone: (123) 456-7890</p>
<div class="flex items-center mt-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-4">
<p class="text-gray-800 dark:text-white">John Doe, CEO</p>
</div>
</div>
</div>
</div>
</div>Verwandte Komponenten
Industrial_Monochromatic_Tabs_Component_Booking_Reservation
Eine einfache, reaktionsschnelle Tabs-Komponente mit industrieller, monochromatischer Ästhetik, die für Buchungs- und Reservierungssysteme entwickelt wurde. Es unterstützt den Dunkelmodus und verwendet Rohstoffe und freiliegende Elemente für einen utilitaristischen Reiz.
GlassyGrayscaleTabs
Glassmorphism Grayscale Simple Dashboard Tabs Komponente mit Unterstützung für den Dunkelmodus
Manufacturing_Industrial_Grayscale_Paper_Tabs
Eine einfache, reaktionsschnelle Tabulator-Komponente mit einem von Papier/Druck inspirierten Design und Graustufen-Farbschema, geeignet für Fertigungs- und Industrieanwendungen. Inklusive Unterstützung für den Dunkelmodus.