Industrial_3D_Content_Display
Un composant d’affichage de contenu simple et réactif pour les entreprises manufacturières/industrielles, avec une conception 3D subtile utilisant des couleurs sourdes et la prise en charge du mode sombre.
HTML Code
<div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
<div class="max-w-4xl w-full space-y-8 bg-white dark:bg-gray-800 p-8 rounded-lg shadow-xl relative overflow-hidden">
<!-- Decorative 3D elements (subtle) -->
<div class="absolute inset-0 pointer-events-none opacity-10 dark:opacity-5">
<div class="absolute top-0 left-0 w-32 h-32 bg-gradient-to-br from-gray-300 to-gray-400 dark:from-gray-700 dark:to-gray-600 rounded-full mix-blend-multiply filter blur-xl transform -translate-x-1/2 -translate-y-1/2"></div>
<div class="absolute bottom-0 right-0 w-48 h-48 bg-gradient-to-tl from-gray-200 to-gray-300 dark:from-gray-600 dark:to-gray-700 rounded-full mix-blend-multiply filter blur-xl transform translate-x-1/2 translate-y-1/2"></div>
</div>
<div class="relative z-10 text-center">
<h2 class="text-3xl font-extrabold text-gray-900 dark:text-gray-100 sm:text-4xl">
Precision Engineering Solutions
</h2>
<p class="mt-4 text-lg text-gray-600 dark:text-gray-400">
Delivering robust and reliable solutions for the modern industrial landscape.
</p>
</div>
<div class="relative z-10 grid grid-cols-1 md:grid-cols-2 gap-8 mt-10">
<!-- Feature 1 -->
<div class="bg-gray-50 dark:bg-gray-700 p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 transform hover:-translate-y-1 relative group overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-600 dark:to-gray-700 rounded-lg opacity-0 group-hover:opacity-20 transition-opacity duration-300"></div>
<div class="relative z-10">
<div class="flex items-center justify-center w-12 h-12 bg-gray-300 dark:bg-gray-600 rounded-full mb-4 mx-auto">
<svg class="h-6 w-6 text-gray-700 dark:text-gray-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1m.364 6.364l-.707-.707M12 20v1m-6.364-1.636l-.707.707M3 12H2m1.636-6.364l.707-.707M19 12a7 7 0 11-14 0 7 7 0 0114 0z"></path>
</svg>
</div>
<h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2 text-center">Advanced Robotics</h3>
<p class="text-gray-600 dark:text-gray-400 text-center">
Automating manufacturing processes with cutting-edge robotic systems for unmatched efficiency.
</p>
</div>
</div>
<!-- Feature 2 -->
<div class="bg-gray-50 dark:bg-gray-700 p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 transform hover:-translate-y-1 relative group overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-600 dark:to-gray-700 rounded-lg opacity-0 group-hover:opacity-20 transition-opacity duration-300"></div>
<div class="relative z-10">
<div class="flex items-center justify-center w-12 h-12 bg-gray-300 dark:bg-gray-600 rounded-full mb-4 mx-auto">
<svg class="h-6 w-6 text-gray-700 dark:text-gray-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37a1.724 1.724 0 002.572-1.065z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
</div>
<h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2 text-center">Quality Control</h3>
<p class="text-gray-600 dark:text-gray-400 text-center">
Implementing rigorous quality assurance protocols to ensure every product meets global standards.
</p>
</div>
</div>
</div>
<div class="relative z-10 pt-8 text-center">
<a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-gray-600 hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 dark:bg-gray-500 dark:hover:bg-gray-600 dark:focus:ring-gray-400 transition-colors duration-300 transform hover:-translate-y-0.5 hover:scale-105">
Learn More
<svg class="ml-3 -mr-1 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</a>
</div>
</div>
</div>Composants associés
Composant d’affichage du contenu
Un composant simple d’affichage de contenu réactif pour les interfaces de médias sociaux, conçu avec les principes de conception matérielle et une palette de couleurs triadique.
Composants d’affichage du contenu
Un portfolio de conception 3D présentant des travaux ou des produits avec une palette de couleurs en niveaux de gris et un design réactif, prenant en charge le mode sombre.
Composant d’affichage du contenu
Un composant d’affichage de contenu réactif qui intègre des micro-interactions avec des animations attrayantes axées sur les actions de l’utilisateur. Il inclut la prise en charge du mode sombre et des espaces réservés pour les images et les avatars.