Industrial_3D_Content_Display
A simple, responsive content display component for manufacturing/industrial companies, featuring a subtle 3D design using muted colors and dark mode support.
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>Related Components
Content Display Component
A 3D styled content display component showcasing portfolio work or products with a grayscale color scheme and responsive design including dark mode support.
Retro Social Media Post Card
A responsive social media post card component with a retro/vintage 80s/90s aesthetic, using an analogous color scheme (Sky, Teal, Purple) with Fuchsia accents. Features dark mode support and interactive hover effects. Content includes user avatar, username, timestamp, text post, image, and action buttons (like, comment, share). Built with Tailwind CSS.
Property Listing Card - Swiss Pastel
A simple, clean, and responsive property listing card with a Swiss/International typography style and a pastel color scheme, suitable for real estate platforms. Includes dark mode support.