Published on

Advanced Guide: Build A Landing Page With Tailwind CSS With Tailwind CSS

Tags
Pages
Landing Page with Tailwind CSS

Are you looking for a way to create a beautiful and functional landing page for your website? Look no further than Tailwind CSS! In this advanced guide, we'll walk you through the process of building a landing page with Tailwind CSS, a popular utility-first CSS framework.

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that provides pre-defined classes for common styles and layouts. With Tailwind CSS, you can quickly and easily create responsive designs without writing custom CSS.

The description of Landing Page with Tailwind CSS ui component

A landing page is a web page designed to capture a visitor's attention and encourage them to take a specific action, such as signing up for a newsletter or purchasing a product. A landing page typically has a clear call-to-action, a visually appealing design, and minimal distractions.

To create a landing page with Tailwind CSS, we'll use a variety of pre-defined classes to create a visually appealing design that encourages visitors to take action.

Why use Tailwind CSS to create a Landing Page with Tailwind CSS ui component?

Tailwind CSS is a great choice for building a landing page because it provides pre-defined classes for common styles and layouts. This makes it easy to create a visually appealing design without writing custom CSS.

In addition, Tailwind CSS is highly customizable, so you can easily tweak the design to fit your brand and messaging.

The preview of Landing Page with Tailwind CSS ui component.

To see what our landing page will look like, check out the preview below:

Free download of the Landing Page with Tailwind CSS's source code

The source code of Landing Page with Tailwind CSS ui component.

To create our landing page, we'll use HTML and Tailwind CSS classes. The source code for our landing page is below:

<div class="font-sans bg-white flex flex-col min-h-screen w-full">
<div>
<div class="bg-gray-200 px-4 py-4">
  <div
    class="w-full md:max-w-6xl md:mx-auto md:flex md:items-center md:justify-between"
  >
    <div>
      <a href="#" class="inline-block py-2 text-gray-800 text-2xl font-bold"
        >Stats.</a
      >
    </div>
    
    <div>
      <div class="hidden md:block">
        <a
          href="#"
          class="inline-block py-1 md:py-4 text-gray-600 mr-6 font-bold"
          >How it Works</a
        >
        <a
          href="#"
          class="inline-block py-1 md:py-4 text-gray-500 hover:text-gray-600 mr-6"
          >Solutions</a
        >
          
        <a
          href="#"
          class="inline-block py-1 md:py-4 text-gray-500 hover:text-gray-600 mr-6"
          >Pricing</a
        >
        <a
          href="#"
          class="inline-block py-1 md:py-4 text-gray-500 hover:text-gray-600 mr-6"
          >Desktop</a
        >
      </div>
    </div>

    <div class="hidden md:block">
      <a
        href="#"
        class="inline-block py-1 md:py-4 text-gray-500 hover:text-gray-600 mr-6"
        >Login</a
      >
      <a
        href="#"
        class="inline-block py-2 px-4 text-gray-700 bg-white hover:bg-gray-100 rounded-lg"
        >Start a free trial</a
      >
    </div>
  </div>
</div>

<div class="bg-gray-200 md:overflow-hidden">
  <div class="px-4 py-16">
    <div class="relative w-full md:max-w-2xl md:mx-auto text-center">
      <h1
        class="font-bold text-gray-700 text-xl sm:text-2xl md:text-5xl leading-tight mb-6"
      >
        A simple and smart tool that will help grow your business
      </h1>

      <p class="text-gray-600 md:text-xl md:px-18">
        Lorem ipsum, dolor sit amet consectetur adipisicing elit hello.
      </p>

      <div
        class="hidden md:block h-40 w-40 rounded-full bg-blue-800 absolute right-0 bottom-0 -mb-64 -mr-48"
      ></div>

      <div
        class="hidden md:block h-5 w-5 rounded-full bg-yellow-500 absolute top-0 right-0 -mr-40 mt-32"
      ></div>
    </div>
  </div>

  <svg
    class="fill-current bg-gray-200 text-white hidden md:block"
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 1440 320"
  >
    <path
      fill-opacity="1"
      d="M0,64L120,85.3C240,107,480,149,720,149.3C960,149,1200,107,1320,85.3L1440,64L1440,320L1320,320C1200,320,960,320,720,320C480,320,240,320,120,320L0,320Z"
    ></path>
  </svg>
