Infografía retro
Un componente infográfico retro/vintage simple y receptivo para portafolios con soporte para modo oscuro. Utiliza una combinación de colores complementaria y elementos mínimos.
Código HTML
<div class="bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100 p-6 md:p-12 font-sans">
<div class="max-w-4xl mx-auto">
<h2 class="text-2xl md:text-3xl font-bold text-center mb-8">My Infographic</h2>
<div class="flex flex-wrap -mx-4">
<div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
<div class="bg-white dark:bg-gray-700 rounded-lg shadow-md p-6">
<h3 class="text-xl font-semibold mb-4">Project Alpha</h3>
<p class="text-gray-700 dark:text-gray-300 mb-4">A brief description of Project Alpha and its key features.</p>
<div class="flex items-center">
<img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/75.jpg" alt="Avatar of user">
<div class="text-sm">
<p class="text-gray-900 dark:text-gray-100 leading-none">John Smith</p>
<p class="text-gray-600 dark:text-gray-400">Developer</p>
</div>
</div>
</div>
</div>
<div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
<div class="bg-white dark:bg-gray-700 rounded-lg shadow-md p-6">
<h3 class="text-xl font-semibold mb-4">Project Beta</h3>
<p class="text-gray-700 dark:text-gray-300 mb-4">A brief description of Project Beta and its key features.</p>
<div class="flex items-center">
<img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/76.jpg" alt="Avatar of user">
<div class="text-sm">
<p class="text-gray-900 dark:text-gray-100 leading-none">Jane Doe</p>
<p class="text-gray-600 dark:text-gray-400">Designer</p>
</div>
</div>
</div>
</div>
<div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
<div class="bg-white dark:bg-gray-700 rounded-lg shadow-md p-6">
<h3 class="text-xl font-semibold mb-4">Project Gamma</h3>
<p class="text-gray-700 dark:text-gray-300 mb-4">A brief description of Project Gamma and its key features.</p>
<div class="flex items-center">
<img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/77.jpg" alt="Avatar of user">
<div class="text-sm">
<p class="text-gray-900 dark:text-gray-100 leading-none">Peter Jones</p>
<p class="text-gray-600 dark:text-gray-400">Project Manager</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>Componentes relacionados
Componente de infografía
Un componente de infografía neumórfica con tonos tierra inspirados en el suelo, los árboles y los paisajes. Cuenta con un estilo de interfaz de usuario suave con una complejidad moderada para uso empresarial/corporativo. El diseño es responsivo y admite temas oscuros usando Tailwind CSS.
Componente de infografía
Un componente infográfico simple y receptivo para aplicaciones de criptomonedas / blockchain con una interfaz de usuario de modo oscuro y una paleta de colores bosque / verde. Muestra métricas clave como el total de transacciones, el volumen diario y los usuarios activos.
Componente de infografía
Componente de infografía receptivo con diseño retro / vintage, combinación de colores monocromática y soporte de temas oscuros para sitios web comerciales.