Published on

How To Create A Curvy Sidebar With Tailwind CSS From Scratch

Tags
Navigations
Curvy sidebar

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that provides a set of pre-defined CSS classes to help you quickly build a responsive and customizable user interface. It is designed to be highly customizable, allowing developers to easily create unique and complex UI components without writing any custom CSS.

The description of Curvy sidebar ui component

A curvy sidebar is a UI component that is commonly used in web applications to display navigation links, menus, and other important information. It has a unique curved shape that makes it stand out from other UI components and adds a touch of elegance to your web application.

Why use Tailwind CSS to create a Curvy sidebar ui component?

Tailwind CSS is the perfect tool for creating a curvy sidebar UI component because it provides a set of pre-defined CSS classes that can be used to create complex shapes and styles. It also allows you to easily customize the appearance of your UI component by using its utility-first CSS approach.

The preview of Curvy sidebar ui component

To create a curvy sidebar UI component with Tailwind CSS, we will be using a combination of CSS classes to create the curved shape and style the sidebar. Here is a preview of what the final UI component will look like:

Free download of the Curvy sidebar's source code

The source code of Curvy sidebar ui component

To create the curvy sidebar UI component, we will be using HTML and Tailwind CSS classes. Here is the source code for the UI component:

<div x-data="setup()" x-init="$refs.loading.classList.add('hidden');">
      <div class="flex h-screen antialiased text-gray-900 bg-gray-100 dark:bg-dark dark:text-light">
        <!-- Loading screen -->
        <div
          x-ref="loading"
          class="fixed inset-0 z-50 flex items-center justify-center text-2xl font-semibold text-white bg-blue-600"
        >
          Loading.....
        </div>

        <!-- Sidebar -->
        <div
          x-transition:enter="transform transition-transform duration-300"
          x-transition:enter-start="-translate-x-full"
          x-transition:enter-end="translate-x-0"
          x-transition:leave="transform transition-transform duration-300"
          x-transition:leave-start="translate-x-0"
          x-transition:leave-end="-translate-x-full"
          x-show="isSidebarOpen"
          class="fixed inset-y-0 z-10 flex w-80"
        >
          <!-- Curvy shape -->
          <svg
            class="absolute inset-0 w-full h-full text-white"
            style="filter: drop-shadow(10px 0 10px #00000030)"
            preserveAspectRatio="none"
            viewBox="0 0 309 800"
            fill="currentColor"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M268.487 0H0V800H247.32C207.957 725 207.975 492.294 268.487 367.647C329 243 314.906 53.4314 268.487 0Z"
            />
          </svg>
          <!-- Sidebar content -->
          <div class="z-10 flex flex-col flex-1">
            <div class="flex items-center justify-between flex-shrink-0 w-64 p-4">
              <!-- Logo -->
              <a href="#">
                <span class="sr-only">K-UI</span>
                <svg
                  aria-hidden="true"
                  class="w-16 h-auto text-blue-600"
                  viewBox="0 0 96 53"
                  fill="currentColor"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    fill-rule="evenodd"
                    clip-rule="evenodd"
                    d="M7.69141 34.7031L13.9492 28.1992L32.0898 52H40.1758L18.4492 23.418L38.5938 0.8125H30.4375L7.69141 26.125V0.8125H0.941406V52H7.69141V34.7031ZM35.3008 26.9102H52.457V21.6016H35.3008V26.9102ZM89.1914 13V35.5117C89.1914 39.2148 88.1719 42.0859 86.1328 44.125C84.1172 46.1641 81.1992 47.1836 77.3789 47.1836C73.6055 47.1836 70.6992 46.1641 68.6602 44.125C66.6211 42.0625 65.6016 39.1797 65.6016 35.4766V0.8125H58.9219V35.6875C58.9688 40.9844 60.6562 45.1445 63.9844 48.168C67.3125 51.1914 71.7773 52.7031 77.3789 52.7031L79.1719 52.6328C84.3281 52.2578 88.4062 50.5352 91.4062 47.4648C94.4297 44.3945 95.9531 40.4453 95.9766 35.6172V13H89.1914ZM89 8H96V1H89V8Z"
                  />
                </svg>
              </a>
              <!-- Close btn -->
              <button @click="isSidebarOpen = false" class="p-1 rounded-lg focus:outline-none focus:ring">
                <svg
                  class="w-6 h-6"
                  aria-hidden="true"
                  xmlns="http://www.w3.org/2000/svg"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                >
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                </svg>
                <span class="sr-only">Close sidebar</span>
              </button>
            </div>
            <nav class="flex flex-col flex-1 w-64 p-4 mt-4">
              <a href="#" class="flex items-center space-x-2">
                <svg
                  class="w-6 h-6"
                  aria-hidden="true"
                  xmlns="http://www.w3.org/2000/svg"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
                  />
                </svg>
                <span>Home</span>
              </a>
            </nav>
            <div class="flex-shrink-0 p-4">
              <button class="flex items-center space-x-2">
                <svg
                  aria-hidden="true"
                  class="w-6 h-6"
                  xmlns="http://www.w3.org/2000/svg"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
                  />
                </svg>
                <span>Logout</span>
              </button>
            </div>
          </div>
        </div>
        <main class="flex flex-col items-center justify-center flex-1">
          <!-- Page content -->
          <button @click="isSidebarOpen = true" class="fixed p-2 text-white bg-black rounded-lg top-5 left-5">
            <svg
              class="w-6 h-6"
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
            </svg>
            <span class="sr-only">Open menu</span>
          </button>
          <h1 class="sr-only">Home</h1>
          <a href="https://github.com/kamona-ui" target="_blank">
            <span class="sr-only">Kamona ui</span>
            <svg
              aria-hidden="true"
              class="w-20 h-auto text-blue-600"
              viewBox="0 0 96 53"
              fill="currentColor"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                fill-rule="evenodd"
                clip-rule="evenodd"
                d="M7.69141 34.7031L13.9492 28.1992L32.0898 52H40.1758L18.4492 23.418L38.5938 0.8125H30.4375L7.69141 26.125V0.8125H0.941406V52H7.69141V34.7031ZM35.3008 26.9102H52.457V21.6016H35.3008V26.9102ZM89.1914 13V35.5117C89.1914 39.2148 88.1719 42.0859 86.1328 44.125C84.1172 46.1641 81.1992 47.1836 77.3789 47.1836C73.6055 47.1836 70.6992 46.1641 68.6602 44.125C66.6211 42.0625 65.6016 39.1797 65.6016 35.4766V0.8125H58.9219V35.6875C58.9688 40.9844 60.6562 45.1445 63.9844 48.168C67.3125 51.1914 71.7773 52.7031 77.3789 52.7031L79.1719 52.6328C84.3281 52.2578 88.4062 50.5352 91.4062 47.4648C94.4297 44.3945 95.9531 40.4453 95.9766 35.6172V13H89.1914ZM89 8H96V1H89V8Z"
              />
            </svg>
          </a>
        </main>
      </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/alpinejs/2.8.1/alpine.js"></script>
    <script>
        const setup = () => {
        return {
                isSidebarOpen: false,
            }
        }
    </script>