</div>

<div
  class="max-w-4xl mx-auto bg-white shadow-lg relative z-20 hidden md:block"
  style="margin-top: -320px; border-radius: 20px;"
>
  <div
    class="h-20 w-20 rounded-full bg-yellow-500 absolute top-0 left-0 -ml-10 -mt-10"
    style="z-index: -1;"
  ></div>

  <div
    class="h-5 w-5 rounded-full bg-blue-500 absolute top-0 left-0 -ml-32 mt-12"
    style="z-index: -1;"
  ></div>

  <div class="h-10 bg-white rounded-t-lg border-b border-gray-100"></div>
  <div class="flex" style="height: 550px;">
    <div class="w-32 bg-gray-200 p-6 overflow-hidden rounded-bl-lg">
      <div class="text-center mb-10">
        <div class="w-10 h-10 rounded-full bg-blue-800 mb-4 mx-auto"></div>
        <div class="h-2 rounded-full bg-blue-800"></div>
      </div>

      <div class="text-center mb-10">
        <div class="w-10 h-10 rounded-full bg-gray-300 mb-4 mx-auto"></div>
        <div class="h-2 rounded-full bg-gray-300"></div>
      </div>

      <div class="text-center mb-10">
        <div class="w-10 h-10 rounded-full bg-gray-300 mb-4 mx-auto"></div>
        <div class="h-2 rounded-full bg-gray-300"></div>
      </div>

      <div class="text-center">
        <div class="w-10 h-10 rounded-full bg-gray-300 mb-4 mx-auto"></div>
        <div class="h-2 rounded-full bg-gray-300"></div>
      </div>
    </div>
    <div class="flex-1 py-6 px-8">
      <div class="flex flex-wrap -mx-4">
        <div class="w-2/3 px-4">
          <div class="flex flex-wrap -mx-4 mb-10">
            <div class="w-1/4 px-4">
              <div class="text-center mb-10 bg-white shadow rounded-lg p-6">
                <div
                  class="w-10 h-10 rounded-full bg-green-600 mb-4 mx-auto"
                ></div>
                <div class="h-2 rounded-full bg-gray-200"></div>
              </div>
            </div>
            <div class="w-1/4 px-4">
              <div class="text-center mb-10 bg-white shadow rounded-lg p-6">
                <div
                  class="w-10 h-10 rounded-full bg-blue-600 mb-4 mx-auto"
                ></div>
                <div class="h-2 rounded-full bg-gray-200"></div>
              </div>
            </div>
            <div class="w-1/4 px-4">
              <div class="text-center mb-10 bg-white shadow rounded-lg p-6">
                <div
                  class="w-10 h-10 rounded-full bg-orange-400 mb-4 mx-auto"
                ></div>
                <div class="h-2 rounded-full bg-gray-200"></div>
              </div>
            </div>
            <div class="w-1/4 px-4">
              <div class="text-center mb-10 bg-white shadow rounded-lg p-6">
                <div
                  class="w-10 h-10 rounded-full bg-blue-800 mb-4 mx-auto"
                ></div>
                <div class="h-2 rounded-full bg-gray-200"></div>
              </div>
            </div>
          </div>

          <div class="h-32 percentage mb-10 pt-2">
            <div class="h-4 bg-gray-200 w-64 mb-4 block"></div>
            <div class="h-4 bg-gray-200 w-32 mb-4 block"></div>
            <div class="h-4 bg-gray-200 w-40 mb-4 block"></div>
            <div class="h-4 bg-gray-200 w-20 mb-4 block"></div>
          </div>

          <div class="w-full flex flex-wrap mb-6">
            <div class="w-1/2">
              <div class="flex items-center">
                <div class="h-8 w-8 rounded-full bg-gray-200 mr-4"></div>
                <div>
                  <div class="h-2 w-16 bg-gray-200 mb-1 rounded-full"></div>
                  <div class="h-2 w-10 bg-gray-100 rounded-full"></div>
                </div>
              </div>
            </div>
            <div class="w-1/2">
              <div class="flex items-center">
                <div class="h-8 w-8 rounded-full bg-gray-200 mr-4"></div>
                <div>
                  <div class="h-2 w-16 bg-gray-200 mb-1 rounded-full"></div>
                  <div class="h-2 w-10 bg-gray-100 rounded-full"></div>
                </div>
              </div>
            </div>
          </div>

          <div class="w-full flex flex-wrap">
            <div class="w-1/2">
              <div class="flex items-center">
                <div class="h-8 w-8 rounded-full bg-gray-200 mr-4"></div>
                <div>
                  <div class="h-2 w-16 bg-gray-200 mb-1 rounded-full"></div>
                  <div class="h-2 w-10 bg-gray-100 rounded-full"></div>
                </div>
              </div>
            </div>
            <div class="w-1/2">
              <div class="flex items-center">
                <div class="h-8 w-8 rounded-full bg-gray-200 mr-4"></div>
                <div>
                  <div class="h-2 w-16 bg-gray-200 mb-1 rounded-full"></div>
                  <div class="h-2 w-10 bg-gray-100 rounded-full"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="w-1/3 px-4">
          <div class="rounded-lg shadow-lg p-6">
            <div class="block w-12 h-2 rounded-full bg-gray-200 mb-6"></div>

            <svg
              height="150"
              width="150"
              viewBox="0 0 20 20"
              class="mx-auto mb-12"
            >
              <circle r="10" cx="10" cy="10" fill="#4299e1" />
              <circle
                r="5"
                cx="10"
                cy="10"
                fill="transparent"
                stroke="#2b6cb0"
                stroke-width="10"
                stroke-dasharray="11 31.4"
                transform="rotate(-90) translate(-20)"
              />
            </svg>

            <div class="flex flex-wrap -mx-2 mb-10">
              <div class="w-1/3 px-2">
                <div class="block h-2 rounded-full bg-gray-200"></div>
              </div>
              <div class="w-1/3 px-2">
                <div class="block h-2 rounded-full bg-gray-200"></div>
              </div>
              <div class="w-1/3 px-2">
                <div class="block h-2 rounded-full bg-gray-200"></div>
              </div>
            </div>
          </div>

          <div class="flex justify-between my-10">
            <div>
              <div class="h-2 w-10 bg-gray-300 rounded-full mb-2"></div>
              <div class="h-2 w-16 bg-gray-300 rounded-full mb-2"></div>
              <div class="h-2 w-8 bg-gray-300 rounded-full"></div>
            </div>
            <div>
              <div
                class="ml-auto h-2 w-5 bg-gray-300 rounded-full mb-2"
              ></div>
              <div
                class="ml-auto h-2 w-6 bg-gray-300 rounded-full mb-2"
              ></div>
              <div class="ml-auto h-2 w-8 bg-gray-300 rounded-full"></div>
            </div>
          </div>

          <div class="text-right flex justify-end">
            <div class="rounded-lg h-8 w-20 px-4 bg-gray-200 mr-2"></div>
            <div class="rounded-lg h-8 w-20 px-4 bg-green-400"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="px-4 md:hidden">
  <div
    class="-mt-10 max-w-4xl mx-auto bg-white shadow-lg relative z-20"
    style="border-radius: 20px;"
  >
    <div class="h-10 bg-white rounded-t-lg border-b border-gray-100"></div>
    <div class="flex" style="height: 340px;">
      <div class="w-16 bg-gray-200 px-2 py-6 overflow-hidden rounded-bl-lg">
        <div class="text-center mb-6">
          <div class="w-4 h-4 rounded-full bg-blue-800 mb-2 mx-auto"></div>
          <div class="h-2 w-8 mx-auto rounded-full bg-blue-800"></div>
        </div>
        <div class="text-center mb-6">
          <div class="w-4 h-4 rounded-full bg-gray-300 mb-2 mx-auto"></div>
          <div class="h-2 w-8 mx-auto rounded-full bg-gray-300"></div>
        </div>
        <div class="text-center mb-6">
          <div class="w-4 h-4 rounded-full bg-gray-300 mb-2 mx-auto"></div>
          <div class="h-2 w-8 mx-auto rounded-full bg-gray-300"></div>
        </div>
        <div class="text-center">
          <div class="w-4 h-4 rounded-full bg-gray-300 mb-2 mx-auto"></div>
          <div class="h-2 w-8 mx-auto rounded-full bg-gray-300"></div>
        </div>
      </div>
      <div class="flex-1 py-6 px-4">
        <div class="flex flex-wrap -mx-2">
          <div class="w-1/3 px-2">
            <div
              class="text-center mb-6 bg-white shadow rounded-lg px-2 py-3"
            >
              <div
                class="w-4 h-4 rounded-full bg-green-600 mb-2 mx-auto"
              ></div>
              <div class="h-2 w-8 mx-auto rounded-full bg-gray-200"></div>
            </div>
          </div>
          <div class="w-1/3 px-2">
            <div
              class="text-center mb-6 bg-white shadow rounded-lg px-2 py-3"
            >
              <div
                class="w-4 h-4 rounded-full bg-blue-600 mb-2 mx-auto"
              ></div>
              <div class="h-2 w-8 mx-auto rounded-full bg-gray-200"></div>
            </div>
          </div>
          <div class="w-1/3 px-2">
            <div
              class="text-center mb-6 bg-white shadow rounded-lg px-2 py-3"
            >
              <div
                class="w-4 h-4 rounded-full bg-orange-600 mb-2 mx-auto"
              ></div>
              <div class="h-2 w-8 mx-auto rounded-full bg-gray-200"></div>
            </div>
          </div>
        </div>

        <div class="flex flex-wrap -mx-2 mb-6">
          <div class="w-1/2 px-2">
            <div class="shadow h-24 p-2 rounded-lg">
              <div class="h-20 percentage pt-2">
                <div class="h-2 bg-gray-200 w-24 mb-2 block"></div>
                <div class="h-2 bg-gray-200 w-12 mb-2 block"></div>
                <div class="h-2 bg-gray-200 w-20 mb-2 block"></div>
                <div class="h-2 bg-gray-200 w-8 mb-2 block"></div>
              </div>
            </div>
          </div>
          <div class="w-1/2 px-2">
            <div class="rounded-lg shadow px-2 py-2">
              <div
                class="block w-8 h-2 rounded-full bg-gray-200 mb-2"
              ></div>

              <div class="mb-2">
                <svg
                  height="50"
                  width="50"
                  viewBox="0 0 20 20"
                  class="mx-auto"
                >
                  <circle r="10" cx="10" cy="10" fill="#ddd" />
                  <circle
                    r="5"
                    cx="10"
                    cy="10"
                    fill="transparent"
                    stroke="#eee"
                    stroke-width="10"
                    stroke-dasharray="11 31.4"
                    transform="rotate(-90) translate(-20)"
                  />
                </svg>
              </div>

              <div class="flex flex-wrap -mx-2">
                <div class="w-1/3 px-2">
                  <div class="block h-2 rounded-full bg-gray-200"></div>
                </div>
                <div class="w-1/3 px-2">
                  <div class="block h-2 rounded-full bg-gray-200"></div>
                </div>
                <div class="w-1/3 px-2">
                  <div class="block h-2 rounded-full bg-gray-200"></div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="w-full flex flex-wrap mb-2">
          <div class="w-1/2">
            <div class="flex items-center">
              <div class="h-4 w-4 rounded-full bg-gray-200 mr-4"></div>
              <div>
                <div class="h-2 w-10 bg-gray-200 mb-1 rounded-full"></div>
                <div class="h-2 w-6 bg-gray-100 rounded-full"></div>
              </div>
            </div>
          </div>
          <div class="w-1/2">
            <div class="flex items-center">
              <div class="h-4 w-4 rounded-full bg-gray-200 mr-4"></div>
              <div>
                <div class="h-2 w-10 bg-gray-200 mb-1 rounded-full"></div>
                <div class="h-2 w-6 bg-gray-100 rounded-full"></div>
              </div>
            </div>
          </div>
        </div>

        <div class="w-full flex flex-wrap mb-6">
          <div class="w-1/2">
            <div class="flex items-center">
              <div class="h-4 w-4 rounded-full bg-gray-200 mr-4"></div>
              <div>
                <div class="h-2 w-10 bg-gray-200 mb-1 rounded-full"></div>
                <div class="h-2 w-6 bg-gray-100 rounded-full"></div>
              </div>
            </div>
          </div>
          <div class="w-1/2">
            <div class="flex items-center">
              <div class="h-4 w-4 rounded-full bg-gray-200 mr-4"></div>
              <div>
                <div class="h-2 w-10 bg-gray-200 mb-1 rounded-full"></div>
                <div class="h-2 w-6 bg-gray-100 rounded-full"></div>
              </div>
            </div>
          </div>
        </div>

        <div class="text-right flex justify-end">
          <div class="rounded-lg h-6 w-16 px-4 bg-gray-200 mr-2"></div>
          <div class="rounded-lg h-6 w-16 px-4 bg-green-400"></div>
        </div>
      </div>
    </div>
  </div>
