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
Disposition minimaliste de la grille bleu océan
Un composant de mise en page de grille minimaliste et réactif pour les marques de mode/beauté, avec des tons bleu océan et la prise en charge du mode sombre.
Composant de mise en page de grille
Un composant de mise en page de grille réactif suivant les principes de conception matérielle, avec des effets d’ombre et la prise en charge du mode sombre, à l’aide de Tailwind CSS.
Disposition simple de la grille brutaliste
Un composant de mise en page de grille brutaliste simple et réactif avec prise en charge des tons de terre et du mode sombre, adapté aux sites Web d’entreprise.