Componente Schede
Un componente di schede reattive progettato per le interfacce dei social media, con microinterazioni e un tema scuro. Il componente include più elementi interattivi e utilizza Tailwind CSS.
Codice HTML
<div class="bg-gray-900 dark:bg-gray-800 p-4 rounded-lg">
<div class="flex space-x-4 border-b border-gray-700">
<button class="tab-button text-gray-400 dark:text-gray-300 focus:outline-none py-2 px-4 rounded transition duration-200 hover:bg-gray-700 dark:hover:bg-gray-600" aria-selected="true">Tab 1</button>
<button class="tab-button text-gray-400 dark:text-gray-300 focus:outline-none py-2 px-4 rounded transition duration-200 hover:bg-gray-700 dark:hover:bg-gray-600">Tab 2</button>
<button class="tab-button text-gray-400 dark:text-gray-300 focus:outline-none py-2 px-4 rounded transition duration-200 hover:bg-gray-700 dark:hover:bg-gray-600">Tab 3</button>
<button class="tab-button text-gray-400 dark:text-gray-300 focus:outline-none py-2 px-4 rounded transition duration-200 hover:bg-gray-700 dark:hover:bg-gray-600">Tab 4</button>
</div>
<div class="mt-4">
<div class="tab-content py-6 px-4 bg-gray-800 dark:bg-gray-900 rounded-lg shadow-md">
<h2 class="text-lg font-semibold text-white">Tab 1 Content</h2>
<p class="text-gray-300 dark:text-gray-200">This is the content for Tab 1. It could include various elements like images, text, and interactive features.</p>
<div class="mt-4">
<img src="https://picsum.photos/200/100" alt="Sample Image" class="rounded mb-2">
<div class="flex items-center space-x-2">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full">
<span class="text-gray-200 dark:text-gray-300">User Name</span>
</div>
</div>
</div>
</div>
</div>Componenti correlati
Componente Schede Glassmorphism
Semplice componente Glassmorphism Tabs per Portfolio, con design reattivo e supporto per temi scuri. Utilizza una combinazione di colori vivaci.
Schede di progettazione dei materiali Componente
Un componente Tabs in stile Material Design che utilizza Tailwind CSS, con effetti reattivi e supporto per temi scuri.
Componente Schede Neumorfismo
Un componente a schede neumorfiche per le interfacce utente della dashboard, con una combinazione di colori in scala di grigi, un design reattivo e il supporto del tema scuro utilizzando solo HTML e Tailwind CSS.