Food App Web design

This tailwind example is contributed by Aitrik Saha, on 03-Mar-2025. Component is made with Tailwind v3.4. It is responsive.

Card Banner Hero

Author Aitrik Saha

Tailwind v3.4 2.5k 8

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">

<div class="hidden lg:flex gap-20 justify-between items-center">
            <ul class="flex gap-8">
                <li class="text-md font-semibold text-white cursor-pointer">Home</li>
                <li class="text-md font-semibold text-white cursor-pointer">About</li>
                <li class="text-md font-semibold text-white cursor-pointer">Menu</li>
                <li class="text-md font-semibold text-white cursor-pointer">Contact</li>
            </ul>
            <form class="flex items-center">
                <input type="text" placeholder="Search"
                    class="shadow-lg py-1 px-5 border border-gray-300 rounded-l-lg text-white" />
                <button class="bg-red-500 text-white px-3 py-1.5 rounded-r-lg">
                    <i class="fa-solid fa-magnifying-glass"></i>
                </button>
            </form>
        </div>
        <div class="hidden lg:flex flex gap-5">
            <button
                class="bg-red-500 text-white hover:bg-red-600 px-5 py-2 font-semibold rounded-lg cursor-pointer">Login</button>
            <button
                class="border border-white text-white px-5 py-2 font-semibold rounded-lg cursor-pointer hover:opacity-80">SignUp</button>
        </div>
    </nav>

<div class="relative z-10 text-white max-w-2xl">
            <h1 class="text-4xl md:text-6xl font-bold leading-tight">
                Welcome to Our Platform
            </h1>
            <p class="mt-4 text-lg md:text-xl">
                Discover amazing features and join us today.
            </p>
            <div class="mt-6">
                <a href="#"
                    class="group px-6 py-3 bg-red-500 hover:bg-red-600 rounded-lg text-lg font-semibold transition inline-flex items-center">
                    Get Started
                    <i class="fa-solid fa-arrow-right ml-2 transition-transform group-hover:translate-x-1"></i>
                </a>
            </div>

</div>
    </section>

<section class="px-8 mt-8">
       
        <div class="w-full flex justify-between items-center">
            <h1 class="text-start font-semibold text-xl md:text-2xl">Popular Dishes</h1>
            <a href="#" class="px-6 py-3 text-red-500  font-semibold rounded-lg hover:text-red-600 transition">All</a>
        </div>
    
        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6 mt-5">
            
            <div class="rounded-lg overflow-hidden border border-gray-300 shadow-lg flex flex-col bg-white">
                <div class="relative">
                    <img class="w-full h-56 object-cover"
                        src="https://images.pexels.com/photos/61180/pexels-photo-61180.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
                        alt="Simplest Salad Recipe">
                    <div class="absolute inset-0 bg-black opacity-25 hover:opacity-0 transition"></div>
                    <div class="text-xs absolute top-2 right-2 bg-red-500 px-3 py-1 text-white rounded-lg">#1</div>
                </div>
                <div class="px-6 py-4 flex-grow">
                    <h2 class="font-semibold text-lg hover:text-red-600 transition">Simplest Salad Recipe</h2>
                    <p class="text-gray-500 text-sm mt-1">A fresh and healthy salad recipe that's easy to prepare.</p>
                </div>
                <div class="px-6 py-3 flex justify-between bg-gray-100">
                    <button class="px-4 py-2 text-red-500 border border-red-500 rounded-lg hover:bg-red-500 hover:text-white transition">View</button>
                    <button class="px-4 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 transition">Add <i class="fa-solid fa-cart-plus"></i></button>
                </div>
            </div>
    
            
            <div class="rounded-lg overflow-hidden shadow-lg border border-gray-300 flex flex-col bg-white">
                <div class="relative">
                    <img class="w-full h-56 object-cover"
                        src="https://images.pexels.com/photos/1600727/pexels-photo-1600727.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
                        alt="FastFood Ideas">
                    <div class="absolute inset-0 bg-black opacity-25 hover:opacity-0 transition"></div>
                    <div class="text-xs absolute top-2 right-2 bg-red-500 px-3 py-1 text-white rounded-lg">#2</div>
                </div>
                <div class="px-6 py-4 flex-grow">
                    <h2 class="font-semibold text-lg hover:text-red-600 transition">Best FastFood Ideas</h2>
                    <p class="text-gray-500 text-sm mt-1">Quick and delicious fast food ideas to try at home.</p>
                </div>
                <div class="px-6 py-3 flex justify-between bg-gray-100">
                    <button class="px-4 py-2 text-red-500 border border-red-500 rounded-lg hover:bg-red-500 hover:text-white transition">View</button>
                    <button class="px-4 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 transition">Add <i class="fa-solid fa-cart-plus"></i></button>
                </div>
            </div>
    
            
            <div class="rounded-lg overflow-hidden shadow-lg border border-gray-300 flex flex-col bg-white">
                <div class="relative">
                    <img class="w-full h-56 object-cover"
                        src="https://images.pexels.com/photos/6086/food-salad-healthy-vegetables.jpg?auto=compress&cs=tinysrgb&dpr=1&w=500"
                        alt="Why to eat salad?">
                    <div class="absolute inset-0 bg-black opacity-25 hover:opacity-0 transition"></div>
                    <div class="text-xs absolute top-2 right-2 bg-red-500 px-3 py-1 text-white rounded-lg">#3</div>
                </div>
                <div class="px-6 py-4 flex-grow">
                    <h2 class="font-semibold text-lg hover:text-red-600 transition">Why to eat salad?</h2>
                    <p class="text-gray-500 text-sm mt-1">The benefits of including fresh salads in your daily diet.</p>
                </div>
                <div class="px-6 py-3 flex justify-between bg-gray-100">
                    <button class="px-4 py-2 text-red-500 border border-red-500 rounded-lg hover:bg-red-500 hover:text-white transition">View</button>
                    <button class="px-4 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 transition">Add <i class="fa-solid fa-cart-plus"></i></button>
                </div>
            </div>
        </div>
    
    
    </section>
    
