Composant Infographie
Un composant d’infographie 3D réactif conçu pour les interfaces de médias sociaux avec des couleurs vives et une prise en charge des thèmes sombres, incorporant des éléments tridimensionnels pour plus de profondeur et d’engagement.
HTML Code
<div class="bg-gray-800 text-white p-6 rounded-lg shadow-lg max-w-lg mx-auto">
<div class="text-center mb-4">
<h2 class="text-3xl font-bold">Infographic Title</h2>
<p class="text-gray-400">Engaging insights and data visualizations</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="bg-gradient-to-r from-purple-500 to-blue-500 p-4 rounded-lg shadow-lg transform transition-transform duration-300 hover:scale-105">
<h3 class="font-semibold text-xl">Key Insight #1</h3>
<img src="https://picsum.photos/id/1018/400/300" alt="Infographic" class="rounded-lg my-2 shadow-md"/>
<p class="text-gray-200">Details about the first key insight go here. It should be engaging and informative.</p>
</div>
<div class="bg-gradient-to-r from-green-400 to-teal-500 p-4 rounded-lg shadow-lg transform transition-transform duration-300 hover:scale-105">
<h3 class="font-semibold text-xl">Key Insight #2</h3>
<img src="https://picsum.photos/id/1015/400/300" alt="Infographic" class="rounded-lg my-2 shadow-md"/>
<p class="text-gray-200">Details about the second key insight go here. Make it intriguing!</p>
</div>
</div>
<div class="mt-6">
<h3 class="text-lg font-semibold">Join the Conversation</h3>
<div class="flex items-center mt-2">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2" />
<input type="text" placeholder="Share your thoughts..." class="bg-gray-700 text-white rounded-full py-2 px-4 w-full" />
</div>
<button class="mt-2 bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full inline-flex items-center">Submit</button>
</div>
</div>
<style>
@media (prefers-color-scheme: dark) {
.bg-gray-800 {
background-color: #1c1c1c;
}
.bg-gradient-to-r {
background-image: linear-gradient(to right, #6a0dad, #1e90ff);
}
}
</style>Composants associés
Infographie sur les rencontres skeuomorphes
Un composant infographique complexe et réactif conçu pour les plateformes de rencontres/sociales avec un style skeuomorphe et une palette de couleurs sépia/marron, avec plusieurs éléments interactifs et la prise en charge du mode sombre.
Composant Infographie
Un composant d’infographie réactif avec des éléments de conception 3D, une palette de couleurs pastel et une complexité modérée pour les tableaux de bord, avec prise en charge du mode sombre. Pas de JavaScript, seulement du HTML avec Tailwind CSS.
Composant Infographie
Un composant d’infographie conçu avec skeuomorphism, avec des effets réactifs et la prise en charge des thèmes sombres, à l’aide de Tailwind CSS.