How to create Dashboard using Tailwind CSS

Hello Developers! Are you eager to enhance your web development skills by creating a modern and responsive dashboard? Look no further! In this tutorial, we will guide you through the process of building a stunning and functional dashboard using Tailwind CSS, a popular utility-first CSS framework. This tutorial is designed for both beginners seeking practical experience and experienced developers interested in learning a new framework. By following our step-by-step instructions, you will learn how to create a basic HTML structure and use Tailwind CSS classes to style and customize your dashboard, resulting in a visually appealing and user-friendly design. We will also provide you with the complete source code for this dashboard, allowing you to compare it with your own code for error identification. Let’s dive in and create your own dashboard today!

To begin with, let’s set up your project.

Step 1: Set Up Your Project

First, create a new folder on your computer to store your project files.

Step 2: Create HTML Structure

Inside the folder, create two new files: “index.html”.

Next, open “index.html” in your text editor and add the essential HTML structure, including the <html>, <head>, and <body> tags.

Step 3: Link Tailwind CSS

Within the <head> tag, include a <link> tag to connect to the Tailwind CSS CDN.

Step 4: Design the Layout | HTML Tailwind

Begin by adding the necessary HTML elements to establish the basic layout of your dashboard. This includes a navigation bar, a sidebar, and a main content area.

Step 5: Style Your Dashboard

Now, it’s time to utilize Tailwind CSS classes to style the different components of your dashboard, providing them with a modern and visually appealing appearance.

Once your dashboard looks great, let’s implement the functionality.

Step 6: Implement Functionality

Follow the step-by-step instructions in the tutorial video to implement the desired functionality of your dashboard using JavaScript or any other programming language of your choice.

Step 7: Code Comparison

Take the opportunity to compare your code with the provided source code to identify any errors or unexpected behavior.

Step 8: Refine and Test | HTML Tailwind

Make any necessary adjustments to your code and thoroughly test your dashboard in various browsers and on different devices to ensure full functionality and responsiveness.

Finally, it’s time to showcase your dashboard to the world.

Step 9: Publish Your Dashboard

Once you are satisfied with your dashboard, publish it online and proudly share it with your friends and colleagues.

By following these steps, you will be able to create your very own dashboard using Tailwind CSS and HTML. Remember to refer to the accompanying video tutorial for visual guidance and code examples. Enjoy the process of coding and happy dashboard building!

Video Tutorial

Source Code

index.html

<!DOCTYPE html>

<head>

<link

href="https://fonts.googleapis.com/css2?family=Itim&family=Poppins:wght@400;500&display=swap"

rel="stylesheet"

<link

href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css"

rel="stylesheet"

<title>Foodee</title>

<style>

* {

font-family: "Poppins", sans-serif;

}

</style>

</head>

<body>

<div

class="text-4xl mb-5 text-center"

style="font-family: 'Itim', 'cursive'"

Foodee

</div>

<div>

<img

class="absolute top-0 left-0 w-full h-full object-cover"

src="./assets/images/chef.png"

</div>

Merry Clinton

</h3>

<div class="text-gray-600 text-sm">Chef at Rolex</div>

</div>

href="#"

class="flex items-center gap-2 text-gray-500 hover:text-gray-800 mb-3"

Recipes

</a>

href="#"

class="flex items-center gap-2 text-gray-500 hover:text-gray-800 mb-3"

Favourites

</a>

href="#"

class="flex items-center gap-2 text-gray-500 hover:text-gray-800 mb-3"

Courses

</a>

href="#"

class="flex items-center gap-2 text-gray-500 hover:text-gray-800 mb-3"

Community

</a>

</div>

<div>

Buy premium for advanced

<a class="underline cursor-pointer">Features</a>

</div>

<input

placeholder="Search recipes here..."

class="bg-transparent w-80 outline-none border-none"

</div>

<div

class="bg-red-500 px-10 py-2 rounded-md text-white cursor-pointer"

Go to premium

</div>

<div>

<div>

<div

class="text-5xl font-bold mb-1"

style="font-family: 'Itim', 'cursive'"

Only the best recipes!

</div>

<div class="text-gray-500">Today's new recipies for you</div>

</div>

<div class="text-gray-500">Tutorials</div>

</div>

<div class="text-gray-500">Recipes</div>

</div>

<div

class="border rounded-xl bg-white overflow-hidden shadow-md hover:shadow-xl"

<img

class="h-32 w-32 mx-auto"

src="./assets/images/food1.png"

Food name

</div>

<div

class="text-center text-sm w-full bg-red-50 p-1 my-1 mb-1.5"

Intermediate

</div>

</div>

</div>

<img

class="mx-auto h-5 w-auto"

src="./assets/images/fish1.png"

</div>

<div

class="flex items-center text-gray-700 justify-center gap-2 my-2"

</div>

<div

class="bg-red-500 text-center py-2 text-white cursor-pointer"

Start cooking

</div>

<div

class="border rounded-xl bg-white overflow-hidden shadow-md hover:shadow-xl"

