Composant de mise en page 3D
Un composant de mise en page de médias sociaux réactif 3D Design avec une palette de couleurs en niveaux de gris. Convient aux interfaces de réseaux sociaux.
HTML Code
<div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-6 mb-6 transform hover:scale-105 transition-transform duration-300">
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/men/10.jpg" alt="User Avatar" class="w-12 h-12 rounded-full shadow-md border-2 border-gray-300 dark:border-gray-700">
<h2 class="text-gray-800 dark:text-white text-lg font-semibold ml-4">User Name</h2>
</div>
<div class="mb-4">
<img src="https://picsum.photos/400/200" alt="Post Image" class="rounded-lg shadow-md">
</div>
<div class="text-gray-600 dark:text-gray-300">
<p class="mb-2">This is a simple social media post showcasing a 3D design layout. Engage with your network in style!</p>
</div>
<div class="mt-4 flex space-x-4">
<button class="bg-gray-800 text-white rounded-md px-4 py-2 transition-colors duration-300 hover:bg-gray-600">Like</button>
<button class="bg-gray-800 text-white rounded-md px-4 py-2 transition-colors duration-300 hover:bg-gray-600">Comment</button>
</div>
</div>Composants associés
Disposition du lecteur de musique Cyberpunk
Une disposition de lecteur de musique sur le thème cyberpunk avec une esthétique néon futuriste, des arrière-plans sombres et des couleurs d’accentuation vibrantes, conçue pour la réactivité et la prise en charge du mode sombre.
Composant de mise en page du commerce électronique
Un composant de mise en page e-commerce réactif avec prise en charge du thème sombre, construit avec Tailwind CSS selon les principes de Material Design. Il comprend une barre de navigation, une zone de contenu principale avec des listes de produits et un pied de page. La palette de couleurs est pastel.
Mise en page RetroBlog
Une mise en page de blog simple et réactive avec une esthétique rétro/vintage, la prise en charge du mode sombre et une palette de couleurs complémentaire, construite avec Tailwind CSS.