Grille agricole ludique
Un composant de mise en page de grille simple, joyeux et réactif pour l’agriculture et les sites Web agricoles, avec des neutres chauds, des éléments arrondis et la prise en charge du mode sombre.
HTML Code
<div class="min-h-screen bg-orange-50 dark:bg-gray-900 py-12 px-4 sm:px-6 lg:px-8 font-sans transition-colors duration-300">
<div class="max-w-7xl mx-auto">
<h2 class="text-4xl font-extrabold text-orange-900 dark:text-orange-100 text-center mb-12 sm:mb-16 leading-tight">
<span class="block">Harvesting Joy, Growing Futures</span>
<span class="block text-2xl font-semibold mt-2 opacity-80">Explore Our Farm Life</span>
</h2>
<div class="grid gap-8 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
<!-- Card 1 -->
<div class="bg-white dark:bg-gray-800 rounded-3xl shadow-lg p-6 flex flex-col items-center text-center transform hover:scale-105 transition-all duration-300 group">
<div class="w-32 h-32 rounded-full overflow-hidden mb-4 border-4 border-orange-200 dark:border-orange-700 shadow-md">
<img src="https://picsum.photos/id/1084/300/300" alt="Farm Animals" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-300">
</div>
<h3 class="text-2xl font-bold text-orange-800 dark:text-orange-200 mb-2">Happy Livestock</h3>
<p class="text-gray-600 dark:text-gray-400 text-base leading-relaxed">Our animals live their best lives, nurtured with care and kindness.</p>
<a href="#" class="mt-4 inline-flex items-center px-5 py-2 border border-transparent text-base font-medium rounded-full shadow-sm text-white bg-orange-500 hover:bg-orange-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500 dark:focus:ring-offset-gray-900 transition-colors duration-200">
Learn More
</a>
</div>
<!-- Card 2 -->
<div class="bg-white dark:bg-gray-800 rounded-3xl shadow-lg p-6 flex flex-col items-center text-center transform hover:scale-105 transition-all duration-300 group">
<div class="w-32 h-32 rounded-full overflow-hidden mb-4 border-4 border-orange-200 dark:border-orange-700 shadow-md">
<img src="https://picsum.photos/id/106/300/300" alt="Fresh Produce" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-300">
</div>
<h3 class="text-2xl font-bold text-orange-800 dark:text-orange-200 mb-2">Bountiful Harvests</h3>
<p class="text-gray-600 dark:text-gray-400 text-base leading-relaxed">From our fields to your table, experience the freshest produce.</p>
<a href="#" class="mt-4 inline-flex items-center px-5 py-2 border border-transparent text-base font-medium rounded-full shadow-sm text-white bg-orange-500 hover:bg-orange-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500 dark:focus:ring-offset-gray-900 transition-colors duration-200">
See Products
</a>
</div>
<!-- Card 3 -->
<div class="bg-white dark:bg-gray-800 rounded-3xl shadow-lg p-6 flex flex-col items-center text-center transform hover:scale-105 transition-all duration-300 group">
<div class="w-32 h-32 rounded-full overflow-hidden mb-4 border-4 border-orange-200 dark:border-orange-700 shadow-md">
<img src="https://picsum.photos/id/111/300/300" alt="Sustainable Farming" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-300">
</div>
<h3 class="text-2xl font-bold text-orange-800 dark:text-orange-200 mb-2">Sustainable Practices</h3>
<p class="text-gray-600 dark:text-gray-400 text-base leading-relaxed">Committed to eco-friendly methods for a healthier planet.</p>
<a href="#" class="mt-4 inline-flex items-center px-5 py-2 border border-transparent text-base font-medium rounded-full shadow-sm text-white bg-orange-500 hover:bg-orange-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500 dark:focus:ring-offset-gray-900 transition-colors duration-200">
Our Mission
</a>
</div>
<!-- Card 4 -->
<div class="bg-white dark:bg-gray-800 rounded-3xl shadow-lg p-6 flex flex-col items-center text-center transform hover:scale-105 transition-all duration-300 group">
<div class="w-32 h-32 rounded-full overflow-hidden mb-4 border-4 border-orange-200 dark:border-orange-700 shadow-md">
<img src="https://randomuser.me/api/portraits/men/93.jpg" alt="Farmer John" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-300">
</div>
<h3 class="text-2xl font-bold text-orange-800 dark:text-orange-200 mb-2">Meet Our Farmers</h3>
<p class="text-gray-600 dark:text-gray-400 text-base leading-relaxed">Passionate individuals dedicated to bringing you the best.</p>
<a href="#" class="mt-4 inline-flex items-center px-5 py-2 border border-transparent text-base font-medium rounded-full shadow-sm text-white bg-orange-500 hover:bg-orange-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500 dark:focus:ring-offset-gray-900 transition-colors duration-200">
The Team
</a>
</div>
</div>
</div>
</div>Composants associés
Composant de mise en page de grille
Un composant de mise en page de grille réactif pour les interfaces de médias sociaux conçu avec un style skeuomorphe, avec des couleurs triadiques, plusieurs éléments interactifs et la prise en charge des thèmes sombres.
Disposition de la grille de jeu Art déco
Une grille de jeu réactive inspirée de l’Art déco avec des motifs géométriques, des couleurs en niveaux de gris et des éléments interactifs. Conçu pour les sites Web et les interfaces de jeux, avec prise en charge du mode sombre.
Composant 7 de la disposition de la grille
Un composant de mise en page de grille réactif conçu dans le style Brutalism avec Tailwind CSS, avec la prise en charge des thèmes sombres et des images de remplacement aléatoires.