Published on

6 Easy Ways To Make A Food Delevery Hero Section With Tailwind CSS Without Even Thinking About It

Tags
NavigationsPages
Food delevery hero section

As a FrontEnd technology blogger, I'm always looking for ways to make my UI components look great without spending too much time on them. That's why I love Tailwind CSS. With Tailwind CSS, you can create beautiful UI components quickly and easily. In this article, I'll show you how to create a Food Delivery Hero Section UI component with Tailwind CSS in just a few easy steps.

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that allows you to create custom designs quickly and easily. With Tailwind CSS, you can create complex UI components without writing any custom CSS. Instead, you use pre-defined classes to style your HTML elements.

The description of Food Delivery Hero Section UI component

A Food Delivery Hero Section is a UI component that showcases a food delivery service's key features, such as fast delivery, quality food, and easy ordering. It usually includes a hero image, a call-to-action button, and some text describing the service.

Why use Tailwind CSS to create a Food Delivery Hero Section UI component?

Tailwind CSS makes it easy to create a Food Delivery Hero Section UI component because it provides pre-defined classes for common UI elements. You don't have to write any custom CSS, which saves you time and makes your code more maintainable. Additionally, Tailwind CSS is highly customizable, so you can easily tweak the design to fit your needs.

The preview of Food Delivery Hero Section UI component

To create a Food Delivery Hero Section UI component, we'll use Tailwind CSS's pre-defined classes for the hero image, text, and call-to-action button. Here's what the final product will look like:

Free download of the Food delevery hero section's source code

The source code of Food Delivery Hero Section UI component

To create the Food Delivery Hero Section UI component, we'll use HTML and Tailwind CSS classes. Here's the source code:

<div class="relative w-full">
    <nav class="fixed z-10 w-full bg-white md:absolute md:bg-transparent">
        <div class="container m-auto px-2 md:px-12 lg:px-7">
            <div class="flex flex-wrap items-center justify-between py-3 gap-6 md:py-4 md:gap-0">
                <div class="w-full px-6 flex justify-between lg:w-max md:px-0">
                    <a href="https://tailus.io/blocks/hero-section" aria-label="logo" class="flex space-x-2 items-center">
                        <img src="https://tailus.io/sources/blocks/food-delivery/preview/images/icon.png" class="w-12" alt="tailus logo" width="144" height="133">
                        <span class="text-2xl font-bold text-yellow-900">Tailus <span class="text-yellow-700">Feedus</span></span>
                    </a>

                    <button aria-label="humburger" id="hamburger" class="relative w-10 h-10 -mr-2 lg:hidden">
                        <div aria-hidden="true" id="line" class="inset-0 w-6 h-0.5 m-auto rounded bg-yellow-900 transtion duration-300"></div>
                        <div aria-hidden="true" id="line2" class="inset-0 w-6 h-0.5 mt-2 m-auto rounded bg-yellow-900 transtion duration-300"></div>
                    </button>
                </div>

                <div class="hidden w-full lg:flex flex-wrap justify-end items-center space-y-6 p-6 rounded-xl bg-white md:space-y-0 md:p-0 md:flex-nowrap md:bg-transparent lg:w-7/12">
                    <div class="text-gray-600 lg:pr-4">
                        <ul class="space-y-6 tracking-wide font-medium text-sm md:flex md:space-y-0">
                            <li>
                                <a href="#" class="block md:px-4 transition hover:text-yellow-700">
<span>I've a restaurant</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="block md:px-4 transition hover:text-yellow-700">
<span>Wishlist</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="block md:px-4 transition hover:text-yellow-700">
<span>Cart</span>
                                </a>
                            </li>
                        </ul>
                    </div>

                    <div class="w-full space-y-2 border-yellow-200 lg:space-y-0 md:w-max lg:border-l">
                        <button type="button" title="Start buying" class="w-full py-3 px-6 text-center rounded-full transition active:bg-yellow-200 focus:bg-yellow-100 sm:w-max">
                            <span class="block text-yellow-800 font-semibold text-sm">
                                Sign up
                            </span>
                        </button>
                        <button type="button" title="Start buying" class="w-full py-3 px-6 text-center rounded-full transition bg-yellow-300 hover:bg-yellow-100 active:bg-yellow-400 focus:bg-yellow-300 sm:w-max">
                            <span class="block text-yellow-900 font-semibold text-sm">
                                Login
                            </span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </nav>
    <div class="relative bg-yellow-50">
        <div class="container m-auto px-6 pt-32 md:px-12 lg:pt-[4.8rem] lg:px-7">
            <div class="flex items-center flex-wrap px-2 md:px-0">
                <div class="relative lg:w-6/12 lg:py-24 xl:py-32">
                    <h1 class="font-bold text-4xl text-yellow-900 md:text-5xl lg:w-10/12">Your favorite dishes, right at your door</h1>
                    <form action="" class="w-full mt-12">
                        <div class="relative flex p-1 rounded-full bg-white border border-yellow-200 shadow-md md:p-2">
                            <select class="hidden p-3 rounded-full bg-transparent md:block md:p-4" name="domain" id="domain">
                                <option value="design">FastFood</option>
                                <option value="development">Restaurant</option>
                                <option value="marketing">Marketing</option>
                            </select>
                            <input placeholder="Your favorite food" class="w-full p-4 rounded-full" type="text">
                            <button type="button" title="Start buying" class="ml-auto py-3 px-6 rounded-full text-center transition bg-gradient-to-b from-yellow-200 to-yellow-300 hover:to-red-300 active:from-yellow-400 focus:from-red-400 md:px-12">
                                <span class="hidden text-yellow-900 font-semibold md:block">
