Composant Infographie
Composant d’infographie réactif avec un design rétro/vintage, une palette de couleurs monochromatiques et une prise en charge du thème sombre pour les sites Web d’entreprise.
HTML Code
<div class="bg-gray-100 dark:bg-gray-900 min-h-screen p-8">
<div class="max-w-4xl mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 relative overflow-hidden">
<!-- Retro/Vintage background elements -->
<div class="absolute inset-0 z-0 opacity-10 pointer-events-none">
<div class="w-32 h-32 bg-gray-300 dark:bg-gray-700 rounded-full absolute -top-8 -left-8"></div>
<div class="w-24 h-24 bg-gray-300 dark:bg-gray-700 rounded-full absolute -bottom-8 -right-8"></div>
<div class="w-48 h-12 bg-gray-200 dark:bg-gray-700 absolute top-1/4 -left-16 transform -rotate-45"></div>
<div class="w-48 h-12 bg-gray-200 dark:bg-gray-700 absolute bottom-1/4 -right-16 transform rotate-45"></div>
</div>
<div class="relative z-10">
<h2 class="text-3xl md:text-4xl font-bold text-gray-800 dark:text-gray-100 mb-6 text-center tracking-wide uppercase">
Our Company Milestones
</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<!-- Milestone 1 -->
<div class="flex flex-col items-center text-center p-4 bg-gray-50 dark:bg-gray-700 rounded-md shadow-inner transition-transform duration-300 hover:scale-105">
<div class="text-5xl text-gray-600 dark:text-gray-300 mb-3 font-mono">1985</div>
<h3 class="text-xl font-semibold text-gray-700 dark:text-gray-200 mb-2">Founded</h3>
<p class="text-gray-600 dark:text-gray-300">Started with a vision to innovate the industry.</p>
</div>
<!-- Milestone 2 -->
<div class="flex flex-col items-center text-center p-4 bg-gray-50 dark:bg-gray-700 rounded-md shadow-inner transition-transform duration-300 hover:scale-105">
<div class="text-5xl text-gray-600 dark:text-gray-300 mb-3 font-mono">2000</div>
<h3 class="text-xl font-semibold text-gray-700 dark:text-gray-200 mb-2">Global Expansion</h3>
<p class="text-gray-600 dark:text-gray-300">Expanded our reach to international markets.</p>
</div>
<!-- Milestone 3 -->
<div class="flex flex-col items-center text-center p-4 bg-gray-50 dark:bg-gray-700 rounded-md shadow-inner transition-transform duration-300 hover:scale-105">
<div class="text-5xl text-gray-600 dark:text-gray-300 mb-3 font-mono">2023</div>
<h3 class="text-xl font-semibold text-gray-700 dark:text-gray-200 mb-2">Future Ready</h3>
<p class="text-gray-600 dark:text-gray-300">Embracing new technologies for sustainable growth.</p>
</div>
</div>
<div class="mt-8 text-center">
<a href="#" class="inline-block bg-gray-700 dark:bg-gray-200 text-white dark:text-gray-900 py-3 px-8 rounded-full font-bold uppercase tracking-wider shadow-md hover:bg-gray-800 dark:hover:bg-gray-300 transition duration-300">
Learn More About Our Journey
</a>
</div>
</div>
</div>
</div>Composants associés
Composant Infographie
Un composant d’infographie simple et réactif avec des éléments de conception 3D et une palette de couleurs analogue pour l’utilisation d’un blog/contenu. Il inclut la prise en charge des thèmes sombres à l’aide de Tailwind CSS.
Composant Infographie
Un composant infographique simple conçu avec le style Neumorphism et une palette de couleurs pastel. Il affiche une carte de profil et des statistiques de base dans une mise en page visuellement attrayante adaptée aux sites Web d’entreprise ou d’entreprise.
Composant Infographie
Un composant d’infographie réactif conçu dans un style skeuomorphe à l’aide de Tailwind CSS avec prise en charge du thème sombre. Il imite des éléments du monde réel pour afficher visuellement les informations.