pasta

by salvator

This tailwind example is contributed by Baraka Salvator, on 05-Jun-2025. Component is made with Tailwind CSS v3. It is responsive.

Button Hero Navbar

Author Baraka Salvator

180

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pasta Paradiso | Premium Pasta Experience</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        'primary-black': '#121212',
                        'secondary-black': '#1e1e1e',
                        'accent-black': '#2a2a2a',
                        'pure-white': '#ffffff',
                        'off-white': '#f5f5f5',
                        'gold-accent': '#ffd700',
                        'pasta-orange': '#ff8c42',
                    },
                    animation: {
                        'float': 'float 8s ease-in-out infinite',
                        'float-pasta': 'float-pasta 15s linear infinite',
                        'micro-pop': 'micro-pop 0.5s ease-out',
                    },
                    keyframes: {
                        float: {
                            '0%, 100%': { transform: 'translateY(0) rotateX(5deg) rotateY(-5deg)' },
                            '50%': { transform: 'translateY(-20px) rotateX(3deg) rotateY(3deg)' },
                        },
                        'float-pasta': {
                            '0%': { transform: 'translateY(0) rotate(0deg)' },
                            '100%': { transform: 'translateY(-100vh) rotate(360deg)' },
                        },
                        'micro-pop': {
                            '0%': { transform: 'scale(0)', opacity: '1' },
                            '100%': { transform: 'scale(10)', opacity: '0' },
                        },
                    },
                    backdropBlur: {
                        xs: '2px',
                        sm: '5px',
                        md: '12px',
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .text-gradient {
                @apply bg-gradient-to-r from-gold-accent to-pasta-orange bg-clip-text text-transparent;
            }
            .bg-glass {
                @apply bg-opacity-85 backdrop-blur-md;
            }
            .transition-slow {
                transition: all 0.6s ease;
            }
        }
    </style>
</head>
<body class="bg-primary-black text-pure-white overflow-x-hidden" id="page-body">
    
    <div id="particles-js" class="fixed w-full h-full z-[-1]"></div>

<nav class="navbar fixed top-0 w-full flex justify-between items-center py-6 px-[5%] bg-primary-black/85 bg-glass border-b border-white/10 shadow-2xl z-[1000]">
        <div class="logo text-3xl font-bold text-gradient flex items-center">
            <i class="fas fa-pasta mr-2 text-3xl"></i>
            Pasta Paradiso
        </div>
        
        <div class="nav-links hidden md:flex gap-8">
            <a href="#" class="text-off-white font-medium text-[0.95rem] tracking-wider relative py-2 transition-slow hover:text-white after:content-[''] after:absolute after:bottom-0 after:left-0 after:w-0 after:h-0.5 after:bg-gradient-to-r after:from-gold-accent after:to-pasta-orange after:transition-slow hover:after:w-full">Discover</a>
            <a href="#" class="text-off-white font-medium text-[0.95rem] tracking-wider relative py-2 transition-slow hover:text-white after:content-[''] after:absolute after:bottom-0 after:left-0 after:w-0 after:h-0.5 after:bg-gradient-to-r after:from-gold-accent after:to-pasta-orange after:transition-slow hover:after:w-full">Menu</a>
            <a href="#" class="text-off-white font-medium text-[0.95rem] tracking-wider relative py-2 transition-slow hover:text-white after:content-[''] after:absolute after:bottom-0 after:left-0 after:w-0 after:h-0.5 after:bg-gradient-to-r after:from-gold-accent after:to-pasta-orange after:transition-slow hover:after:w-full">Chefs</a>
            <a href="#" class="text-off-white font-medium text-[0.95rem] tracking-wider relative py-2 transition-slow hover:text-white after:content-[''] after:absolute after:bottom-0 after:left-0 after:w-0 after:h-0.5 after:bg-gradient-to-r after:from-gold-accent after:to-pasta-orange after:transition-slow hover:after:w-full">Experience</a>
        </div>
        
        <div class="nav-actions flex gap-6 items-center">
            <div class="search-bar relative">
                <input type="text" class="bg-secondary-black border border-white/10 rounded-full py-2 px-4 pl-10 text-white text-sm w-[180px] transition-slow focus:w-[220px] focus:border-pasta-orange/40 focus:ring-1 focus:ring-pasta-orange/10" placeholder="Search pasta...">
                <i class="fas fa-search absolute left-3 top-1/2 -translate-y-1/2 text-white/60 text-sm"></i>
            </div>
            <div class="cart-icon relative text-off-white text-xl cursor-pointer transition-slow hover:text-white">
                <i class="fas fa-shopping-bag"></i>
                <span class="cart-count absolute -top-2 -right-2 bg-pasta-orange text-primary-black rounded-full w-[18px] h-[18px] flex items-center justify-center text-xs font-bold">3</span>
            </div>
        </div>
    </nav>

