3D-Layout-Komponente
Ein einfaches, reaktionsschnelles und ansprechendes 3D-Design-Layout für Geschäfts-/Unternehmenswebsites mit leuchtenden Farben und Unterstützung für dunkle Themen.
HTML-Code
<div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden md:flex md:flex-row">
<div class="md:w-1/2 p-6">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Welcome to Our Company</h2>
<p class="text-gray-600 dark:text-gray-400 mb-4">We provide innovative solutions to enhance your business.</p>
<a href="#" class="bg-indigo-600 text-white rounded-lg px-4 py-2 hover:bg-indigo-700 transition duration-300 shadow-md transform hover:scale-105">Learn More</a>
</div>
<div class="md:w-1/2">
<img src="https://picsum.photos/500/300" alt="Business Image" class="rounded-lg shadow-md w-full h-full object-cover" />
</div>
</div>
<div class="flex justify-center mt-6">
<div class="text-center bg-gray-100 dark:bg-gray-900 rounded-lg p-4 shadow-md">
<h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Our Team</h3>
<div class="flex items-center justify-center space-x-4 mt-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar 1" class="rounded-full w-16 h-16 shadow-lg" />
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar 2" class="rounded-full w-16 h-16 shadow-lg" />
<img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar 3" class="rounded-full w-16 h-16 shadow-lg" />
</div>
<p class="text-gray-600 dark:text-gray-400 mt-2">Meet our dedicated team of professionals.</p>
</div>
</div>
Verwandte Komponenten
Komponente "Layout-Komponenten"
Eine reaktionsschnelle Layout-Komponente, die Mikrointeraktionen durch ansprechende Animationen zeigt, die auf Benutzeraktionen reagieren, mit Unterstützung für den Dunkelmodus und unter Verwendung von Tailwind CSS.
Glassmorphism E-Commerce-Feature-Layout-Komponente
Glassmorphism E-Commerce-Feature-Layout-Komponente
Layout-Komponente im Dunkelmodus
Eine reaktionsschnelle Layoutkomponente mit Unterstützung für den Dunkelmodus unter Verwendung von Tailwind CSS. Verfügt über eine einfache Kopfzeile, einen Inhaltsbereich und eine Fußzeile. Der Dunkelmodus wird in Tailwind-Klassen durch das Präfix 'dark:' behandelt.