Composant de mise en page 3D
Une mise en page de conception 3D simple, réactive et attrayante pour les sites Web d’entreprise/d’entreprise utilisant des couleurs vives, avec prise en charge du thème sombre.
HTML Code
<div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden md:flex md:flex-row">
<div class="md:w-1/2 p-6">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Welcome to Our Company</h2>
<p class="text-gray-600 dark:text-gray-400 mb-4">We provide innovative solutions to enhance your business.</p>
<a href="#" class="bg-indigo-600 text-white rounded-lg px-4 py-2 hover:bg-indigo-700 transition duration-300 shadow-md transform hover:scale-105">Learn More</a>
</div>
<div class="md:w-1/2">
<img src="https://picsum.photos/500/300" alt="Business Image" class="rounded-lg shadow-md w-full h-full object-cover" />
</div>
</div>
<div class="flex justify-center mt-6">
<div class="text-center bg-gray-100 dark:bg-gray-900 rounded-lg p-4 shadow-md">
<h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Our Team</h3>
<div class="flex items-center justify-center space-x-4 mt-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar 1" class="rounded-full w-16 h-16 shadow-lg" />
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar 2" class="rounded-full w-16 h-16 shadow-lg" />
<img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar 3" class="rounded-full w-16 h-16 shadow-lg" />
</div>
<p class="text-gray-600 dark:text-gray-400 mt-2">Meet our dedicated team of professionals.</p>
</div>
</div>Composants associés
Composant de mise en page 3D
Un composant de mise en page de conception 3D réactif avec des visuels attrayants, incorporant de la profondeur à travers les ombres et les couches. Il inclut la prise en charge du mode sombre et propose des images et des avatars aléatoires.
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 rétro des médias sociaux
Une mise en page simple et monochrome à thème rétro pour les réseaux sociaux, avec prise en charge du mode sombre.