Search
                                </span>
                                <svg xmlns="http://www.w3.org/2000/svg" class="w-5 mx-auto text-yellow-900 md:hidden" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
                                </svg>
                            </button>
                        </div>
                    </form>
                    <p class="mt-8 text-gray-700 lg:w-10/12">Sit amet consectetur adipisicing elit. <a href="#" class="text-yellow-700">connection</a> tenetur nihil quaerat suscipit, sunt dignissimos.</p>
                </div>
                <div class="ml-auto -mb-24 lg:-mb-56 lg:w-6/12">
                    <img src="https://tailus.io/sources/blocks/food-delivery/preview/images/food.webp" class="relative" alt="food illustration" loading="lazy" width="4500" height="4500">
                </div>
            </div>
        </div>
    </div>
</div>

How to create a Food Delivery Hero Section with Tailwind CSS?

Now that we've covered the basics, let's dive into creating a Food Delivery Hero Section UI component with Tailwind CSS. Here are six easy steps to follow:

Step 1: Set up your HTML structure

First, we'll create the HTML structure for our Food Delivery Hero Section. We'll use a div element with a class of hero to contain our hero image and text. Inside the hero div, we'll create a div element with a class of hero-content to contain our text.

<div class="hero">
  <img src="hero-image.jpg" alt="Hero Image" class="hero-image">
  <div class="hero-content">
    <h1 class="hero-title">Fast Food Delivery</h1>
    <p class="hero-text">Get your favorite food delivered to your doorstep in no time.</p>
    <button class="hero-button">Order Now</button>
  </div>
</div>

Step 2: Add Tailwind CSS to your project

Next, we'll add Tailwind CSS to our project. You can do this by downloading the CSS file from the Tailwind CSS website or by using a CDN. Once you've added Tailwind CSS to your project, you can start using its classes to style your HTML elements.

Step 3: Style the hero image

To style the hero image, we'll use Tailwind CSS's object-cover and h-full classes. The object-cover class ensures that the image covers the entire container, while the h-full class sets the height of the container to the full height of the viewport.

<img src="hero-image.jpg" alt="Hero Image" class="hero-image object-cover h-full">

Step 4: Style the hero content

To style the hero content, we'll use Tailwind CSS's flex and flex-col classes to create a flexbox container with a column layout. We'll also use the justify-center and items-center classes to center the content vertically and horizontally.

<div class="hero-content flex flex-col justify-center items-center">
  <h1 class="hero-title text-5xl font-bold mb-4">Fast Food Delivery</h1>
  <p class="hero-text text-xl mb-8">Get your favorite food delivered to your doorstep in no time.</p>
  <button class="hero-button bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded-full">Order Now</button>
</div>

Step 5: Style the hero title and text

To style the hero title and text, we'll use Tailwind CSS's text-5xl, text-xl, and mb-4 classes to set the font size and margin bottom of the title, and the font size of the text.

<h1 class="hero-title text-5xl font-bold mb-4">Fast Food Delivery</h1>
<p class="hero-text text-xl mb-8">Get your favorite food delivered to your doorstep in no time.</p>

Step 6: Style the call-to-action button

To style the call-to-action button, we'll use Tailwind CSS's bg-red-500, hover:bg-red-600, text-white, font-bold, py-2, px-4, and rounded-full classes to set the background color, hover color, text color, font weight, padding, and border radius of the button.

<button class="hero-button bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded-full">Order Now</button>

Conclusion

In this article, we've learned how to create a Food Delivery Hero Section UI component with Tailwind CSS. We've covered the basics of Tailwind CSS, the description of the Food Delivery Hero Section UI component, why we should use Tailwind CSS to create it, and the step-by-step process of creating it. With these six easy steps, you can create a beautiful and functional Food Delivery Hero Section UI component in no time.