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.
Codice HTML
<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>Componenti correlati
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.
Componente Schede modalità scura
Un componente di schede reattive progettato pensando alla modalità oscura, utilizzando Tailwind CSS.
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.