<img

class="h-32 w-32 mx-auto"

src="./assets/images/food1.png"

Food name

</div>

<div

class="text-center text-sm w-full bg-red-50 p-1 my-1 mb-1.5"

Intermediate

</div>

</div>

</div>

<img

class="mx-auto h-5 w-auto"

src="./assets/images/fish1.png"

</div>

<div

class="flex items-center text-gray-700 justify-center gap-2 my-2"

</div>

<div

class="bg-red-500 text-center py-2 text-white cursor-pointer"

Start cooking

</div>

<div

class="border rounded-xl bg-white overflow-hidden shadow-md hover:shadow-xl"

<img

class="h-32 w-32 mx-auto"

src="./assets/images/food1.png"

Food name

</div>

<div

class="text-center text-sm w-full bg-red-50 p-1 my-1 mb-1.5"

Intermediate

</div>

</div>

</div>

<img

class="mx-auto h-5 w-auto"

src="./assets/images/fish1.png"

</div>

<div

class="flex items-center text-gray-700 justify-center gap-2 my-2"

</div>

<div

class="bg-red-500 text-center py-2 text-white cursor-pointer"

Start cooking

</div>

<div

class="border rounded-xl bg-white overflow-hidden shadow-md hover:shadow-xl"

<img

class="h-32 w-32 mx-auto"

src="./assets/images/food1.png"

Food name

</div>

<div

class="text-center text-sm w-full bg-red-50 p-1 my-1 mb-1.5"

Intermediate

</div>

</div>

</div>

<img

class="mx-auto h-5 w-auto"

src="./assets/images/fish1.png"

</div>

<div

class="flex items-center text-gray-700 justify-center gap-2 my-2"

</div>

<div

class="bg-red-500 text-center py-2 text-white cursor-pointer"

Start cooking

</div>

<div

class="border rounded-xl bg-white overflow-hidden shadow-md hover:shadow-xl"

<img

class="h-32 w-32 mx-auto"

src="./assets/images/food1.png"

Food name

</div>

<div

class="text-center text-sm w-full bg-red-50 p-1 my-1 mb-1.5"

Intermediate

</div>

</div>

</div>

<img

class="mx-auto h-5 w-auto"

src="./assets/images/fish1.png"

</div>

<div

class="flex items-center text-gray-700 justify-center gap-2 my-2"

</div>

<div

class="bg-red-500 text-center py-2 text-white cursor-pointer"

Start cooking

</div>

<div

class="border rounded-xl bg-white overflow-hidden shadow-md hover:shadow-xl"

<img

class="h-32 w-32 mx-auto"

src="./assets/images/food1.png"

Food name

</div>

<div

class="text-center text-sm w-full bg-red-50 p-1 my-1 mb-1.5"

Intermediate

</div>

</div>

</div>

<img

class="mx-auto h-5 w-auto"

src="./assets/images/fish1.png"

</div>

<div

class="flex items-center text-gray-700 justify-center gap-2 my-2"

</div>

<div

class="bg-red-500 text-center py-2 text-white cursor-pointer"

Start cooking

</div>

<div

class="border rounded-xl bg-white overflow-hidden shadow-md hover:shadow-xl"

<img

class="h-32 w-32 mx-auto"

src="./assets/images/food1.png"

Food name

</div>

<div

class="text-center text-sm w-full bg-red-50 p-1 my-1 mb-1.5"

Intermediate

</div>

</div>

</div>

<img

class="mx-auto h-5 w-auto"

src="./assets/images/fish1.png"

</div>

<div

class="flex items-center text-gray-700 justify-center gap-2 my-2"

</div>

<div

class="bg-red-500 text-center py-2 text-white cursor-pointer"

Start cooking

</div>

<div

class="border rounded-xl bg-white overflow-hidden shadow-md hover:shadow-xl"

<img

class="h-32 w-32 mx-auto"

src="./assets/images/food1.png"

Food name

</div>

<div

class="text-center text-sm w-full bg-red-50 p-1 my-1 mb-1.5"

Intermediate

</div>

</div>

</div>

<img

class="mx-auto h-5 w-auto"

src="./assets/images/fish1.png"

</div>

<div

class="flex items-center text-gray-700 justify-center gap-2 my-2"

</div>

<div

class="bg-red-500 text-center py-2 text-white cursor-pointer"

Start cooking

</div>

</body>