</div>

<p class="text-center p-4 text-gray-600 mt-10">
  Created by
  <a
    class="border-b text-blue-500"
    href="https://twitter.com/mithicher"
    target="_blank"
    >@mithicher</a
  >. Inspired by dribble shot
  <a
    href="https://dribbble.com/shots/8807920-Quickpay-Hero-section/attachments/1015863"
    target="_blank"
    class="border-b text-blue-500"
    >https://dribbble.com/vadimdrut</a
  >
</p>
</div>
</div>

How to create a Landing Page with Tailwind CSS with Tailwind CSS?

Now that we've covered the basics, let's dive into the process of creating a landing page with Tailwind CSS.

Step 1: Set up your project

To get started, create a new HTML file and add the necessary boilerplate code. Then, include the Tailwind CSS stylesheet in the head of your HTML file.

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css">
  </head>
  <body>
    <!-- Your content here -->
  </body>
</html>

Step 2: Define your layout

Next, define the layout of your landing page using Tailwind CSS classes. For example, you might use the flex and justify-center classes to center your content horizontally, and the h-screen and bg-gray-100 classes to set the height and background color of your page.

<body class="flex justify-center h-screen bg-gray-100">
  <div class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
    <!-- Your content here -->
  </div>
</body>

Step 3: Add your content

