Published on

How To Make A Basic App Layout With Tailwind CSS In 5 Easy Steps

Tags
Basic App layout

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that allows developers to quickly create custom user interfaces. It provides a set of pre-defined CSS classes that can be used to style HTML elements without writing any custom CSS. Tailwind CSS is gaining popularity among developers due to its flexibility, ease of use, and ability to speed up the development process.

The description of Basic App layout ui component

A Basic App layout is a user interface component that provides a basic structure for an application. It typically includes a header, a navigation menu, a content area, and a footer. The purpose of a Basic App layout is to provide a consistent and organized structure for an application, making it easier for users to navigate and use.

Why use Tailwind CSS to create a Basic App layout ui component?

Tailwind CSS provides a set of pre-defined CSS classes that can be used to quickly create a Basic App layout. This saves developers time and effort, as they do not need to write custom CSS for each element. Additionally, Tailwind CSS allows for easy customization of styles, making it easy to create a unique and personalized Basic App layout.

The preview of Basic App layout ui component.

To give you an idea of what a Basic App layout looks like, here is a preview:

Free download of the Basic App layout's source code

The source code of Basic App layout ui component.

Here is the source code for a Basic App layout using Tailwind CSS:

<div class="flex h-screen w-screen bg-gray-200">
  <!-- container -->

  <aside
    class="hidden h-full flex-col items-center bg-white text-gray-700 shadow
		lg:flex"
  >
    <!-- Side Nav Bar-->

    <div class="flex h-16 w-full items-center">
      <!-- Logo Section -->
      <a class="mx-auto h-6 w-6" href="http://svelte.dev/">
        <img
          class="mx-auto h-6 w-6"
          src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/Svelte_Logo.svg/512px-Svelte_Logo.svg.png"
          alt="svelte logo"
        />
      </a>
    </div>

    <ul>
      <!-- Items Section -->
      <li class="hover:bg-gray-100">
        <a
          href="."
          class="flex flex h-16 w-full items-center justify-center px-6
					focus:text-orange-500"
        >
          <svg
            class="h-5 w-5"
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
          >
            <polyline points="22 12 16 12 14 15 10 15 8 12 2 12"></polyline>
            <path
              d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0
							2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0
							0-1.79 1.11z"
            ></path>
          </svg>
        </a>
      </li>

      <li class="hover:bg-gray-100">
        <a
          href="."
          class="flex flex h-16 w-full items-center justify-center px-6
					focus:text-orange-500"
        >
          <svg
            class="h-5 w-5"
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
          >
            <path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"></path>
          </svg>
        </a>
      </li>

      <li class="hover:bg-gray-100">
        <a
          href="."
          class="flex flex h-16 w-full items-center justify-center px-6
					focus:text-orange-500"
        >
          <svg
            class="h-5 w-5"
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
          >
            <circle cx="12" cy="12" r="3"></circle>
            <path
              d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1
							0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0
							0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2
							2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0
							0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1
							0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0
							0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65
							0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0
							1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0
							1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2
							0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0
							1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0
							2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0
							0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65
							1.65 0 0 0-1.51 1z"
            ></path>
          </svg>
        </a>
      </li>
    </ul>

    <div class="mt-auto flex h-16 w-full items-center">
      <!-- Action Section -->
      <button
        class="mx-auto flex flex h-16 w-10 w-full items-center
				justify-center hover:bg-red-200 focus:text-orange-500 focus:outline-none"
      >
        <svg
          class="h-5 w-5 text-red-700"
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        >
          <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path>
          <polyline points="16 17 21 12 16 7"></polyline>
          <line x1="21" y1="12" x2="9" y2="12"></line>
        </svg>
      </button>
    </div>
  </aside>

  <div class="flex flex-1 flex-col">
    <nav class="flex h-16 justify-between border-b-2 bg-white px-4">
      <!-- top bar -->

      <ul class="flex items-center lg:hidden">
        <!-- top bar left -->
        <li class="h-6 w-6">
          <img
            class="mx-auto h-full w-full"
            src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/Svelte_Logo.svg/512px-Svelte_Logo.svg.png"
            alt="svelte logo"
          />
        </li>
      </ul>

      <ul class="flex items-center">
        <!-- top bar center -->
        <li>
          <h1 class="pl-10 text-gray-700 lg:pl-0">Svelte</h1>
        </li>
      </ul>

      <ul class="flex items-center">
        <!-- to bar right  -->

        <li class="pr-4">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="feather feather-bell"
          >
            <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path>
            <path d="M13.73 21a2 2 0 0 1-3.46 0"></path>
          </svg>
        </li>

        <li class="h-8 w-8">
          <img
            class="mx-auto h-full w-full rounded-full"
            src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60"
            alt="profile woman"
          />
        </li>
      </ul>
    </nav>
  </div>

  <nav
    class="fixed bottom-0 flex w-full overflow-x-auto border bg-white
		lg:hidden"
  >
    <!-- Bottom Icon Navigation Menu -->

    <a
      href="."
      class="whitespace-no-wrap flex flex-grow flex-col items-center
			justify-center overflow-hidden text-sm transition-colors
			duration-100 ease-in-out hover:bg-gray-200 focus:text-orange-500"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
      >
        <polyline points="22 12 16 12 14 15 10 15 8 12 2 12"></polyline>
        <path
          d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0
					2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"
        ></path>
      </svg>

      <span class="hidden text-sm capitalize">Inbox</span>
    </a>

    <a
      href="."
      class="whitespace-no-wrap flex flex-grow flex-col items-center
			justify-center overflow-hidden text-sm text-orange-500
			transition-colors duration-100 ease-in-out hover:bg-gray-200"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
        class="feather feather-github"
      >
        <path
          d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0
					0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77
					5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7
					0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0
					0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"
        ></path>
      </svg>

      <span class="text-sm capitalize">github</span>
    </a>

    <a
      href="."
      class="whitespace-no-wrap flex flex-grow flex-col items-center
			justify-center overflow-hidden text-sm transition-colors
			duration-100 ease-in-out hover:bg-gray-200 focus:text-orange-500"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
        class="feather feather-bookmark"
      >
        <path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"></path>
      </svg>

      <span class="hidden text-sm capitalize">bookmark</span>
    </a>

    <a
      href="."
      class="whitespace-no-wrap flex flex-grow flex-col items-center
			justify-center overflow-hidden text-sm transition-colors
			duration-100 ease-in-out hover:bg-gray-200 focus:text-orange-500"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
      >
        <circle cx="12" cy="12" r="3"></circle>
        <path
          d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83
					2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65
					0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0
					0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2
					2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0
					0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0
					4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2
					0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0
					1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1
					1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0
					0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0
					1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0
					0-1.51 1z"
        ></path>
      </svg>

      <span class="hidden text-sm capitalize">Settings</span>
    </a>
  </nav>