<section class="hero min-h-screen flex items-center px-[10%] relative overflow-hidden pt-20">
        <div class="hero-content w-full md:w-1/2 z-[2]">
            <h1 class="hero-title text-5xl md:text-7xl lg:text-8xl font-extrabold leading-tight mb-6 bg-gradient-to-r from-white to-off-white bg-clip-text text-transparent drop-shadow-lg">
                Artisanal Pasta<br>Crafted with Passion
            </h1>
            <p class="hero-subtitle text-xl leading-relaxed text-white/80 mb-10 max-w-[80%] mx-auto md:mx-0">
                Experience the perfect harmony of traditional Italian craftsmanship and innovative culinary techniques in every bite of our premium pasta selection.
            </p>
            <div class="cta-buttons flex gap-6 justify-center md:justify-start">
                <button class="btn btn-primary py-3 px-8 rounded-full font-semibold tracking-wider cursor-pointer transition-slow relative overflow-hidden border-none text-sm md:text-base flex items-center justify-center bg-gradient-to-r from-pasta-orange to-[#ff6b00] text-white shadow-lg hover:-translate-y-1 hover:shadow-xl before:content-[''] before:absolute before:top-0 before:-left-full before:w-full before:h-full before:bg-gradient-to-r before:from-transparent before:via-white/20 before:to-transparent before:transition-slow hover:before:left-full">
                    Order Now
                </button>
                <button class="btn btn-secondary py-3 px-8 rounded-full font-semibold tracking-wider cursor-pointer transition-slow relative overflow-hidden border border-white/20 bg-transparent backdrop-blur-sm text-white hover:bg-white/5 hover:border-white/30">
                    Explore Menu
                </button>
            </div>
        </div>
        
        <div class="hero-image absolute right-[5%] w-[45%] h-[80%] bg-[url('https://images.unsplash.com/photo-1555949258-eb67b1ef0ceb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80')] bg-cover bg-center rounded-2xl shadow-2xl animate-float transform-style-preserve-3d z-[1] hidden md:block before:content-[''] before:absolute before:inset-0 before:bg-gradient-to-r before:from-primary-black/70 before:to-pasta-orange/20 before:rounded-2xl after:content-[''] after:absolute after:-bottom-12 after:left-1/2 after:-translate-x-1/2 after:w-4/5 after:h-8 after:bg-radial after:from-black/50 after:to-transparent after:blur-sm after:z-[-1]"></div>
        
        
        <img src="https://cdn-icons-png.flaticon.com/512/5787/5787094.png" class="floating-pasta absolute top-1/5 left-[5%] w-20 opacity-70 z-0 filter drop-shadow-lg animate-float-pasta hidden md:block">
        <img src="https://cdn-icons-png.flaticon.com/512/5787/5787109.png" class="floating-pasta absolute top-3/5 left-[15%] w-16 opacity-70 z-0 filter drop-shadow-lg animate-float-pasta animate-delay-[-5s] animate-duration-[20s] hidden md:block">
        <img src="https://cdn-icons-png.flaticon.com/512/5787/5787102.png" class="floating-pasta absolute top-1/3 right-[10%] w-24 opacity-70 z-0 filter drop-shadow-lg animate-float-pasta animate-delay-[-8s] animate-duration-[25s] hidden md:block">
        
        
        <div class="pasta-selector absolute bottom-[10%] left-1/2 -translate-x-1/2 flex gap-6 z-[10] flex-wrap justify-center">
            <div class="pasta-type w-20 h-20 rounded-full bg-secondary-black flex items-center justify-center cursor-pointer transition-slow border-2 border-transparent shadow-lg hover:-translate-y-2 hover:scale-110 hover:shadow-xl hover:border-pasta-orange relative overflow-hidden group">
                <img src="https://cdn-icons-png.flaticon.com/512/5787/5787109.png" class="w-3/5 h-3/5 object-contain filter brightness-0 invert-80 transition-slow group-hover:brightness-0 group-hover:invert">
                <span class="absolute -bottom-6 left-1/2 -translate-x-1/2 text-xs font-semibold text-white opacity-0 transition-slow group-hover:opacity-100 whitespace-nowrap">Spaghetti</span>
            </div>
            <div class="pasta-type w-20 h-20 rounded-full bg-secondary-black flex items-center justify-center cursor-pointer transition-slow border-2 border-transparent shadow-lg hover:-translate-y-2 hover:scale-110 hover:shadow-xl hover:border-pasta-orange relative overflow-hidden group">
                <img src="https://cdn-icons-png.flaticon.com/512/5787/5787102.png" class="w-3/5 h-3/5 object-contain filter brightness-0 invert-80 transition-slow group-hover:brightness-0 group-hover:invert">
                <span class="absolute -bottom-6 left-1/2 -translate-x-1/2 text-xs font-semibold text-white opacity-0 transition-slow group-hover:opacity-100 whitespace-nowrap">Penne</span>
            </div>
            <div class="pasta-type w-20 h-20 rounded-full bg-gradient-to-br from-secondary-black to-accent-black flex items-center justify-center cursor-pointer transition-slow border-2 border-gold-accent shadow-lg hover:-translate-y-2 hover:scale-110 hover:shadow-xl relative overflow-hidden group active">
                <img src="https://cdn-icons-png.flaticon.com/512/5787/5787094.png" class="w-3/5 h-3/5 object-contain filter brightness-0 invert transition-slow">
                <span class="absolute -bottom-6 left-1/2 -translate-x-1/2 text-xs font-semibold text-white opacity-100 transition-slow whitespace-nowrap">Fusilli</span>
            </div>
            <div class="pasta-type w-20 h-20 rounded-full bg-secondary-black flex items-center justify-center cursor-pointer transition-slow border-2 border-transparent shadow-lg hover:-translate-y-2 hover:scale-110 hover:shadow-xl hover:border-pasta-orange relative overflow-hidden group">
                <img src="https://cdn-icons-png.flaticon.com/512/5787/5787114.png" class="w-3/5 h-3/5 object-contain filter brightness-0 invert-80 transition-slow group-hover:brightness-0 group-hover:invert">
                <span class="absolute -bottom-6 left-1/2 -translate-x-1/2 text-xs font-semibold text-white opacity-0 transition-slow group-hover:opacity-100 whitespace-nowrap">Farfalle</span>
            </div>
            <div class="pasta-type w-20 h-20 rounded-full bg-secondary-black flex items-center justify-center cursor-pointer transition-slow border-2 border-transparent shadow-lg hover:-translate-y-2 hover:scale-110 hover:shadow-xl hover:border-pasta-orange relative overflow-hidden group">
                <img src="https://cdn-icons-png.flaticon.com/512/5787/5787105.png" class="w-3/5 h-3/5 object-contain filter brightness-0 invert-80 transition-slow group-hover:brightness-0 group-hover:invert">
                <span class="absolute -bottom-6 left-1/2 -translate-x-1/2 text-xs font-semibold text-white opacity-0 transition-slow group-hover:opacity-100 whitespace-nowrap">Rigatoni</span>
            </div>
        </div>
    </section>

