- Published on
How to Make A Sidebar With Tailwind CSS?
- What is Tailwind CSS?
- The description of Sidebar ui component
- Why use Tailwind CSS to create a Sidebar ui component?
- The preview of Sidebar ui component
- The source code of Sidebar ui component
- How to create a Sidebar with Tailwind CSS?
- Conclusion
What is Tailwind CSS?
Tailwind CSS is a utility-first CSS framework that allows you to rapidly build custom user interfaces. It provides a set of pre-defined classes that you can use to style your HTML elements. With Tailwind CSS, you can easily create responsive and mobile-first designs.
The description of Sidebar ui component
A sidebar is a vertical panel that is typically placed on the left or right side of a web page. It is commonly used to display navigation links, social media icons, or other important information. A sidebar is a popular UI component that can enhance the user experience of your website.
Why use Tailwind CSS to create a Sidebar ui component?
Tailwind CSS provides a set of pre-defined classes that can be used to create a sidebar with ease. With Tailwind CSS, you don't have to write custom CSS for every element of the sidebar. Instead, you can use pre-defined classes to style your sidebar.
The preview of Sidebar ui component
To create a sidebar with Tailwind CSS, you can use the following classes:
bg-gray-800
: sets the background color of the sidebar to gray.text-white
: sets the text color of the sidebar to white.w-64
: sets the width of the sidebar to 64 pixels.pt-5
: adds 5 pixels of padding to the top of the sidebar.pb-4
: adds 4 pixels of padding to the bottom of the sidebar.px-4
: adds 4 pixels of padding to the left and right of the sidebar.flex
: sets the display property of the sidebar to flex.flex-col
: sets the flex-direction property of the sidebar to column.
Free download of the Sidebar's source code
The source code of Sidebar ui component
To create a sidebar with Tailwind CSS, you can use the following HTML code:
<div class="bg-gray-800 text-white w-64 pt-5 pb-4 px-4 flex flex-col">
<a href="#" class="text-white font-bold text-xl">My Website</a>
<div class="mt-5">
<a href="#" class="block text-gray-400 hover:text-white">Dashboard</a>
<a href="#" class="block text-gray-400 hover:text-white mt-2">Team</a>
<a href="#" class="block text-gray-400 hover:text-white mt-2">Projects</a>
<a href="#" class="block text-gray-400 hover:text-white mt-2">Calendar</a>
</div>
</div>
<div class="flex flex-wrap bg-gray-100 w-full h-screen">
<div class="w-3/12 bg-white rounded p-3 shadow-lg">
<div class="flex items-center space-x-4 p-2 mb-5">
<img class="h-12 rounded-full" src="http://www.gravatar.com/avatar/2acfb745ecf9d4dccb3364752d17f65f?s=260&d=mp" alt="James Bhatta">
<div>
<h4 class="font-semibold text-lg text-gray-700 capitalize font-poppins tracking-wide">James Bhatta</h4>
<span class="text-sm tracking-wide flex items-center space-x-1">
<svg class="h-4 text-green-500" 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="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
</svg><span class="text-gray-600">Verified</span>
</span>
</div>
</div>
<ul class="space-y-2 text-sm">
<li>
<a href="#" class="flex items-center space-x-3 text-gray-700 p-2 rounded-md font-medium hover:bg-gray-200 bg-gray-200 focus:shadow-outline">
<span class="text-gray-600">
<svg class="h-5" 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="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
</svg>
</span>
<span>Dashboard</span>
</a>
</li>
<li>
<a href="#" class="flex items-center space-x-3 text-gray-700 p-2 rounded-md font-medium hover:bg-gray-200 focus:bg-gray-200 focus:shadow-outline">
<span class="text-gray-600">
<svg class="h-5" 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="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path>
</svg>
</span>
<span>Notifications</span>
</a>
</li>
<li>
<a href="#" class="flex items-center space-x-3 text-gray-700 p-2 rounded-md font-medium hover:bg-gray-200 focus:bg-gray-200 focus:shadow-outline">
<span class="text-gray-600">
<svg class="h-5" 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="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"></path>
</svg>
</span>
<span>Personal messages</span>
</a>
</li>
<li>
<a href="#" class="flex items-center space-x-3 text-gray-700 p-2 rounded-md font-medium hover:bg-gray-200 focus:bg-gray-200 focus:shadow-outline">
<span class="text-gray-600">
<svg class="h-5" 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="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
</svg>
</span>
<span>My profile</span>
</a>
</li>
<li>
<a href="#" class="flex items-center space-x-3 text-gray-700 p-2 rounded-md font-medium hover:bg-gray-200 focus:bg-gray-200 focus:shadow-outline">
<span class="text-gray-600">
<svg class="h-5" 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="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
</svg>
</span>
<span>My orders</span>
</a>
</li>
<li>
<a href="" class="flex items-center space-x-3 text-gray-700 p-2 rounded-md font-medium hover:bg-gray-200 focus:bg-gray-200 focus:shadow-outline">
<span class=" text-gray-600">
<svg class="h-5" 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.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
</svg>
</span>
<span>My wishlist</span>
</a>
</li>
<li>
<a href="#" class="flex items-center space-x-3 text-gray-700 p-2 rounded-md font-medium hover:bg-gray-200 focus:bg-gray-200 focus:shadow-outline">
<span class="text-gray-600">
<svg class="h-5" 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="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"></path>
</svg>
</span>
<span>Settings</span>
</a>
</li>
<li>
<a href="#" class="flex items-center space-x-3 text-gray-700 p-2 rounded-md font-medium hover:bg-gray-200 focus:bg-gray-200 focus:shadow-outline">
<span class="text-gray-600">
<svg class="h-5" 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="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
</svg>
</span>
<span>Change password</span>
</a>
</li>
<li>
<a href="#" class="flex items-center space-x-3 text-gray-700 p-2 rounded-md font-medium hover:bg-gray-200 focus:bg-gray-200 focus:shadow-outline">
<span class="text-gray-600">
<svg class="h-5" 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>
<span>Logout</span>
</a>
</li>
</ul>
</div>
<div class="w-9/12">
<div class="p-4 text-gray-500">
Content here...
</div>
</div>
</div>
How to create a Sidebar with Tailwind CSS?
- First, create a new HTML file and add the following code:
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css">
</head>
<body>
<div class="flex">
<div class="bg-gray-800 text-white w-64 pt-5 pb-4 px-4 flex flex-col">
<a href="#" class="text-white font-bold text-xl">My Website</a>
<div class="mt-5">
<a href="#" class="block text-gray-400 hover:text-white">Dashboard</a>
<a href="#" class="block text-gray-400 hover:text-white mt-2">Team</a>
<a href="#" class="block text-gray-400 hover:text-white mt-2">Projects</a>
<a href="#" class="block text-gray-400 hover:text-white mt-2">Calendar</a>
</div>
</div>
<div class="flex-1">
<h1>Welcome to my website</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus euismod, nulla vel tincidunt ultrices, nisl risus tristique risus, at consequat velit quam in risus.</p>
</div>
</div>
</body>
</html>
- Save the HTML file and open it in your web browser. You should see a sidebar on the left side of the page.
Conclusion
In this article, we have learned how to create a sidebar with Tailwind CSS. Tailwind CSS provides a set of pre-defined classes that can be used to style your HTML elements. With Tailwind CSS, you can easily create responsive and mobile-first designs. By using the classes provided by Tailwind CSS, you can create a sidebar with ease.