Componente de diseño 3D
Un diseño de diseño 3D simple, receptivo y atractivo para sitios web comerciales / corporativos que utiliza colores vibrantes, con soporte para temas oscuros.
Código HTML
<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>
Componentes relacionados
Componente de diseño 3D
Un componente de diseño 3D receptivo con imágenes atractivas, que incorpora profundidad a través de sombras y capas. Incluye soporte para el modo oscuro y presenta imágenes y avatares aleatorios.
Diseño de portafolio en modo oscuro
Un componente de diseño responsivo en modo oscuro para carteras, con un esquema de color monocromático utilizando Tailwind CSS. Incluye marcadores de posición para el contenido y está diseñado para una complejidad moderada sin JavaScript.
Componente de diseño de comercio electrónico
Un componente de diseño de comercio electrónico responsivo con soporte para temas oscuros, construido con Tailwind CSS siguiendo los principios de Material Design. Incluye una barra de navegación, un área de contenido principal con listados de productos y un pie de página. La combinación de colores es pastel.