</div>

How to create a Basic App layout with Tailwind CSS?

Creating a Basic App layout with Tailwind CSS is easy and can be done in just 5 steps:

Step 1: Set up a new HTML file

Create a new HTML file and add the basic HTML structure. This should include the <!DOCTYPE html> declaration, the <html> element, the <head> element, and the <body> element.

Step 2: Add the Tailwind CSS stylesheet

Add the Tailwind CSS stylesheet to your HTML file by including the following code in the <head> element:

<link href="https://cdn.jsdelivr.net/npm/tailwindcss@latest/dist/tailwind.min.css" rel="stylesheet">

This will link to the latest version of Tailwind CSS.

Step 3: Create the Basic App layout structure

Add the basic structure of the Basic App layout to your HTML file. This should include a header, a navigation menu, a content area, and a footer. Here is an example:

<header class="bg-gray-800 text-white p-4">
  <h1 class="text-xl font-bold">My App Name</h1>
</header>

<nav class="bg-gray-200 p-4">
  <ul class="flex">
    <li class="mr-4"><a href="#" class="text-gray-700 font-bold">Home</a></li>
    <li class="mr-4"><a href="#" class="text-gray-700 font-bold">About</a></li>
    <li class="mr-4"><a href="#" class="text-gray-700 font-bold">Contact</a></li>
  </ul>
</nav>

<main class="p-4">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac enim in est varius tristique vel euismod nunc. Nulla facilisi. Donec auctor, nulla ac bibendum bibendum, libero velit bibendum sapien, vel elementum justo velit nec enim.</p>
</main>

<footer class="bg-gray-800 text-white p-4">
  <p>&copy; 2021 My App Name</p>
</footer>

Step 4: Customize the styles

Tailwind CSS provides a set of pre-defined CSS classes that can be used to customize the styles of each element. For example, you can change the background color of the header by adding the bg-red-500 class. Here is an example:

<header class="bg-red-500 text-white p-4">
  <h1 class="text-xl font-bold">My App Name</h1>
</header>

Step 5: Add your own content

Finally, add your own content to the Basic App layout. This can include text, images, forms, and more. Here is an example:

<main class="p-4">
  <h2 class="text-lg font-bold mb-4">Welcome to My App</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac enim in est varius tristique vel euismod nunc. Nulla facilisi. Donec auctor, nulla ac bibendum bibendum, libero velit bibendum sapien, vel elementum justo velit nec enim.</p>
  <form class="mt-4">
    <label class="block mb-2 font-bold" for="email">Email</label>
    <input class="border border-gray-400 p-2 w-full" type="email" id="email" name="email">
    <button class="bg-blue-500 text-white p-2 mt-4" type="submit">Submit</button>
  </form>
</main>

Conclusion

In conclusion, creating a Basic App layout with Tailwind CSS is easy and can be done in just 5 steps. Tailwind CSS provides a set of pre-defined CSS classes that can be used to quickly create a Basic App layout, making it easier for developers to create custom user interfaces. With Tailwind CSS, you can easily customize the styles of each element, making it easy to create a unique and personalized Basic App layout.