</html>

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link href="https://fonts.googleapis.com/css2?family=Itim&family=Poppins:wght@400;500&display=swap" rel="stylesheet" /> <link href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet" /> <script src="https://cdn.tailwindcss.com"></script> <title>Foodee</title> <style> * { font-family: "Poppins", sans-serif; } </style> </head> <body> <div class="flex">  <div class="w-64 h-screen overflow-hidden"> <div class="flex flex-col justify-between h-full px-5 py-8"> <div class="mx-auto">  <div class="text-4xl mb-5 text-center" style="font-family: 'Itim', 'cursive'" > Foodee </div>  <div> <div class="border p-1.5 rounded-full w-fit mx-auto"> <div class="h-16 w-16 rounded-full overflow-hidden relative"> <img class="absolute top-0 left-0 w-full h-full object-cover" src="./assets/images/chef.png" /> </div> </div> <div class="text-center"> <h3 class="text-xl" style="font-family: 'Itim', 'cursive'"> Merry Clinton </h3> <div class="text-gray-600 text-sm">Chef at Rolex</div> <div class="flex items-center justify-center gap-1"> <i class="ri-heart-fill text-red-500"></i> <div class="text-gray-700">255</div> </div> </div> </div>  <div class="mx-auto mt-14"> <a href="#" class="flex items-center gap-2 text-gray-500 hover:text-gray-800 mb-3" > <i class="ri-book-read-fill"></i> Recipes </a> <a href="#" class="flex items-center gap-2 text-gray-500 hover:text-gray-800 mb-3" > <i class="ri-heart-fill"></i> Favourites </a> <a href="#" class="flex items-center gap-2 text-gray-500 hover:text-gray-800 mb-3" > <i class="ri-award-fill"></i> Courses </a> <a href="#" class="flex items-center gap-2 text-gray-500 hover:text-gray-800 mb-3" > <i class="ri-global-fill"></i> Community </a> </div> </div> <div class="text-center text-gray-700 bg-red-100 p-2 rounded-md"> <i class="ri-star-fill text-3xl text-yellow-500"></i> <div> Buy premium for advanced <a class="underline cursor-pointer">Features</a> </div> </div> </div> </div>  <div class="bg-red-50 w-full h-screen overflow-y-scroll p-8">  <div class="flex justify-between items-ceter"> <div class="flex items-center gap-2 border-b border-gray-400 pb-1"> <i class="ri-search-line text-gray-500"></i> <input placeholder="Search recipes here..." class="bg-transparent w-80 outline-none border-none" /> </div> <div class="bg-red-500 px-10 py-2 rounded-md text-white cursor-pointer" > Go to premium </div> </div>  <div>  <div class="flex justify-between items-center mt-10"> <div class="flex items-center gap-5"> <img class="h-20 w-20" src="./assets/images/fish.png" /> <div> <div class="text-5xl font-bold mb-1" style="font-family: 'Itim', 'cursive'" > Only the best recipes! </div> <div class="text-gray-500">Today's new recipies for you</div> </div> </div> <div class="flex items-center"> <div class="border-r-2 border-gray-300 pr-5"> <div class="text-4xl font-bold">168</div> <div class="text-gray-500">Tutorials</div> </div> <div class="pl-5"> <div class="text-4xl font-bold">392</div> <div class="text-gray-500">Recipes</div> </div> </div> </div>  <div class="grid grid-cols-4 gap-8 mt-10"> <div class="border rounded-xl bg-white overflow-hidden shadow-md hover:shadow-xl" > <div class="p-5 pb-0"> <img class="h-32 w-32 mx-auto" src="./assets/images/food1.png" /> <div class="text-lg font-semibold text-center w-full mt-2"> Food name </div> <div class="text-center text-sm w-full bg-red-50 p-1 my-1 mb-1.5" > Intermediate </div> <div class="flex items-center justify-between px-5"> <div class="text-center"> <div class="text-lg font-semibold leading-none">25</div> <div class="text-sm text-gray-500">min</div> </div> <div class="text-center"> <div class="text-lg font-semibold leading-none">95</div> <div class="text-sm text-gray-500">cal</div> </div> <div class="text-center"> <img class="mx-auto h-5 w-auto" src="./assets/images/fish1.png" /> <div class="text-sm text-gray-500">fish</div> </div> </div> <div class="flex items-center text-gray-700 justify-center gap-2 my-2" > <i class="ri-star-fill"></i> <i class="ri-star-fill"></i> <i class="ri-star-fill"></i> <i class="ri-star-fill"></i> <i class="ri-star-fill"></i> </div> </div> <div class="bg-red-500 text-center py-2 text-white cursor-pointer" > Start cooking </div> </div> <div class="border rounded-xl bg-white overflow-hidden shadow-md hover:shadow-xl" > <div class="p-5 pb-0"> <img class="h-32 w-32 mx-auto" src="./assets/images/food1.png" /> <div class="text-lg font-semibold text-center w-full mt-2"> Food name </div> <div class="text-center text-sm w-full bg-red-50 p-1 my-1 mb-1.5" > Intermediate </div> <div class="flex items-center justify-between px-5"> <div class="text-center"> <div class="text-lg font-semibold leading-none">25</div> <div class="text-sm text-gray-500">min</div> </div> <div class="text-center"> <div class="text-lg font-semibold leading-none">95</div> <div class="text-sm text-gray-500">cal</div> </div> <div class="text-center"> <img class="mx-auto h-5 w-auto" src="./assets/images/fish1.png" /> <div class="text-sm text-gray-500">fish</div> </div> </div> <div class="flex items-center text-gray-700 justify-center gap-2 my-2" > <i class="ri-star-fill"></i> <i class="ri-star-fill"></i> <i class="ri-star-fill"></i> <i class="ri-star-fill"></i> <i class="ri-star-fill"></i> </div> </div> <div class="bg-red-500 text-center py-2 text-white cursor-pointer" > Start cooking </div> </div> <div class="border rounded-xl bg-white overflow-hidden shadow-md hover:shadow-xl" > <div class="p-5 pb-0"> <img class="h-32 w-32 mx-auto" src="./assets/images/food1.png" /> <div class="text-lg font-semibold text-center w-full mt-2"> Food name </div> <div class="text-center text-sm w-full bg-red-50 p-1 my-1 mb-1.5" > Intermediate </div> <div class="flex items-center justify-between px-5"> <div class="text-center"> <div class="text-lg font-semibold leading-none">25</div> <div class="text-sm text-gray-500">min</div> </div> <div class="text-center"> <div class="text-lg font-semibold leading-none">95</div> <div class="text-sm text-gray-500">cal</div> </div> <div class="text-center"> <img class="mx-auto h-5 w-auto" src="./assets/images/fish1.png" /> <div class="text-sm text-gray-500">fish</div> </div> </div> <div class="flex items-center text-gray-700 justify-center gap-2 my-2" > <i class="ri-star-fill"></i> <i class="ri-star-fill"></i> <i class="ri-star-fill"></i> <i class="ri-star-fill"></i> <i class="ri-star-fill"></i> </div> </div> <div class="bg-red-500 text-center py-2 text-white cursor-pointer" > Start cooking </div> </div> <div class="border rounded-xl bg-white overflow-hidden shadow-md hover:shadow-xl" > <div class="p-5 pb-0"> <img class="h-32 w-32 mx-auto" src="./assets/images/food1.png" /> <div class="text-lg font-semibold text-center w-full mt-2"> Food name </div> <div class="text-center text-sm w-full bg-red-50 p-1 my-1 mb-1.5" > Intermediate </div> <div class="flex items-center justify-between px-5"> <div class="text-center"> <div class="text-lg font-semibold leading-none">25</div> <div class="text-sm text-gray-500">min</div> </div> <div class="text-center"> <div class="text-lg font-semibold leading-none">95</div> <div class="text-sm text-gray-500">cal</div> </div> <div class="text-center"> <img class="mx-auto h-5 w-auto" src="./assets/images/fish1.png" /> <div class="text-sm text-gray-500">fish</div> </div> </div> <div class="flex items-center text-gray-700 justify-center gap-2 my-2" > <i class="ri-star-fill"></i> <i class="ri-star-fill"></i> <i class="ri-star-fill"></i> <i class="ri-star-fill"></i> <i class="ri-star-fill"></i> </div> </div> <div class="bg-red-500 text-center py-2 text-white cursor-pointer" > Start cooking </div> </div> <div class="border rounded-xl bg-white overflow-hidden shadow-md hover:shadow-xl" > <div class="p-5 pb-0"> <img class="h-32 w-32 mx-auto" src="./assets/images/food1.png" /> <div class="text-lg font-semibold text-center w-full mt-2"> Food name </div> <div class="text-center text-sm w-full bg-red-50 p-1 my-1 mb-1.5" > Intermediate </div> <div class="flex items-center justify-between px-5"> <div class="text-center"> <div class="text-lg font-semibold leading-none">25</div> <div class="text-sm text-gray-500">min</div> </div> <div class="text-center"> <div class="text-lg font-semibold leading-none">95</div> <div class="text-sm text-gray-500">cal</div> </div> <div class="text-center"> <img class="mx-auto h-5 w-auto" src="./assets/images/fish1.png" /> <div class="text-sm text-gray-500">fish</div> </div> </div> <div class="flex items-center text-gray-700 justify-center gap-2 my-2" > <i class="ri-star-fill"></i> <i class="ri-star-fill"></i> <i class="ri-star-fill"></i> <i class="ri-star-fill"></i> <i class="ri-star-fill"></i> </div> </div> <div class="bg-red-500 text-center py-2 text-white cursor-pointer" > Start cooking </div> </div> <div class="border rounded-xl bg-white overflow-hidden shadow-md hover:shadow-xl" > <div class="p-5 pb-0"> <img class="h-32 w-32 mx-auto" src="./assets/images/food1.png" /> <div class="text-lg font-semibold text-center w-full mt-2"> Food name </div> <div class="text-center text-sm w-full bg-red-50 p-1 my-1 mb-1.5" > Intermediate </div> <div class="flex items-center justify-between px-5"> <div class="text-center"> <div class="text-lg font-semibold leading-none">25</div> <div class="text-sm text-gray-500">min</div> </div> <div class="text-center"> <div class="text-lg font-semibold leading-none">95</div> <div class="text-sm text-gray-500">cal</div> </div> <div class="text-center"> <img class="mx-auto h-5 w-auto" src="./assets/images/fish1.png" /> <div class="text-sm text-gray-500">fish</div> </div> </div> <div class="flex items-center text-gray-700 justify-center gap-2 my-2" > <i class="ri-star-fill"></i> <i class="ri-star-fill"></i> <i class="ri-star-fill"></i> <i class="ri-star-fill"></i> <i class="ri-star-fill"></i> </div> </div> <div class="bg-red-500 text-center py-2 text-white cursor-pointer" > Start cooking </div> </div> <div class="border rounded-xl bg-white overflow-hidden shadow-md hover:shadow-xl" > <div class="p-5 pb-0"> <img class="h-32 w-32 mx-auto" src="./assets/images/food1.png" /> <div class="text-lg font-semibold text-center w-full mt-2"> Food name </div> <div class="text-center text-sm w-full bg-red-50 p-1 my-1 mb-1.5" > Intermediate </div> <div class="flex items-center justify-between px-5"> <div class="text-center"> <div class="text-lg font-semibold leading-none">25</div> <div class="text-sm text-gray-500">min</div> </div> <div class="text-center"> <div class="text-lg font-semibold leading-none">95</div> <div class="text-sm text-gray-500">cal</div> </div> <div class="text-center"> <img class="mx-auto h-5 w-auto" src="./assets/images/fish1.png" /> <div class="text-sm text-gray-500">fish</div> </div> </div> <div class="flex items-center text-gray-700 justify-center gap-2 my-2" > <i class="ri-star-fill"></i> <i class="ri-star-fill"></i> <i class="ri-star-fill"></i> <i class="ri-star-fill"></i> <i class="ri-star-fill"></i> </div> </div> <div class="bg-red-500 text-center py-2 text-white cursor-pointer" > Start cooking </div> </div> <div class="border rounded-xl bg-white overflow-hidden shadow-md hover:shadow-xl" > <div class="p-5 pb-0"> <img class="h-32 w-32 mx-auto" src="./assets/images/food1.png" /> <div class="text-lg font-semibold text-center w-full mt-2"> Food name </div> <div class="text-center text-sm w-full bg-red-50 p-1 my-1 mb-1.5" > Intermediate </div> <div class="flex items-center justify-between px-5"> <div class="text-center"> <div class="text-lg font-semibold leading-none">25</div> <div class="text-sm text-gray-500">min</div> </div> <div class="text-center"> <div class="text-lg font-semibold leading-none">95</div> <div class="text-sm text-gray-500">cal</div> </div> <div class="text-center"> <img class="mx-auto h-5 w-auto" src="./assets/images/fish1.png" /> <div class="text-sm text-gray-500">fish</div> </div> </div> <div class="flex items-center text-gray-700 justify-center gap-2 my-2" > <i class="ri-star-fill"></i> <i class="ri-star-fill"></i> <i class="ri-star-fill"></i> <i class="ri-star-fill"></i> <i class="ri-star-fill"></i> </div> </div> <div class="bg-red-500 text-center py-2 text-white cursor-pointer" > Start cooking </div> </div> </div> </div> </div> </div> </body> </html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Itim&family=Poppins:wght@400;500&display=swap"
      rel="stylesheet"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css"
      rel="stylesheet"
    />
    <script src="https://cdn.tailwindcss.com"></script>
    <title>Foodee</title>
    <style>
      * {
        font-family: "Poppins", sans-serif;
      }
    </style>
  </head>
  <body>
    <div class="flex">
      <!-- sidebar -->
      <div class="w-64 h-screen overflow-hidden">
        <div class="flex flex-col justify-between h-full px-5 py-8">
          <div class="mx-auto">
            <!-- title -->
            <div
              class="text-4xl mb-5 text-center"
              style="font-family: 'Itim', 'cursive'"
            >
              Foodee
            </div>
            <!-- profile -->
            <div>
              <div class="border p-1.5 rounded-full w-fit mx-auto">
                <div class="h-16 w-16 rounded-full overflow-hidden relative">
                  <img
                    class="absolute top-0 left-0 w-full h-full object-cover"
                    src="./assets/images/chef.png"
                  />
                </div>
              </div>
              <div class="text-center">
                <h3 class="text-xl" style="font-family: 'Itim', 'cursive'">
                  Merry Clinton
                </h3>
                <div class="text-gray-600 text-sm">Chef at Rolex</div>
                <div class="flex items-center justify-center gap-1">
                  <i class="ri-heart-fill text-red-500"></i>
                  <div class="text-gray-700">255</div>
                </div>
              </div>
            </div>
            <!-- menu items -->
            <div class="mx-auto mt-14">
              <a
                href="#"
                class="flex items-center gap-2 text-gray-500 hover:text-gray-800 mb-3"
              >
                <i class="ri-book-read-fill"></i>
                Recipes
              </a>
              <a
                href="#"
                class="flex items-center gap-2 text-gray-500 hover:text-gray-800 mb-3"
              >
                <i class="ri-heart-fill"></i>
                Favourites
              </a>
              <a
                href="#"
                class="flex items-center gap-2 text-gray-500 hover:text-gray-800 mb-3"
              >
                <i class="ri-award-fill"></i>
                Courses
              </a>
              <a
                href="#"
                class="flex items-center gap-2 text-gray-500 hover:text-gray-800 mb-3"
              >
                <i class="ri-global-fill"></i>
                Community
              </a>
            </div>
          </div>
          <div class="text-center text-gray-700 bg-red-100 p-2 rounded-md">
            <i class="ri-star-fill text-3xl text-yellow-500"></i>
            <div>
              Buy premium for advanced
              <a class="underline cursor-pointer">Features</a>
            </div>
          </div>
        </div>
      </div>
      <!-- main -->
      <div class="bg-red-50 w-full h-screen overflow-y-scroll p-8">
        <!-- top bar -->
        <div class="flex justify-between items-ceter">
          <div class="flex items-center gap-2 border-b border-gray-400 pb-1">
            <i class="ri-search-line text-gray-500"></i>
            <input
              placeholder="Search recipes here..."
              class="bg-transparent w-80 outline-none border-none"
            />
          </div>
          <div
            class="bg-red-500 px-10 py-2 rounded-md text-white cursor-pointer"
          >
            Go to premium
          </div>
        </div>
        <!-- content -->
        <div>
          <!-- title -->
          <div class="flex justify-between items-center mt-10">
            <div class="flex items-center gap-5">
              <img class="h-20 w-20" src="./assets/images/fish.png" />
              <div>
                <div
                  class="text-5xl font-bold mb-1"
                  style="font-family: 'Itim', 'cursive'"
                >
                  Only the best recipes!
                </div>
                <div class="text-gray-500">Today's new recipies for you</div>
              </div>
            </div>
            <div class="flex items-center">
              <div class="border-r-2 border-gray-300 pr-5">
                <div class="text-4xl font-bold">168</div>
                <div class="text-gray-500">Tutorials</div>
              </div>
              <div class="pl-5">
                <div class="text-4xl font-bold">392</div>
                <div class="text-gray-500">Recipes</div>
              </div>
            </div>
          </div>
          <!-- cards -->
          <div class="grid grid-cols-4 gap-8 mt-10">
            <div
              class="border rounded-xl bg-white overflow-hidden shadow-md hover:shadow-xl"
            >
              <div class="p-5 pb-0">
                <img
                  class="h-32 w-32 mx-auto"
                  src="./assets/images/food1.png"
                />
                <div class="text-lg font-semibold text-center w-full mt-2">
                  Food name
                </div>
                <div
                  class="text-center text-sm w-full bg-red-50 p-1 my-1 mb-1.5"
                >
                  Intermediate
                </div>
                <div class="flex items-center justify-between px-5">
                  <div class="text-center">
                    <div class="text-lg font-semibold leading-none">25</div>
                    <div class="text-sm text-gray-500">min</div>
                  </div>
                  <div class="text-center">
                    <div class="text-lg font-semibold leading-none">95</div>
                    <div class="text-sm text-gray-500">cal</div>
                  </div>
                  <div class="text-center">
                    <img
                      class="mx-auto h-5 w-auto"
                      src="./assets/images/fish1.png"
                    />
                    <div class="text-sm text-gray-500">fish</div>
                  </div>
                </div>
                <div
                  class="flex items-center text-gray-700 justify-center gap-2 my-2"
                >
                  <i class="ri-star-fill"></i>
                  <i class="ri-star-fill"></i>
                  <i class="ri-star-fill"></i>
                  <i class="ri-star-fill"></i>
                  <i class="ri-star-fill"></i>
                </div>
              </div>
              <div
                class="bg-red-500 text-center py-2 text-white cursor-pointer"
              >
                Start cooking
              </div>
            </div>
            <div
              class="border rounded-xl bg-white overflow-hidden shadow-md hover:shadow-xl"
            >
              <div class="p-5 pb-0">
                <img
                  class="h-32 w-32 mx-auto"
                  src="./assets/images/food1.png"
                />
                <div class="text-lg font-semibold text-center w-full mt-2">
                  Food name
                </div>
                <div
                  class="text-center text-sm w-full bg-red-50 p-1 my-1 mb-1.5"
                >
                  Intermediate
                </div>
                <div class="flex items-center justify-between px-5">
                  <div class="text-center">
                    <div class="text-lg font-semibold leading-none">25</div>
                    <div class="text-sm text-gray-500">min</div>
                  </div>
                  <div class="text-center">
                    <div class="text-lg font-semibold leading-none">95</div>
                    <div class="text-sm text-gray-500">cal</div>
                  </div>
                  <div class="text-center">
                    <img
                      class="mx-auto h-5 w-auto"
                      src="./assets/images/fish1.png"
                    />
                    <div class="text-sm text-gray-500">fish</div>
                  </div>
                </div>
                <div
                  class="flex items-center text-gray-700 justify-center gap-2 my-2"
                >
                  <i class="ri-star-fill"></i>
                  <i class="ri-star-fill"></i>
                  <i class="ri-star-fill"></i>
                  <i class="ri-star-fill"></i>
                  <i class="ri-star-fill"></i>
                </div>
              </div>
              <div
                class="bg-red-500 text-center py-2 text-white cursor-pointer"
              >
                Start cooking
              </div>
            </div>
            <div
              class="border rounded-xl bg-white overflow-hidden shadow-md hover:shadow-xl"
            >
              <div class="p-5 pb-0">
                <img
                  class="h-32 w-32 mx-auto"
                  src="./assets/images/food1.png"
                />
                <div class="text-lg font-semibold text-center w-full mt-2">
                  Food name
                </div>
                <div
                  class="text-center text-sm w-full bg-red-50 p-1 my-1 mb-1.5"
                >
                  Intermediate
                </div>
                <div class="flex items-center justify-between px-5">
                  <div class="text-center">
                    <div class="text-lg font-semibold leading-none">25</div>
                    <div class="text-sm text-gray-500">min</div>
                  </div>
                  <div class="text-center">
                    <div class="text-lg font-semibold leading-none">95</div>
                    <div class="text-sm text-gray-500">cal</div>
                  </div>
                  <div class="text-center">
                    <img
                      class="mx-auto h-5 w-auto"
                      src="./assets/images/fish1.png"
                    />
                    <div class="text-sm text-gray-500">fish</div>
                  </div>
                </div>
                <div
                  class="flex items-center text-gray-700 justify-center gap-2 my-2"
                >
                  <i class="ri-star-fill"></i>
                  <i class="ri-star-fill"></i>
                  <i class="ri-star-fill"></i>
                  <i class="ri-star-fill"></i>
                  <i class="ri-star-fill"></i>
                </div>
              </div>
              <div
                class="bg-red-500 text-center py-2 text-white cursor-pointer"
              >
                Start cooking
              </div>
            </div>
            <div
              class="border rounded-xl bg-white overflow-hidden shadow-md hover:shadow-xl"
            >
              <div class="p-5 pb-0">
                <img
                  class="h-32 w-32 mx-auto"
                  src="./assets/images/food1.png"
                />
                <div class="text-lg font-semibold text-center w-full mt-2">
                  Food name
                </div>
                <div
                  class="text-center text-sm w-full bg-red-50 p-1 my-1 mb-1.5"
                >
                  Intermediate
                </div>
                <div class="flex items-center justify-between px-5">
                  <div class="text-center">
                    <div class="text-lg font-semibold leading-none">25</div>
                    <div class="text-sm text-gray-500">min</div>
                  </div>
                  <div class="text-center">
                    <div class="text-lg font-semibold leading-none">95</div>
                    <div class="text-sm text-gray-500">cal</div>
                  </div>
                  <div class="text-center">
                    <img
                      class="mx-auto h-5 w-auto"
                      src="./assets/images/fish1.png"
                    />
                    <div class="text-sm text-gray-500">fish</div>
                  </div>
                </div>
                <div
                  class="flex items-center text-gray-700 justify-center gap-2 my-2"
                >
                  <i class="ri-star-fill"></i>
                  <i class="ri-star-fill"></i>
                  <i class="ri-star-fill"></i>
                  <i class="ri-star-fill"></i>
                  <i class="ri-star-fill"></i>
                </div>
              </div>
              <div
                class="bg-red-500 text-center py-2 text-white cursor-pointer"
              >
                Start cooking
              </div>
            </div>
            <div
              class="border rounded-xl bg-white overflow-hidden shadow-md hover:shadow-xl"
            >
              <div class="p-5 pb-0">
                <img
                  class="h-32 w-32 mx-auto"
                  src="./assets/images/food1.png"
                />
                <div class="text-lg font-semibold text-center w-full mt-2">
                  Food name
                </div>
                <div
                  class="text-center text-sm w-full bg-red-50 p-1 my-1 mb-1.5"
                >
                  Intermediate
                </div>
                <div class="flex items-center justify-between px-5">
                  <div class="text-center">
                    <div class="text-lg font-semibold leading-none">25</div>
                    <div class="text-sm text-gray-500">min</div>
                  </div>
                  <div class="text-center">
                    <div class="text-lg font-semibold leading-none">95</div>
                    <div class="text-sm text-gray-500">cal</div>
                  </div>
                  <div class="text-center">
                    <img
                      class="mx-auto h-5 w-auto"
                      src="./assets/images/fish1.png"
                    />
                    <div class="text-sm text-gray-500">fish</div>
                  </div>
                </div>
                <div
                  class="flex items-center text-gray-700 justify-center gap-2 my-2"
                >
                  <i class="ri-star-fill"></i>
                  <i class="ri-star-fill"></i>
                  <i class="ri-star-fill"></i>
                  <i class="ri-star-fill"></i>
                  <i class="ri-star-fill"></i>
                </div>
              </div>
              <div
                class="bg-red-500 text-center py-2 text-white cursor-pointer"
              >
                Start cooking
              </div>
            </div>
            <div
              class="border rounded-xl bg-white overflow-hidden shadow-md hover:shadow-xl"
            >
              <div class="p-5 pb-0">
                <img
                  class="h-32 w-32 mx-auto"
                  src="./assets/images/food1.png"
                />
                <div class="text-lg font-semibold text-center w-full mt-2">
                  Food name
                </div>
                <div
                  class="text-center text-sm w-full bg-red-50 p-1 my-1 mb-1.5"
                >
                  Intermediate
                </div>
                <div class="flex items-center justify-between px-5">
                  <div class="text-center">
                    <div class="text-lg font-semibold leading-none">25</div>
                    <div class="text-sm text-gray-500">min</div>
                  </div>
                  <div class="text-center">
                    <div class="text-lg font-semibold leading-none">95</div>
                    <div class="text-sm text-gray-500">cal</div>
                  </div>
                  <div class="text-center">
                    <img
                      class="mx-auto h-5 w-auto"
                      src="./assets/images/fish1.png"
                    />
                    <div class="text-sm text-gray-500">fish</div>
                  </div>
                </div>
                <div
                  class="flex items-center text-gray-700 justify-center gap-2 my-2"
                >
                  <i class="ri-star-fill"></i>
                  <i class="ri-star-fill"></i>
                  <i class="ri-star-fill"></i>
                  <i class="ri-star-fill"></i>
                  <i class="ri-star-fill"></i>
                </div>
              </div>
              <div
                class="bg-red-500 text-center py-2 text-white cursor-pointer"
              >
                Start cooking
              </div>
            </div>
            <div
              class="border rounded-xl bg-white overflow-hidden shadow-md hover:shadow-xl"
            >
              <div class="p-5 pb-0">
                <img
                  class="h-32 w-32 mx-auto"
                  src="./assets/images/food1.png"
                />
                <div class="text-lg font-semibold text-center w-full mt-2">
                  Food name
                </div>
                <div
                  class="text-center text-sm w-full bg-red-50 p-1 my-1 mb-1.5"
                >
                  Intermediate
                </div>
                <div class="flex items-center justify-between px-5">
                  <div class="text-center">
                    <div class="text-lg font-semibold leading-none">25</div>
                    <div class="text-sm text-gray-500">min</div>
                  </div>
                  <div class="text-center">
                    <div class="text-lg font-semibold leading-none">95</div>
                    <div class="text-sm text-gray-500">cal</div>
                  </div>
                  <div class="text-center">
                    <img
                      class="mx-auto h-5 w-auto"
                      src="./assets/images/fish1.png"
                    />
                    <div class="text-sm text-gray-500">fish</div>
                  </div>
                </div>
                <div
                  class="flex items-center text-gray-700 justify-center gap-2 my-2"
                >
                  <i class="ri-star-fill"></i>
                  <i class="ri-star-fill"></i>
                  <i class="ri-star-fill"></i>
                  <i class="ri-star-fill"></i>
                  <i class="ri-star-fill"></i>
                </div>
              </div>
              <div
                class="bg-red-500 text-center py-2 text-white cursor-pointer"
              >
                Start cooking
              </div>
            </div>
            <div
              class="border rounded-xl bg-white overflow-hidden shadow-md hover:shadow-xl"
            >
              <div class="p-5 pb-0">
                <img
                  class="h-32 w-32 mx-auto"
                  src="./assets/images/food1.png"
                />
                <div class="text-lg font-semibold text-center w-full mt-2">
                  Food name
                </div>
                <div
                  class="text-center text-sm w-full bg-red-50 p-1 my-1 mb-1.5"
                >
                  Intermediate
                </div>
                <div class="flex items-center justify-between px-5">
                  <div class="text-center">
                    <div class="text-lg font-semibold leading-none">25</div>
                    <div class="text-sm text-gray-500">min</div>
                  </div>
                  <div class="text-center">
                    <div class="text-lg font-semibold leading-none">95</div>
                    <div class="text-sm text-gray-500">cal</div>
                  </div>
                  <div class="text-center">
                    <img
                      class="mx-auto h-5 w-auto"
                      src="./assets/images/fish1.png"
                    />
                    <div class="text-sm text-gray-500">fish</div>
                  </div>
                </div>
                <div
                  class="flex items-center text-gray-700 justify-center gap-2 my-2"
                >
                  <i class="ri-star-fill"></i>
                  <i class="ri-star-fill"></i>
                  <i class="ri-star-fill"></i>
                  <i class="ri-star-fill"></i>
                  <i class="ri-star-fill"></i>
                </div>
              </div>
              <div
                class="bg-red-500 text-center py-2 text-white cursor-pointer"
              >
                Start cooking
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

Don’t forget to Subscribe to our YouTube Channel for more

Subscribe to iMe Creative

Download complete source code and images