Composant de conteneur 3D
Composant de conteneur réactif pour les tableaux de bord avec une palette de couleurs vives et des éléments de conception 3D, prenant en charge le mode sombre.
HTML Code
<div class="min-h-screen bg-white dark:bg-gray-900 flex flex-col justify-center items-center py-10">
<div class="bg-gradient-to-r from-purple-400 to-pink-600 shadow-lg rounded-lg p-6 md:p-8 transform transition-all duration-300 hover:scale-105">
<h2 class="text-white text-2xl font-bold text-center mb-4">Dashboard Overview</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-4">
<h3 class="text-gray-800 dark:text-gray-200 text-xl font-semibold">User Statistics</h3>
<img class="w-full h-32 object-cover rounded-md mt-2" src="https://picsum.photos/400/200?random=1" alt="Statistics Image">
<p class="text-gray-600 dark:text-gray-400 mt-2">Overview of user data and engagement metrics.</p>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-4">
<h3 class="text-gray-800 dark:text-gray-200 text-xl font-semibold">Revenue Insights</h3>
<img class="w-full h-32 object-cover rounded-md mt-2" src="https://picsum.photos/400/200?random=2" alt="Revenue Image">
<p class="text-gray-600 dark:text-gray-400 mt-2">Detailed revenue analysis for the current period.</p>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-4">
<h3 class="text-gray-800 dark:text-gray-200 text-xl font-semibold">User Profiles</h3>
<img class="w-full h-32 object-cover rounded-md mt-2" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
<p class="text-gray-600 dark:text-gray-400 mt-2">Brief information about some users.</p>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-4">
<h3 class="text-gray-800 dark:text-gray-200 text-xl font-semibold">Latest Updates</h3>
<img class="w-full h-32 object-cover rounded-md mt-2" src="https://picsum.photos/400/200?random=3" alt="Updates Image">
<p class="text-gray-600 dark:text-gray-400 mt-2">Latest updates from the dashboard activities.</p>
</div>
</div>
<button class="mt-4 bg-white dark:bg-gray-800 text-purple-600 dark:text-purple-400 font-semibold py-2 px-4 rounded-lg shadow-md hover:shadow-lg transition duration-300">View More Details</button>
</div>
</div>Composants associés
Conteneur de médias sociaux
Un composant de conteneur réactif avec des couleurs vives, des micro-interactions attrayantes et une prise en charge du thème sombre, adapté aux interfaces de médias sociaux. Les caractéristiques comprennent des effets de survol subtils et une mise en page propre.
Composant de conteneur
Un composant de conteneur minimaliste pour un tableau de bord utilisant Tailwind CSS avec prise en charge du mode sombre.
Carte d’annonce immobilière - Aquarelle/Néon
Une carte d’annonce immobilière complexe avec un arrière-plan doux aquarelle/artistique et une palette de couleurs néon/électrique. Comprend les détails de la propriété, les informations sur l’agent et le prix, avec une réactivité totale et une prise en charge du mode sombre.