How to create a Curvy sidebar with Tailwind CSS?

Step 1: Set up the HTML structure

The first step is to set up the HTML structure for the curvy sidebar. We will be using a simple unordered list to create the navigation links. Here is the HTML code:

<div class="h-screen flex overflow-hidden bg-gray-100">
  <!-- Sidebar -->
  <div class="relative bg-indigo-600 flex-shrink-0 flex flex-col w-64">
    <!-- Sidebar header -->
    <div class="h-16 flex items-center justify-center">
      <h1 class="text-white font-bold text-xl">Curvy Sidebar</h1>
    </div>
    <!-- Sidebar links -->
    <ul class="flex-1 overflow-y-auto">
      <li class="px-6 py-2 hover:bg-indigo-700">
        <a href="#" class="text-white font-bold">Home</a>
      </li>
      <li class="px-6 py-2 hover:bg-indigo-700">
        <a href="#" class="text-white font-bold">About</a>
      </li>
      <li class="px-6 py-2 hover:bg-indigo-700">
        <a href="#" class="text-white font-bold">Contact</a>
      </li>
    </ul>
  </div>
  <!-- Content area -->
  <div class="flex-1 overflow-auto">
    <!-- Content goes here -->
  </div>
</div>

Step 2: Add the Tailwind CSS classes

