Industrial_Monochrome_Blog_Card
Une carte de consommation de blog/contenu complexe et réactive à l’esthétique industrielle, utilisant une palette de couleurs noir/blanc avec un seul accent vif. Comprend des éléments exposés et un design utilitaire, avec prise en charge du mode sombre.
HTML Code
<div class="font-sans bg-gray-100 dark:bg-gray-900 min-h-screen p-4 sm:p-6 lg:p-8 flex items-center justify-center">
<div class="max-w-4xl w-full bg-white dark:bg-gray-800 shadow-xl rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700
flex flex-col md:flex-row">
<!-- Image Section -->
<div class="md:w-1/2 overflow-hidden flex-shrink-0">
<img class="w-full h-64 sm:h-72 md:h-full object-cover object-center transform hover:scale-105 transition duration-500 ease-in-out"
src="https://picsum.photos/seed/industrial-blog/800/600" alt="Industrial Blog Post Image">
</div>
<!-- Content Section -->
<div class="md:w-1/2 p-6 sm:p-8 lg:p-10 flex flex-col justify-between">
<div>
<!-- Category & Date -->
<div class="mb-3 flex items-center space-x-3 text-sm">
<span class="px-3 py-1 rounded-full text-white bg-red-600 dark:bg-red-500 font-medium tracking-wide uppercase text-xs">
Design
</span>
<span class="text-gray-600 dark:text-gray-400">• March 15, 2024</span>
</div>
<!-- Title -->
<h1 class="text-2xl sm:text-3xl lg:text-4xl font-extrabold text-gray-900 dark:text-white leading-tight mb-4">
The Raw Beauty of Industrial Design Principles
</h1>
<!-- Excerpt -->
<p class="text-gray-700 dark:text-gray-300 text-base sm:text-lg leading-relaxed mb-6">
Explore how utilitarian aesthetics and exposed materials shape the future of modern architecture and product design, embracing honesty in construction.
</p>
<!-- Tags -->
<div class="flex flex-wrap gap-2 mb-6">
<span class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 text-xs px-3 py-1 border border-gray-300 dark:border-gray-600 rounded-lg">#Architecture</span>
<span class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 text-xs px-3 py-1 border border-gray-300 dark:border-gray-600 rounded-lg">#Minimalism</span>
<span class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 text-xs px-3 py-1 border border-gray-300 dark:border-gray-600 rounded-lg">#Materials</span>
</div>
</div>
<!-- Author and Read More -->
<div class="mt-6 pt-6 border-t border-gray-200 dark:border-gray-700 flex flex-col sm:flex-row items-start sm:items-center justify-between">
<div class="flex items-center mb-4 sm:mb-0">
<img class="w-10 h-10 rounded-full object-cover mr-3 border-2 border-red-600 dark:border-red-500"
src="https://randomuser.me/api/portraits/women/68.jpg" alt="Author Avatar">
<div>
<p class="font-semibold text-gray-900 dark:text-white">Jane Doe</p>
<p class="text-sm text-gray-600 dark:text-gray-400">Lead Designer</p>
</div>
</div>
<a href="#" class="inline-flex items-center text-red-600 dark:text-red-500 hover:text-red-800 dark:hover:text-red-300
font-medium transition-colors duration-200 text-base sm:text-lg group">
Read Article
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-2 transform translate-x-0 group-hover:translate-x-1 transition-transform duration-200"
viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</a>
</div>
</div>
</div>
</div>Composants associés
Composant Composants de commerce électronique
Un composant de commerce électronique réactif avec des micro-interactions, une palette de couleurs terre, une complexité modérée et une prise en charge du mode sombre.
Brutalism_Retro_Simple_E-commerce_Agriculture_Product_Card
Une fiche produit simple, de style brutaliste, pour un site Web d’agriculture/élevage en ligne avec une palette de couleurs rétro, avec une image de produit, un titre, un prix et un bouton d’ajout au panier. Conçu avec une prise en charge de la réactivité et du mode sombre.
Industrial_Sunset_Ecommerce_Component
Composant de commerce électronique complexe avec un style de design industriel, une palette de couleurs chaudes de coucher de soleil et une réactivité totale avec prise en charge du mode sombre.