Once you've defined your layout, it's time to add your content. Use Tailwind CSS classes to style your headings, paragraphs, buttons, and other elements.

For example, you might use the text-4xl class to make your heading large and bold, the text-gray-500 class to set the color of your text, and the bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full class to style your call-to-action button.

<body class="flex justify-center h-screen bg-gray-100">
  <div class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
    <h1 class="text-4xl font-bold text-gray-500 mb-4">Welcome to My Landing Page</h1>
    <p class="text-lg text-gray-500 mb-8">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, lorem vel aliquet dapibus, velit augue porttitor ipsum, vel bibendum lorem elit sit amet nisl.</p>
    <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full">Sign Up Now</button>
  </div>
</body>

Step 4: Customize your design

Finally, customize your design to fit your brand and messaging. Use Tailwind CSS classes to adjust the colors, fonts, and spacing of your elements.

For example, you might use the font-sans class to set the font for your page, the text-red-500 class to set the color of your call-to-action button, and the mt-12 class to add extra spacing between your heading and paragraph.

<body class="flex justify-center h-screen bg-gray-100">
  <div class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
    <h1 class="text-4xl font-bold text-red-500 mb-4 mt-12">Welcome to My Landing Page</h1>
    <p class="text-lg text-gray-500 mb-8">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, lorem vel aliquet dapibus, velit augue porttitor ipsum, vel bibendum lorem elit sit amet nisl.</p>
    <button class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded-full">Sign Up Now</button>
  </div>
</body>

Conclusion

In this advanced guide, we've shown you how to build a landing page with Tailwind CSS. With its pre-defined classes and highly customizable design, Tailwind CSS is a great choice for creating beautiful and functional landing pages. So why not give it a try for your next project?