Componente Schede Skeuomorfe
Un componente di schede reattive con scheumorfismo, che utilizza Tailwind CSS per imitare gli elementi di design del mondo reale. Include il supporto per il tema scuro e le immagini segnaposto.
Codice HTML
<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>
Componenti correlati
Componente Schede
Un componente Schede reattivo con un design scheumorfico, una combinazione di colori analoga e un supporto per temi scuri, adatto per siti Web aziendali professionali. Il componente utilizza Tailwind CSS per lo stile e non include JavaScript.
Componente Schede
Componente Schede reattive con toni della terra e microinterazioni per siti Web aziendali, che supporta la modalità oscura utilizzando Tailwind CSS. Utilizza solo le classi HTML e Tailwind.
Componente Schede
Un componente Tabs minimalista e vivace per l'e-commerce con complessità moderata, design reattivo e supporto per temi scuri, implementato utilizzando Tailwind CSS e HTML.