Diseño de negocio de Glassmorphism
Un componente de diseño de glassmorphism simple y receptivo con soporte para modo oscuro usando Tailwind CSS, con tonos tierra.
Código HTML
<div class="bg-gray-100 dark:bg-gray-900 min-h-screen flex items-center justify-center">
<div class="bg-white dark:bg-gray-800 bg-opacity-70 dark:bg-opacity-70 p-8 rounded-xl shadow-lg w-4/5 md:w-2/3 lg:w-1/2 backdrop-filter backdrop-blur-lg">
<h1 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Business Layout Component</h1>
<p class="text-gray-600 dark:text-gray-300">This is a simple layout component showcasing glassmorphism with earth tones, suitable for business websites. It is responsive and supports dark mode.</p>
<div class="mt-6 flex flex-col md:flex-row justify-between items-center">
<div class="text-gray-700 dark:text-gray-200 mb-4 md:mb-0">
<p>Contact Information:</p>
<p>Email: [email protected]</p>
<p>Phone: (123) 456-7890</p>
</div>
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="rounded-full w-16 h-16">
</div>
</div>
</div>Componentes relacionados
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.
Componente de diseño de comercio electrónico
Un componente de diseño de comercio electrónico simple y receptivo con una estética de diseño de materiales en escala de grises, con una cuadrícula de productos, un encabezado y un pie de página, todos con soporte para modo oscuro. Utiliza picsum.photos para las imágenes de productos.
Componente de diseño de blog minimalista
Componente de diseño de blog minimalista con esquema de color monocromático para el consumo de contenido, responsivo y con soporte para temas oscuros.