</body>

</html>

Related Examples

Welcome banner for developers portfolio
A hero section welcoming visitors to a portfolio or website. It features a large, visually appealing title and an image.

Vikram Choudhary

2 years ago

11.8k
cards
cards slices

Anonymous

2 years ago

7.6k
Clone of LinkedIn Questionnaire Card
Clone of LinkedIn Questionnaire Card

$$@(\/)(\/)¥$ $@(\/)(\/)¥

2 years ago

4.1k
Thankyou Card

$$@(\/)(\/)¥$ $@(\/)(\/)¥

2 years ago

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

Emdadul Islam

2 years ago

5.9k
Hero section with large image
Hero section with large image

Emdadul Islam

2 years ago

5.2k
Premium SAAS HERO Section
A hero section for your SAAS application

Emdadul Islam

2 years ago

3.4k
Modern SAAS HERO Section
A hero section for your SAAS application

Emdadul Islam

2 years ago

3.4k
Grid
Grid Grid-Cards

sardorazimov2901

2 years ago

2.4k
Responsive Hero Section
Key features of this hero section: 1. Responsive layout: Uses a column layout on mobile and switches to a row layout on medium screens and larger. 2. Left side: - Company name as a large heading - Brief description - "Learn More" button 3. Right side: - "Why Choose Us?" section with bullet points - Two call-to-action buttons: "Get Started" and "Contact Sales" 4. Styling: - Uses Tailwind's utility classes for responsive design, colors, spacing, and typography - Incorporates a shadow and rounded corners for the right-side content box - Includes hover effects on buttons for better interactivity This hero section will be fully responsive: - On mobile devices, it will stack vertically with the company info on top and the details below. - On larger screens, it will display in a two-column layout. The use of Tailwind CSS classes ensures that the design is consistent and easily adjustable. You can further customize the colors, fonts, and spacing to match your brand's specific design guidelines. Would you like me to explain any part of this code or make any adjustments?

zobaidul kaziex

2 years ago

3k
Responsive Hero Section
Key features of this hero section: 1. Responsive layout: Uses a column layout on mobile and switches to a row layout on medium screens and larger. 2. Left side: - Company name as a large heading - Brief description - "Learn More" button 3. Right side: - "Why Choose Us?" section with bullet points - Two call-to-action buttons: "Get Started" and "Contact Sales" 4. Styling: - Uses Tailwind's utility classes for responsive design, colors, spacing, and typography - Incorporates a shadow and rounded corners for the right-side content box - Includes hover effects on buttons for better interactivity This hero section will be fully responsive: - On mobile devices, it will stack vertically with the company info on top and the details below. - On larger screens, it will display in a two-column layout. The use of Tailwind CSS classes ensures that the design is consistent and easily adjustable. You can further customize the colors, fonts, and spacing to match your brand's specific design guidelines. Would you like me to explain any part of this code or make any adjustments?

Vernon Francis

2 years ago

2.5k
Fully Animated Timeline Card
It is at a 20s interval for testing purposes. Go to the <style> and change the .content-scroll class from 20s to 35s for a production ready slower animation.

Coastal UI

1 year ago

2.8k