// Micro-interactions
            document.body.addEventListener('click', function(e) {
                const micro = document.createElement('div');
                micro.className = 'micro-interaction fixed w-2 h-2 bg-gold-accent rounded-full z-[9999] scale-0 animate-micro-pop';
                micro.style.left = e.clientX + 'px';
                micro.style.top = e.clientY + 'px';
                document.body.appendChild(micro);
                
                setTimeout(() => {
                    micro.remove();
                }, 500);
            });

// Pasta selector interaction
            const pastaTypes = document.querySelectorAll('.pasta-type');
            pastaTypes.forEach(type => {
                type.addEventListener('click', function() {
                    pastaTypes.forEach(t => t.classList.remove('active', 'bg-gradient-to-br', 'from-secondary-black', 'to-accent-black', 'border-gold-accent'));
                    this.classList.add('active', 'bg-gradient-to-br', 'from-secondary-black', 'to-accent-black', 'border-gold-accent');
                    this.querySelector('img').classList.add('brightness-0', 'invert');
                    this.querySelector('span').classList.add('opacity-100');
                });
            });
        });
    </script>
</body>
</html>

Related Examples

Plug and Play Button - Animated gradient background
Know errors: You may need to remove animate-spin for your usecase, depending on framework rendering. For SvelteKit, animate-spin is NOT needed. But the [animation:spin_4s]... is always necessary for a smooth effect. Check out my profile to join my community online or add me on LinkedIn.

Author:
Coastal UI

7 months ago

1.5k
Dark mode toggle button
Switch to dark mode without any hassle with this simple JavaScript hack. Sun night button

Author:
Nishant Trivedi

1 year ago

19.1k
Creative Hero Section

Author:
Ijila Itunu

1 month ago

469
Modern SAAS Hero Section
A 2-column responsive hero section for modern SAAS APP

Author:
Emdadul Islam

1 year ago

3.7k
Hero

Author:
ABDO-SY

4 months ago

1k
Tailwind Sidebar Layout

Author:
Oliver Hansen

2 years ago

58k
hero page
by salvator

Author:
Baraka Salvator

1 month ago

337
Background gradient changing button
Automatic and continuously gradient-changing button. Cyclic color changing button.

Author:
Ingrid Schulz

1 year ago

10.4k
Animated Drawer
Collapsible sidebar navigation that allows users to access additional menu options. It is designed for efficient space utilization and can be easily expanded and collapsed.

Author:
Eamon Carter

1 year ago

25.4k
buttons group
some attractive button group on different varients primary, outlined and link button

Author:
Akram Khan

8 months ago

989
Navbar with Icon on the left, links and call to actions on the right

Author:
Anonymous

11 months ago

2.8k
Hero Section
Home hero section search bar

$$@(\/)(\/)Y$ Author:
$@(\/)(\/)Y

1 year ago

6.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components