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 receptivo con elementos de diseño 3D, combinación de colores pastel y complejidad moderada para tableros, con soporte para modo oscuro. Sin JavaScript, solo HTML con Tailwind CSS.
RetroInfographicsComponent
Un componente de infografía responsivo con un diseño retro/vintage, combinación de colores pastel y compatibilidad con el modo oscuro. Utiliza Tailwind CSS para el estilo e incluye múltiples elementos interactivos para una interfaz compleja adecuada para blogs y consumo de contenido. Incluye una línea de tiempo, barras de progreso, gráficos y una llamada a la acción, todo ello con estética de los años 80/90 y colores pastel. Utiliza imágenes aleatorias de picsum.photos y randomuser.me para avatares.
Componente de infografía retro vintage
Un componente de tablero de infografías de redes sociales receptivo, de color pastel, de estilo retro / vintage construido con Tailwind CSS, con estadísticas de perfil de usuario, gráfico de barras de hashtags de tendencia y una imagen ilustrativa. Incluye soporte para el modo oscuro a través del prefijo dark: de Tailwind y animaciones interactivas de desplazamiento (no se requiere JavaScript).