Restaurant Menu Html Css Codepen Free

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes"> <title>Le Petit Gourmet | Artisan Menu</title>  <link href="https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,300;14..32,400;14..32,500;14..32,600;14..32,700&family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400&display=swap" rel="stylesheet"> <style> * margin: 0; padding: 0; box-sizing: border-box;

Key Features

: Responsive multi-column layouts that stack into a single column on mobile. restaurant menu html css codepen

<nav class="flex flex-wrap justify-center gap-4 md:gap-8 mb-16 reveal" role="tablist" aria-label="Menu categories"> <button class="tab-btn active px-2 py-1 text-lg font-medium text-[var(--fg-muted)]" role="tab" aria-selected="true" data-category="starters">Starters</button> <button class="tab-btn px-2 py-1 text-lg font-medium text-[var(--fg-muted)]" role="tab" aria-selected="false" data-category="mains">Mains</button> <button class="tab-btn px-2 py-1 text-lg font-medium text-[var(--fg-muted)]" role="tab" aria-selected="false" data-category="desserts">Desserts</button> <button class="tab-btn px-2 py-1 text-lg font-medium text-[var(--fg-muted)]" role="tab" aria-selected="false" data-category="drinks">Drinks</button> </nav> meta name="viewport" content="width=device-width

.menu-container background: radial-gradient(circle at 10% 20%, rgba(250,245,235,0.6), #fefaf5); Le Petit Gourmet | Artisan Menu&lt

h3 margin-top: 0;

h2 margin-top: 0;