Monospace_Developer_Food_Grid_Layout
Un composant de mise en page de grille simple, sur le thème du monospace, pour les sites Web de restauration, avec un design épuré et une palette de couleurs monochromes avec prise en charge du mode sombre.
HTML Code
<div class="font-['JetBrains_Mono',_monospace] bg-gray-50 dark:bg-gray-900 text-gray-800 dark:text-gray-200 p-4 sm:p-6 lg:p-8 min-h-screen">
<h2 class="text-3xl sm:text-4xl font-bold mb-8 text-center text-gray-900 dark:text-gray-100 uppercase tracking-widest">
<span class="block">/MENU/</span><span class="block text-xl sm:text-2xl mt-2 lowercase text-gray-700 dark:text-gray-300">[select]</span>
</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8 max-w-7xl mx-auto">
<!-- Item 1 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden border border-gray-200 dark:border-gray-700 transition-all duration-300 hover:shadow-xl hover:scale-[1.01] hover:border-blue-400 dark:hover:border-blue-600">
<img class="w-full h-48 object-cover" src="https://picsum.photos/id/1080/400/300" alt="Spicy Noodles">
<div class="p-4 sm:p-5">
<h3 class="text-xl font-semibold mb-2 text-gray-900 dark:text-gray-100 uppercase tracking-wide">console.log('spicy_noodles');</h3>
<p class="text-sm text-gray-600 dark:text-gray-400 mb-3">A fiery delight, perfect for those who crave a kick. Fresh noodles with chili oil and special sauce.</p>
<div class="flex justify-between items-center">
<span class="text-lg font-bold text-blue-600 dark:text-blue-400">$12.99;</span>
<button class="px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white text-sm uppercase font-bold rounded-md transition duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
add_to_cart
</button>
</div>
</div>
</div>
<!-- Item 2 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden border border-gray-200 dark:border-gray-700 transition-all duration-300 hover:shadow-xl hover:scale-[1.01] hover:border-blue-400 dark:hover:border-blue-600">
<img class="w-full h-48 object-cover" src="https://picsum.photos/id/1060/400/300" alt="Vegetable Curry">
<div class="p-4 sm:p-5">
<h3 class="text-xl font-semibold mb-2 text-gray-900 dark:text-gray-100 uppercase tracking-wide">console.log('veg_curry');</h3>
<p class="text-sm text-gray-600 dark:text-gray-400 mb-3">Hearty and wholesome, packed with fresh garden vegetables in a rich, aromatic sauce.</p>
<div class="flex justify-between items-center">
<span class="text-lg font-bold text-blue-600 dark:text-blue-400">$10.50;</span>
<button class="px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white text-sm uppercase font-bold rounded-md transition duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
add_to_cart
</button>
</div>
</div>
</div>
<!-- Item 3 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden border border-gray-200 dark:border-gray-700 transition-all duration-300 hover:shadow-xl hover:scale-[1.01] hover:border-blue-400 dark:hover:border-blue-600">
<img class="w-full h-48 object-cover" src="https://picsum.photos/id/1/400/300" alt="Chicken Burger">
<div class="p-4 sm:p-5">
<h3 class="text-xl font-semibold mb-2 text-gray-900 dark:text-gray-100 uppercase tracking-wide">console.log('chicken_burger');</h3>
<p class="text-sm text-gray-600 dark:text-gray-400 mb-3">Classic grilled chicken patty with fresh lettuce, tomato, and special burger sauce.</p>
<div class="flex justify-between items-center">
<span class="text-lg font-bold text-blue-600 dark:text-blue-400">$8.75;</span>
<button class="px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white text-sm uppercase font-bold rounded-md transition duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
add_to_cart
</button>
</div>
</div>
</div>
<!-- Item 4 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden border border-gray-200 dark:border-gray-700 transition-all duration-300 hover:shadow-xl hover:scale-[1.01] hover:border-blue-400 dark:hover:border-blue-600">
<img class="w-full h-48 object-cover" src="https://picsum.photos/id/400/400/300" alt="Fresh Salad">
<div class="p-4 sm:p-5">
<h3 class="text-xl font-semibold mb-2 text-gray-900 dark:text-gray-100 uppercase tracking-wide">console.log('fresh_salad');</h3>
<p class="text-sm text-gray-600 dark:text-gray-400 mb-3">Light and refreshing, a mix of seasonal greens, vibrant vegetables, and a tangy dressing.</p>
<div class="flex justify-between items-center">
<span class="text-lg font-bold text-blue-600 dark:text-blue-400">$7.00;</span>
<button class="px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white text-sm uppercase font-bold rounded-md transition duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
add_to_cart
</button>
</div>
</div>
</div>
<!-- Item 5 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden border border-gray-200 dark:border-gray-700 transition-all duration-300 hover:shadow-xl hover:scale-[1.01] hover:border-blue-400 dark:hover:border-blue-600">
<img class="w-full h-48 object-cover" src="https://picsum.photos/id/10/400/300" alt="Pepperoni Pizza">
<div class="p-4 sm:p-5">
<h3 class="text-xl font-semibold mb-2 text-gray-900 dark:text-gray-100 uppercase tracking-wide">console.log('pepperoni_pizza');</h3>
<p class="text-sm text-gray-600 dark:text-gray-400 mb-3">Classic pepperoni, melted cheese, and a crispy crust. A timeless favorite.</p>
<div class="flex justify-between items-center">
<span class="text-lg font-bold text-blue-600 dark:text-blue-400">$15.99;</span>
<button class="px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white text-sm uppercase font-bold rounded-md transition duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
add_to_cart
</button>
</div>
</div>
</div>
<!-- Item 6 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden border border-gray-200 dark:border-gray-700 transition-all duration-300 hover:shadow-xl hover:scale-[1.01] hover:border-blue-400 dark:hover:border-blue-600">
<img class="w-full h-48 object-cover" src="https://picsum.photos/id/141/400/300" alt="Chocolate Cake">
<div class="p-4 sm:p-5">
<h3 class="text-xl font-semibold mb-2 text-gray-900 dark:text-gray-100 uppercase tracking-wide">console.log('chocolate_cake');</h3>
<p class="text-sm text-gray-600 dark:text-gray-400 mb-3">Rich, decadent chocolate cake, a perfect end to any meal or a sweet treat on its own.</p>
<div class="flex justify-between items-center">
<span class="text-lg font-bold text-blue-600 dark:text-blue-400">$6.25;</span>
<button class="px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white text-sm uppercase font-bold rounded-md transition duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
add_to_cart
</button>
</div>
</div>
</div>
</div>
</div>Composants associés
Skeuomorphic_Grid_Layout_Business
Un composant de mise en page de grille complexe et réactif pour les sites Web d’entreprise, doté d’un style de conception skeuomorphe avec des couleurs neutres chaudes et une prise en charge du mode sombre. Les éléments imitent les objets du monde réel avec de la profondeur et des textures subtiles.
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.
Travel_Booking_Grid_Layout_Component
Il s’agit d’un composant de mise en page de grille complexe et réactif pour un site Web de réservation de voyages avec un design d’entreprise/professionnel, une palette de couleurs analogue et une prise en charge du mode sombre. Comprend des cartes de destination, une entrée de recherche et une barre latérale.