Next, we will be adding the Tailwind CSS classes to create the curved shape and style the sidebar. Here is the updated HTML code:

<div class="h-screen flex overflow-hidden bg-gray-100">
  <!-- Sidebar -->
  <div class="relative bg-indigo-600 flex-shrink-0 flex flex-col w-64 rounded-tr-3xl overflow-hidden">
    <!-- Sidebar header -->
    <div class="h-16 flex items-center justify-center">
      <h1 class="text-white font-bold text-xl">Curvy Sidebar</h1>
    </div>
    <!-- Sidebar links -->
    <ul class="flex-1 overflow-y-auto">
      <li class="px-6 py-2 hover:bg-indigo-700">
        <a href="#" class="text-white font-bold">Home</a>
      </li>
      <li class="px-6 py-2 hover:bg-indigo-700">
        <a href="#" class="text-white font-bold">About</a>
      </li>
      <li class="px-6 py-2 hover:bg-indigo-700">
        <a href="#" class="text-white font-bold">Contact</a>
      </li>
    </ul>
    <!-- Curved shape -->
    <div class="absolute bottom-0 left-0 right-0 h-16">
      <svg viewBox="0 0 1440 320">
        <path fill="#1F2937" fill-opacity="1" d="M0,128L60,144C120,160,240,192,360,186.7C480,181,600,139,720,138.7C840,139,960,181,1080,186.7C1200,192,1320,160,1380,144L1440,128L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z"></path>
      </svg>
    </div>
  </div>
  <!-- Content area -->
  <div class="flex-1 overflow-auto">
    <!-- Content goes here -->
  </div>
</div>

Step 3: Customize the appearance

Finally, we can customize the appearance of the curvy sidebar by changing the background color, font size, and other properties using Tailwind CSS classes. Here is the updated HTML code:

<div class="h-screen flex overflow-hidden bg-gray-100">
  <!-- Sidebar -->
  <div class="relative bg-purple-700 flex-shrink-0 flex flex-col w-64 rounded-tr-3xl overflow-hidden">
    <!-- Sidebar header -->
    <div class="h-16 flex items-center justify-center">
      <h1 class="text-white font-bold text-2xl">Curvy Sidebar</h1>
    </div>
    <!-- Sidebar links -->
    <ul class="flex-1 overflow-y-auto">
      <li class="px-6 py-2 hover:bg-purple-800">
        <a href="#" class="text-white font-bold">Home</a>
      </li>
      <li class="px-6 py-2 hover:bg-purple-800">
        <a href="#" class="text-white font-bold">About</a>
      </li>
      <li class="px-6 py-2 hover:bg-purple-800">
        <a href="#" class="text-white font-bold">Contact</a>
      </li>
    </ul>
    <!-- Curved shape -->
    <div class="absolute bottom-0 left-0 right-0 h-16">
      <svg viewBox="0 0 1440 320">
        <path fill="#1F2937" fill-opacity="1" d="M0,128L60,144C120,160,240,192,360,186.7C480,181,600,139,720,138.7C840,139,960,181,1080,186.7C1200,192,1320,160,1380,144L1440,128L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z"></path>
      </svg>
    </div>
  </div>
  <!-- Content area -->
  <div class="flex-1 overflow-auto">
    <!-- Content goes here -->
  </div>
</div>

Conclusion

In this article, we have learned how to create a curvy sidebar UI component using Tailwind CSS. We have seen how Tailwind CSS provides a set of pre-defined CSS classes that can be used to create complex shapes and styles. By following the steps outlined in this article, you can easily create a unique and elegant curvy sidebar for your web application.