How to Create a Responsive React Sidebar Design Using Tailwind CSS.
By Emmanuel Ovuoba - Product Engineer at Windframe
Making a sidebar responsive in a React app can improve how people use it, especially in complicated apps. Tailwind CSS can make styling easier and more flexible because it focuses on utility first. This blog will show you how to make a responsive sidebar in a React app with Tailwind CSS. We'll go over everything from setting up to implementing it, so both new and experienced developers can learn from it.
Table of Content
- Introduction
- Creating Tailwind React Application
- Installing Tailwind to react
- Creating the navbar Component
- Creating the React Tailwind Sidebar Components
- Other Examples of Tailwind Responsive Sidebar
Introduction
Creating a user-friendly React sidebar using Tailwind CSS can enhance your web app's usability. Tailwind CSS is a framework that simplifies web styling, allowing for the creation of responsive interfaces. By merging React and Tailwind CSS, you can design an attractive and intuitive sidebar. This guide outlines the steps for creating an intuitive React sidebar with Tailwind CSS, including customization tips. The resulting sidebar will be responsive, interactive, and tailored to your specific requirements.
The react sidebar will look like the image below
Creating Tailwind React Application
Setup
React is the framework of choice that we will use today to build this responsive sidebar. We are also going to use Tailwind css for styling our sidebar. let's go ahead and install our react application
Bash
1npx create-react-app Tailwind-sidebar
Installing Tailwind CSS to React
The next step is to install Tailwind css to our project
Bash
1npm install -D tailwindcss postcss autoprefixer2npx tailwindcss init -p
Configuring Your path
Inside the tailwind.config.js file replace the content of the file with the code below.
JS
1module.exports = {2 content: ["./src/**/*.{js,jsx,ts,tsx}"],3 theme: {4 extend: {},5 },6 plugins: [],7};
Adding Tailwind CSS to the styling file
Create a CSS file that will contain all the Tailwind utility classes. Create a file called tailwind.css in the src/ directory. This file should contain the following:
CSS
1@tailwind base;23@tailwind components;45@tailwind utilities;
Creating the Navbar Component
The first thing we will create is a navbar component that will contain a notification and profile of a user.
JS
1function Navbar() {2 return (3 <div>4 <div className="pt-0 pr-0 pb-0 pl-0 mt-0 mr-0 mb-0 ml-0"></div>5 <div className="bg-white">6 <div className="flex-col flex">7 <div className="w-full border-b-2 border-gray-200">8 <div className="bg-white h-16 justify-between items-center mx-auto px-4 flex">9 <div>10 <img11 src="https://res.cloudinary.com/speedwares/image/upload/v1659284687/windframe-logo-main_daes7r.png"12 className="block btn- h-8 w-auto"13 alt=""14 />15 </div>16 <div className="lg:block mr-auto ml-40 hidden relative max-w-xs">17 <p className="pl-3 items-center flex absolute inset-y-0 left-0 pointer-events-none">18 <span className="justify-center items-center flex">19 <span className="justify-center items-center flex">20 <span className="items-center justify-center flex">21 <svg22 className="w-5 h-5 text-gray-400"23 fill="none"24 viewbox="0 0 24 24"25 stroke="currentColor"26 stroke-width="2"27 >28 <path29 stroke-linecap="round"30 stroke-linejoin="round"31 d="M21 21l-6-6m2-5a7 7 032 11-14 0 7 7 0 0114 0z"33 />34 </svg>35 </span>36 </span>37 </span>38 </p>39 <input40 placeholder="Type to search"41 type="search"42 className="border border-gray-300 focus:ring-indigo-60043 focus:border-indigo-600 sm:text-sm w-full rounded-lg pt-2 pb-2 pl-10 px-3 py-2"44 />45 </div>46 <div className="md:space-x-6 justify-end items-center ml-auto flex space-x-3">47 <div className="relative">48 <p49 className="pt-1 pr-1 pb-1 pl-1 bg-white text-gray-700 rounded-full transition-all duration-20050 hover:text-gray-900 focus:outline-none hover:bg-gray-100"51 >52 <span className="items-center justify-center flex">53 <svg54 xmlns="http://www.w3.org/2000/svg"55 width="1.2rem"56 height="1.2rem"57 viewbox="0 0 456.147 456.147"58 style={{ enableBackground: "new 0 0 456.147 456.147" }}59 >60 <g>61 <path d="M445.666,4.445c-4.504-4.858-11.756-5.954-17.211-2.19L12.694,290.14c-3.769,2.609-5.878,7.012-5.555,11.586 c0.323,4.574,3.041,8.635,7.139,10.686l95.208,47.607l37.042,86.43c1.78,4.156,5.593,7.082,10.064,7.727 c0.621,0.091,1.242,0.136,1.856,0.136c3.833,0,7.506-1.697,9.989-4.701l38.91-46.994l107.587,52.227 c1.786,0.867,3.725,1.306,5.663,1.306c1.836,0,3.674-0.393,5.384-1.171c3.521-1.604,6.138-4.694,7.146-8.432L448.37,18.128 C449.314,14.629,449.878,8.988,445.666,4.445z M343.154,92.883L116.681,334.604l-71.208-35.603L343.154,92.883z M162.003,416.703 l-27.206-63.48L359.23,113.665L197.278,374.771c-0.836,0.612-1.634,1.305-2.331,2.146L162.003,416.703z M312.148,424.651 l-88.604-43.014L400.427,96.462L312.148,424.651z" />62 </g>63 </svg>64 </span>65 </p>66 </div>67 <div className="relative">68 <p69 className="pt-1 pr-1 pb-1 pl-1 bg-white text-gray-700 rounded-full transition-all duration-20070 hover:text-gray-900 focus:outline-none hover:bg-gray-100"71 >72 <span className="justify-center items-center flex">73 <span className="justify-center items-center flex">74 <span className="items-center justify-center flex">75 <svg76 className="w-6 h-6"77 xmlns="http://www.w3.org/2000/svg"78 fill="none"79 viewbox="0 0 24 24"80 stroke="currentColor"81 stroke-width="2"82 >83 <path84 stroke-linecap="round"85 stroke-linejoin="round"86 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-487 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-1m688 0H9"89 />90 </svg>91 </span>92 </span>93 </span>94 </p>95 <p96 className="px-1.5 py-0.5 font-semibold text-xs items-center bg-indigo-600 text-white rounded-full inline-flex97 absolute -top-px -right-1"98 >99 2100 </p>101 </div>102 <div className="justify-center items-center flex relative">103 <img104 src="https://static01.nyt.com/images/2019/11/08/world/08quebec/08quebec-superJumbo.jpg"105 className="object-cover btn- h-9 w-9 rounded-full mr-2 bg-gray-300"106 alt=""107 />108 <p className="font-semibold text-sm">Marrie Currie</p>109 </div>110 </div>111 </div>112 </div>113 </div>114 </div>115 </div>116 );117}118119export default Navbar;
The navbar component will look like the image below.
After this we can go ahead to create the Tailwind sidebar component in react.
Creating the React Tailwind Sidebar Component
Creating the react sidebar component will enable us define the structure of our sidbar compoenent before we can add some styling to it to enable it be responsive.
JS
1const Sidebar = () => {2 return (3 <div>4 <div>5 </div>6<div >7 <div >8 <div>9 <div>10 <div>11 <img src="https://res.cloudinary.com/speedwares/image/upload/v1659284687/windframe-logo-main_daes7r.png">12 </div>13 <div>14 <p>15 <span>16 <span>17 <span>18 <svg fill="none" viewbox="0 0 24 24" stroke="currentColor"19 stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 020 11-14 0 7 7 0 0114 0z"></svg>21 </span>22 </span>23 </span>24 </p>25 <input placeholder="Type to search" type="search"/>26 </div>27 <div>28 <div >29 <p>30 <span>31 <svg xmlns="http://www.w3.org/2000/svg" width="1.2rem" height="1.2rem" viewbox="0 0 456.147 456.147"32 style={{enableBackground: 'new 0 0 456.147 456.147'}}><g><path33 d="M445.666,4.445c-4.504-4.858-11.756-5.954-17.211-2.19L12.694,290.14c-3.769,2.609-5.878,7.012-5.555,11.586 c0.323,4.574,3.041,8.635,7.139,10.686l95.208,47.607l37.042,86.43c1.78,4.156,5.593,7.082,10.064,7.727 c0.621,0.091,1.242,0.136,1.856,0.136c3.833,0,7.506-1.697,9.989-4.701l38.91-46.994l107.587,52.227 c1.786,0.867,3.725,1.306,5.663,1.306c1.836,0,3.674-0.393,5.384-1.171c3.521-1.604,6.138-4.694,7.146-8.432L448.37,18.128 C449.314,14.629,449.878,8.988,445.666,4.445z M343.154,92.883L116.681,334.604l-71.208-35.603L343.154,92.883z M162.003,416.703 l-27.206-63.48L359.23,113.665L197.278,374.771c-0.836,0.612-1.634,1.305-2.331,2.146L162.003,416.703z M312.148,424.651 l-88.604-43.014L400.427,96.462L312.148,424.651z"></g></svg>34 </span>35 </p>36 </div>37 <div>38 <p>39 <span>40 <span>41 <span>42 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24"43 stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round"44 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-445 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-1m646 0H9"></svg>47 </span>48 </span>49 </span>50 </p>51 <p>2</p>52 </div>53 <div>54 <img src="https://static01.nyt.com/images/2019/11/08/world/08quebec/08quebec-superJumbo.jpg">55 <p>Marrie Currie</p>56 </div>57 </div>58 </div>59 </div>60 <div>61 <div>62 <div>63 <div>64 <div>65 <div>66 <a href="#">67 <span >68 <span>69 <span>70 <span>71 <svg className="flex-shrink-0 w-5 h-5 mr-4" xmlns="http://www.w3.org/2000/svg" fill="none"72 viewbox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round"73 stroke-linejoin="round" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a174 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>75 </span>76 </span>77 </span>78 </span>79 <span>Dashboard</span>80 </a>81 <a href="#">82 <span>83 <span>84 <span>85 <span>86 <svg width="24" height="24" viewbox="0 0 24 24" fill="none"87 xmlns="http://www.w3.org/2000/svg"><path d="M17 9L13.9558 13.5662C13.5299 14.2051 12.572888 14.1455 12.2294 13.4587L11.7706 12.5413C11.4272 11.8545 10.4701 11.7949 10.0442 12.4338L789 17" stroke="#4F4F4F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect90 x="3" y="3" width="18" height="18" rx="2" stroke="#4F4F4F" stroke-width="2"></svg>91 </span>92 </span>93 </span>94 </span>95 <span>About</span>96 </a>97 <a href="#">98 <span>99 <span>100 <span>101 <span>102 <svg width="24" height="24" viewbox="0 0 24 24" fill="none"103 xmlns="http://www.w3.org/2000/svg"><path d="M8 10L8 16" stroke="#4F4F4F" stroke-width="2"104 stroke-linecap="round" stroke-linejoin="round"><path d="M12 12V16" stroke="#4F4F4F"105 stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 8V16"106 stroke="#4F4F4F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect107 x="3" y="4" width="18" height="16" rx="2" stroke="#4F4F4F" stroke-width="2"></svg>108 </span>109 </span>110 </span>111 </span>112 <span>Hero</span>113 </a>114 </div>115 <div>116 <p>Data</p>117 <div>118 <a href="#">119 <span>120 <span>121 <span>122 <span>123 <svg width="24" height="24" viewbox="0 0 24 24" fill="none"124 xmlns="http://www.w3.org/2000/svg"><ellipse cx="12" cy="7" rx="7" ry="3"125 stroke="#4F4F4F" stroke-width="2"></svg>126 </span>127 </span>128 </span>129 </span>130 <span>Folders</span>131 </a>132 <a href="#">133 <span >134 <span>135 <span>136 <span>137 <svg width="24" height="24" viewbox="0 0 24 24" fill="none"138 xmlns="http://www.w3.org/2000/svg"><path d="M6.90112 11.8461C7.55156 9.56955 9.63235 8139 12 8V8C14.3676 8 16.4484 9.56954 17.0989 11.8461L17.6571 13.7998C17.8843 14.5951 18.2336140 15.3504 18.6924 16.0386L18.8012 16.2018C18.9408 16.4111 19.0105 16.5158 19.045141 16.5932C19.3105 17.1894 18.943 17.8759 18.2997 17.9857C18.2162 18 18.0904 18 17.8388142 18H6.16116C5.90958 18 5.78379 18 5.70027 17.9857C5.05697 17.8759 4.68952 17.1894 4.955143 16.5932C4.98947 16.5158 5.05924 16.4111 5.19879 16.2018L5.30758 16.0386C5.76642 15.3504144 6.11569 14.5951 6.34293 13.7998L6.90112 11.8461Z" fill="#4F4F4F"><path d="M11 9L12 3"145 stroke="#4F4F4F" stroke-width="2" stroke-linecap="round"><path d="M13 9L12 3"146 stroke="#4F4F4F" stroke-width="2" stroke-linecap="round"><path d="M12.5 21H11.5"147 stroke="#4F4F4F" stroke-width="2" stroke-linecap="round"></svg>148 </span>149 </span>150 </span>151 </span>152 <span>Alerts</span>153 </a>154 <a href="#">155 <span>156 <span>157 <span>158 <span>159 <svg xmlns="http://www.w3.org/2000/svg" fill="none"160 viewbox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round"161 stroke-linejoin="round" d="M16 8v8m-4-5v5m-4-2v2m-2 4h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2162 2 0 00-2 2v12a2 2 0 002 2z"></svg>163 </span>164 </span>165 </span>166 </span>167 <span>Statistics</span>168 <span >New</span>169 </a>170 </div>171 </div>172 <div>173 <p >Contact</p>174 <div>175 <a href="#">176 <span>177 <span >178 <span >179 <span >180 <svg xmlns="http://www.w3.org/2000/svg" fill="none"181 viewbox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round"182 stroke-linejoin="round" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0183 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0184 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></svg>185 </span>186 </span>187 </span>188 </span>189 <span>Forms</span>190 <span>15</span>191 </a>192 <a href="#">193 <span>194 <span >195 <span >196 <span >197 <svg width="24" height="24" viewbox="0 0 24 24" fill="none"198 xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="10" stroke="#4F4F4F"199 stroke-width="2" stroke-linecap="round"><path d="M7.88124 15.7559C8.37391 16.1826200 9.02309 16.4909 9.72265 16.6928C10.4301 16.897 11.2142 17 12 17C12.7858 17 13.5699201 16.897 14.2774 16.6928C14.9769 16.4909 15.6261 16.1826 16.1188 15.7559" stroke="#4F4F4F"202 stroke-width="2" stroke-linecap="round"><circle cx="9" cy="10" r="1.25" fill="#4F4F4F"203 stroke="#4F4F4F" stroke-width="0.5" stroke-linecap="round"><circle cx="15" cy="10"204 r="1.25" fill="#4F4F4F" stroke="#4F4F4F" stroke-width="0.5"205 stroke-linecap="round"></svg>206 </span>207 </span>208 </span>209 </span>210 <span>Agents</span>211 </a>212 <a href="#">213 <span>214 <span >215 <span >216 <span>217 <svg xmlns="http://www.w3.org/2000/svg" fill="none"218 viewbox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round"219 stroke-linejoin="round" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0220 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"></svg>221 </span>222 </span>223 </span>224 </span>225 <span>Customers</span>226 </a>227 </div>228 </div>229 </div>230 <div>231 <div >232 <a href="#" >233 <span>234 <span>235 <span>236 <span >237 <svg xmlns="http://www.w3.org/2000/svg" fill="none"238 viewbox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round"239 stroke-linejoin="round" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0240 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756241 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0242 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0243 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0244 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0245 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"><path246 stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016247 0z"></svg>248 </span>249 </span>250 </span>251 </span>252 <span>Settings</span>253 </a>254 <a href="#">255 <span>256 <span >257 <span >258 <span >259 <svg width="24" height="24" viewbox="0 0 24 24" fill="none"260 xmlns="http://www.w3.org/2000/svg"><path d="M8 18.9282C9.21615 19.6303 10.5957 20 12261 20C13.4043 20 14.7838 19.6303 16 18.9282C17.2162 18.2261 18.2261 17.2162 18.9282262 16C19.6303 14.7838 20 13.4043 20 12C20 10.5957 19.6303 9.21615 18.9282 8C18.2261 6.78385263 17.2162 5.77394 16 5.0718C14.7838 4.36965 13.4043 4 12 4C10.5957 4 9.21615 4.36965 8264 5.0718" stroke="#4F4F4F" stroke-width="2"><path d="M2 12L1.21913 11.3753L0.719375265 12L1.21913 12.6247L2 12ZM11 13C11.5523 13 12 12.5523 12 12C12 11.4477 11.5523 11 11266 11V13ZM5.21913 6.3753L1.21913 11.3753L2.78087 12.6247L6.78087 7.6247L5.21913267 6.3753ZM1.21913 12.6247L5.21913 17.6247L6.78087 16.3753L2.78087 11.3753L1.21913 12.6247ZM2268 13H11V11H2V13Z" fill="#4F4F4F"></svg>269 </span>270 </span>271 </span>272 </span>273 <span>Logout</span>274 </a>275 </div>276 </div>277 </div>278 </div>279 </div>280 <div>281 <div>282 <div ></div>283 </div>284 </div>285 </div>286 </div>287</div></div>288 );289 };
Adding the styles to the sidebar Component
The sidebar component doesn't look so appealling at this stage. In order to make it more responsive and Intuitive, we are going to add some tailwind css classes ww initially installed.
JS
1function Sidebar() {2 return (3 <div>4 <div className="pt-0 pr-0 pb-0 pl-0 mt-0 mr-0 mb-0 ml-0"></div>5 <div className="bg-white"></div>6 <div className="bg-white">7 <div className="flex-col flex">8 <div className="w-full border-b-2 border-gray-200"></div>9 <div className="flex bg-gray-100 overflow-x-hidden">10 <div className="bg-white lg:flex md:w-64 md:flex-col hidden">11 <div className="flex-col pt-5 flex overflow-y-auto">12 <div className="h-full flex-col justify-between px-4 flex">13 <div className="space-y-4">14 <div className="bg-top bg-cover space-y-1">15 <a16 href="#"17 className="font-medium text-sm items-center rounded-lg text-gray-900 px-4 py-2.5 flex18 transition-all duration-200 hover:bg-gray-200 group cursor-pointer"19 >20 <span className="justify-center items-center flex">21 <span className="justify-center items-center flex">22 <span className="justify-center items-center flex">23 <span className="items-center justify-center flex">24 <svg25 className="flex-shrink-0 w-5 h-5 mr-4"26 xmlns="http://www.w3.org/2000/svg"27 fill="none"28 viewbox="0 0 24 24"29 stroke="currentColor"30 stroke-width="2"31 >32 <path33 stroke-linecap="round"34 stroke-linejoin="round"35 d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a136 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"37 />38 </svg>39 </span>40 </span>41 </span>42 </span>43 <span>Dashboard</span>44 </a>45 <a46 href="#"47 className="font-medium text-sm items-center rounded-lg text-gray-900 px-4 py-2.5 block48 transition-all duration-200 hover:bg-gray-200 group cursor-pointer"49 >50 <span className="justify-center items-center flex">51 <span className="justify-center items-center flex">52 <span className="justify-center items-center flex">53 <span className="items-center justify-center flex">54 <svg55 className="mr-4"56 width="24"57 height="24"58 viewbox="0 0 24 24"59 fill="none"60 xmlns="http://www.w3.org/2000/svg"61 />62 <path63 d="M17 9L13.9558 13.5662C13.5299 14.2051 12.572864 14.1455 12.2294 13.4587L11.7706 12.5413C11.4272 11.8545 10.4701 11.7949 10.0442 12.4338L765 17"66 stroke="#4F4F4F"67 stroke-width="2"68 stroke-linecap="round"69 stroke-linejoin="round"70 />71 <svg72 x="3"73 y="3"74 width="18"75 height="18"76 rx="2"77 stroke="#4F4F4F"78 stroke-width="2"79 ></svg>80 </span>81 </span>82 </span>83 </span>84 <span>About</span>85 </a>86 <a87 href="#"88 className="font-medium text-sm items-center rounded-lg text-gray-900 px-4 py-2.5 flex89 transition-all duration-200 hover:bg-gray-200 group cursor-pointer"90 >91 <span className="justify-center items-center flex">92 <span className="justify-center items-center flex">93 <span className="justify-center items-center flex">94 <span className="items-center justify-center flex">95 <svg96 className="mr-4"97 width="24"98 height="24"99 viewbox="0 0 24 24"100 fill="none"101 xmlns="http://www.w3.org/2000/svg"102 />103 <path104 d="M8 10L8 16"105 stroke="#4F4F4F"106 stroke-width="2"107 stroke-linecap="round"108 stroke-linejoin="round"109 />110 <path111 d="M12 12V16"112 stroke="#4F4F4F"113 stroke-width="2"114 stroke-linecap="round"115 stroke-linejoin="round"116 />117 <path118 d="M16 8V16"119 stroke="#4F4F4F"120 stroke-width="2"121 stroke-linecap="round"122 stroke-linejoin="round"123 />124 <svg125 x="3"126 y="4"127 width="18"128 height="16"129 rx="2"130 stroke="#4F4F4F"131 stroke-width="2"132 ></svg>133 </span>134 </span>135 </span>136 </span>137 <span>Hero</span>138 </a>139 </div>140 <div>141 <p className="px-4 font-semibold text-xs tracking-widest text-gray-400 uppercase">142 Data143 </p>144 <div className="mt-4 bg-top bg-cover space-y-1">145 <a146 href="#"147 className="font-medium text-sm items-center rounded-lg text-gray-900 px-4 py-2.5 block148 transition-all duration-200 hover:bg-gray-200 group cursor-pointer"149 >150 <span className="justify-center items-center flex">151 <span className="justify-center items-center flex">152 <span className="justify-center items-center flex">153 <span className="items-center justify-center flex">154 <svg155 className="mr-4"156 width="24"157 height="24"158 viewbox="0 0 24 24"159 fill="none"160 xmlns="http://www.w3.org/2000/svg"161 >162 <ellipse163 cx="12"164 cy="7"165 rx="7"166 ry="3"167 stroke="#4F4F4F"168 stroke-width="2"169 />170 </svg>171 </span>172 </span>173 </span>174 </span>175 <span>Folders</span>176 </a>177 <a178 href="#"179 className="font-medium text-sm items-center rounded-lg text-gray-900 px-4 py-2.5 block180 transition-all duration-200 hover:bg-gray-200 group cursor-pointer"181 >182 <span className="justify-center items-center flex">183 <span className="justify-center items-center flex">184 <span className="justify-center items-center flex">185 <span className="items-center justify-center flex">186 <svg187 className="mr-4"188 width="24"189 height="24"190 viewbox="0 0 24 24"191 fill="none"192 xmlns="http://www.w3.org/2000/svg"193 />194 <path195 d="M6.90112 11.8461C7.55156 9.56955 9.63235 8196 12 8V8C14.3676 8 16.4484 9.56954 17.0989 11.8461L17.6571 13.7998C17.8843 14.5951 18.2336197 15.3504 18.6924 16.0386L18.8012 16.2018C18.9408 16.4111 19.0105 16.5158 19.045198 16.5932C19.3105 17.1894 18.943 17.8759 18.2997 17.9857C18.2162 18 18.0904 18 17.8388199 18H6.16116C5.90958 18 5.78379 18 5.70027 17.9857C5.05697 17.8759 4.68952 17.1894 4.955200 16.5932C4.98947 16.5158 5.05924 16.4111 5.19879 16.2018L5.30758 16.0386C5.76642 15.3504201 6.11569 14.5951 6.34293 13.7998L6.90112 11.8461Z"202 fill="#4F4F4F"203 />204 <path205 d="M11 9L12 3"206 stroke="#4F4F4F"207 stroke-width="2"208 stroke-linecap="round"209 />210 <path211 d="M13 9L12 3"212 stroke="#4F4F4F"213 stroke-width="2"214 stroke-linecap="round"215 />216 <path217 d="M12.5 21H11.5"218 stroke="#4F4F4F"219 stroke-width="2"220 stroke-linecap="round"221 />222 </span>223 </span>224 </span>225 </span>226 <span>Alerts</span>227 </a>228 <a229 href="#"230 className="font-medium text-sm items-center rounded-lg text-gray-900 px-4 py-2.5 flex231 transition-all duration-200 hover:bg-gray-200 group cursor-pointer"232 >233 <span className="justify-center items-center flex">234 <span className="justify-center items-center flex">235 <span className="justify-center items-center flex">236 <span className="items-center justify-center flex">237 <svg238 className="flex-shrink-0 w-5 h-5 mr-4"239 xmlns="http://www.w3.org/2000/svg"240 fill="none"241 viewbox="0 0 24 24"242 stroke="currentColor"243 stroke-width="2"244 >245 <path246 stroke-linecap="round"247 stroke-linejoin="round"248 d="M16 8v8m-4-5v5m-4-2v2m-2 4h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2249 2 0 00-2 2v12a2 2 0 002 2z"250 />251 </svg>252 </span>253 </span>254 </span>255 </span>256 <span>Statistics</span>257 <span258 className="px-2 py-0.5 items-center font-semibold text-xs ml-auto bg-indigo-50 text-indigo-600259 rounded-full uppercase border border-indigo-300 inline-flex"260 >261 New262 </span>263 </a>264 </div>265 </div>266 <div>267 <p className="px-4 font-semibold text-xs tracking-widest text-gray-400 uppercase">268 Contact269 </p>270 <div className="mt-4 bg-top bg-cover space-y-1">271 <a272 href="#"273 className="font-medium text-sm items-center rounded-lg text-gray-900 px-4 py-2.5 flex274 transition-all duration-200 hover:bg-gray-200 group cursor-pointer"275 >276 <span className="justify-center items-center flex">277 <span className="justify-center items-center flex">278 <span className="justify-center items-center flex">279 <span className="items-center justify-center flex">280 <svg281 className="flex-shrink-0 w-5 h-5 mr-4"282 xmlns="http://www.w3.org/2000/svg"283 fill="none"284 viewbox="0 0 24 24"285 stroke="currentColor"286 stroke-width="2"287 />288 <path289 stroke-linecap="round"290 stroke-linejoin="round"291 d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0292 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0293 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"294 />295 </span>296 </span>297 </span>298 </span>299 <span>Forms</span>300 <span301 className="px-2 py-0.5 items-center font-semibold text-xs ml-auto bg-gray-500 text-white302 rounded-full uppercase border border-transparent inline-flex"303 >304 15305 </span>306 </a>307 <a308 href="#"309 className="font-medium text-sm items-center rounded-lg text-gray-900 px-4 py-2.5 flex310 transition-all duration-200 hover:bg-gray-200 group cursor-pointer"311 >312 <span className="justify-center items-center flex">313 <span className="justify-center items-center flex">314 <span className="justify-center items-center flex">315 <span className="items-center justify-center flex">316 <svg317 className="mr-4"318 width="24"319 height="24"320 viewbox="0 0 24 24"321 fill="none"322 xmlns="http://www.w3.org/2000/svg"323 />324 <circle325 cx="12"326 cy="12"327 r="10"328 stroke="#4F4F4F"329 stroke-width="2"330 stroke-linecap="round"331 />332 <path333 d="M7.88124 15.7559C8.37391 16.1826334 9.02309 16.4909 9.72265 16.6928C10.4301 16.897 11.2142 17 12 17C12.7858 17 13.5699335 16.897 14.2774 16.6928C14.9769 16.4909 15.6261 16.1826 16.1188 15.7559"336 stroke="#4F4F4F"337 stroke-width="2"338 stroke-linecap="round"339 />340 <circle341 cx="9"342 cy="10"343 r="1.25"344 fill="#4F4F4F"345 stroke="#4F4F4F"346 stroke-width="0.5"347 stroke-linecap="round"348 />349 <circle350 cx="15"351 cy="10"352 r="1.25"353 fill="#4F4F4F"354 stroke="#4F4F4F"355 stroke-width="0.5"356 stroke-linecap="round"357 />358 </span>359 </span>360 </span>361 </span>362 <span>Agents</span>363 </a>364 <a365 href="#"366 className="font-medium text-sm items-center rounded-lg text-gray-900 px-4 py-2.5 flex367 transition-all duration-200 hover:bg-gray-200 group cursor-pointer"368 >369 <span className="justify-center items-center flex">370 <span className="justify-center items-center flex">371 <span className="justify-center items-center flex">372 <span className="items-center justify-center flex">373 <svg374 className="flex-shrink-0 w-5 h-5 mr-4"375 xmlns="http://www.w3.org/2000/svg"376 fill="none"377 viewbox="0 0 24 24"378 stroke="currentColor"379 stroke-width="2"380 />381 <path382 stroke-linecap="round"383 stroke-linejoin="round"384 d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0385 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"386 />387 </span>388 </span>389 </span>390 </span>391 <span>Customers</span>392 </a>393 </div>394 </div>395 </div>396 <div className="mt-12 pb-4">397 <div className="bg-top bg-cover space-y-1">398 <a399 href="#"400 className="font-medium text-sm items-center rounded-lg text-gray-900 px-4 py-2.5 flex401 transition-all duration-200 hover:bg-gray-200 group cursor-pointer"402 >403 <span className="justify-center items-center flex">404 <span className="justify-center items-center flex">405 <span className="justify-center items-center flex">406 <span className="items-center justify-center flex">407 <svg408 className="flex-shrink-0 w-5 h-5 mr-4"409 xmlns="http://www.w3.org/2000/svg"410 fill="none"411 viewbox="0 0 24 24"412 stroke="currentColor"413 stroke-width="2"414 />415 <path416 stroke-linecap="round"417 stroke-linejoin="round"418 d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0419 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756420 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0421 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0422 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0423 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0424 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"425 />426 <path427 stroke-linecap="round"428 stroke-linejoin="round"429 d="M15 12a3 3 0 11-6 0 3 3 0 016430 0z"431 />432 </span>433 </span>434 </span>435 </span>436 <span>Settings</span>437 </a>438 <a439 href="#"440 className="font-medium text-sm items-center rounded-lg text-gray-900 px-4 py-2.5 flex441 transition-all duration-200 hover:bg-gray-200 group cursor-pointer"442 >443 <span className="justify-center items-center flex">444 <span className="justify-center items-center flex">445 <span className="justify-center items-center flex">446 <span className="items-center justify-center flex">447 <svg448 className="mr-4"449 width="24"450 height="24"451 viewbox="0 0 24 24"452 fill="none"453 xmlns="http://www.w3.org/2000/svg"454 />455 <path456 d="M8 18.9282C9.21615 19.6303 10.5957 20 12457 20C13.4043 20 14.7838 19.6303 16 18.9282C17.2162 18.2261 18.2261 17.2162 18.9282458 16C19.6303 14.7838 20 13.4043 20 12C20 10.5957 19.6303 9.21615 18.9282 8C18.2261 6.78385459 17.2162 5.77394 16 5.0718C14.7838 4.36965 13.4043 4 12 4C10.5957 4 9.21615 4.36965 8460 5.0718"461 stroke="#4F4F4F"462 stroke-width="2"463 />464 <path465 d="M2 12L1.21913 11.3753L0.719375466 12L1.21913 12.6247L2 12ZM11 13C11.5523 13 12 12.5523 12 12C12 11.4477 11.5523 11 11467 11V13ZM5.21913 6.3753L1.21913 11.3753L2.78087 12.6247L6.78087 7.6247L5.21913468 6.3753ZM1.21913 12.6247L5.21913 17.6247L6.78087 16.3753L2.78087 11.3753L1.21913 12.6247ZM2469 13H11V11H2V13Z"470 fill="#4F4F4F"471 />472 </span>473 </span>474 </span>475 </span>476 <span>Logout</span>477 </a>478 </div>479 </div>480 </div>481 </div>482 </div>483 </div>484 </div>485 </div>486 </div>487 );488}489490export default Sidebar;
rendering the component on our APP
We can now go ahead to render it on our app so we can see what we have built so far.
JS
1import React from "react";2import ReactDOM from "react-dom/client";3import "./index.css";4import Navbar from "./Navbar";5import Sidebar from "./Sidebar";67const root = ReactDOM.createRoot(document.getElementById("root"));8root.render(9 <React.StrictMode>10 <Navbar />11 <Sidebar />12 </React.StrictMode>13);
Your Tailwind sidebar component should look like the image below
Other Examples of Tailwind Responsive Sidebar
HTML
1<div class="flex bg-gray-200 ">2 <div class="bg-gray-900 lg:flex md:w-64 md:flex-col">3 <div class="flex-col pt-5 flex overflow-y-auto">4 <div class="px-4 flex flex-col justify-between mb-10">5 <div class="flex items-center space-x-4 ">6 <img7 src="https://static01.nyt.com/images/2019/11/08/world/08quebec/08quebec-superJumbo.jpg"8 class="h-10 w-10 rounded-full bg-gray-500"9 alt="User"10 />11 <div>12 <p class="text-indigo-500 font-semibold">Marrie Currie</p>13 <p class="text-indigo-600 text-sm">Admin</p>14 </div>15 </div>16 <nav class="mt-10 space-y-2">17 <a18 href="#"19 class="flex items-center p-2 bg-indigo-500 text-gray-100 rounded-lg hover:bg-indigo-400"20 >21 <svg22 class="w-6 h-6 mr-3 text-gray-200"23 fill="none"24 stroke="currentColor"25 viewBox="0 0 24 24"26 xmlns="http://www.w3.org/2000/svg"27 >28 <path29 strokeLinecap="round"30 strokeLinejoin="round"31 strokeWidth="2"32 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"33 />34 </svg>35 <span class="text-gray-100">Dashboard</span>36 </a>37 <a38 href="#"39 class="flex items-center p-2 bg-indigo-500 text-gray-100 rounded-lg hover:bg-indigo-400"40 >41 <svg42 class="w-6 h-6 mr-3 text-gray-200"43 fill="none"44 stroke="currentColor"45 viewBox="0 0 24 24"46 xmlns="http://www.w3.org/2000/svg"47 >48 <path49 strokeLinecap="round"50 strokeLinejoin="round"51 strokeWidth="2"52 d="M8 10h.01M12 10h.01M16 10h.01M9 16h6m-7 4h8a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v11a2 2 0 002 2z"53 />54 </svg>55 <span class="text-gray-100">Projects</span>56 </a>57 <a58 href="#"59 class="flex items-center p-2 bg-indigo-500 text-gray-100 rounded-lg hover:bg-indigo-400"60 >61 <svg62 class="w-6 h-6 mr-3 text-gray-200"63 fill="none"64 stroke="currentColor"65 viewBox="0 0 24 24"66 xmlns="http://www.w3.org/2000/svg"67 >68 <path69 strokeLinecap="round"70 strokeLinejoin="round"71 strokeWidth="2"72 d="M3 7h18M3 12h18m-9 5h9"73 />74 </svg>75 <span class="text-gray-100">Reports</span>76 </a>77 <a78 href="#"79 class="flex items-center p-2 bg-indigo-500 text-gray-100 rounded-lg hover:bg-indigo-400"80 >81 <svg82 class="w-6 h-6 mr-3 text-gray-200"83 fill="none"84 stroke="currentColor"85 viewBox="0 0 24 24"86 xmlns="http://www.w3.org/2000/svg"87 >88 <path89 strokeLinecap="round"90 strokeLinejoin="round"91 strokeWidth="2"92 d="M5 13l4 4L19 7"93 />94 </svg>95 <span class="text-gray-100">Tasks</span>96 </a>97 </nav>98 <div class="mt-2 space-y-2">99 <a100 href="#"101 class="flex items-center p-2 bg-indigo-500 text-gray-100 rounded-lg hover:bg-indigo-400"102 >103 <svg104 class="w-6 h-6 mr-3 text-gray-200"105 fill="none"106 stroke="currentColor"107 viewBox="0 0 24 24"108 xmlns="http://www.w3.org/2000/svg"109 >110 <path111 strokeLinecap="round"112 strokeLinejoin="round"113 strokeWidth="2"114 d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"115 />116 <path117 strokeLinecap="round"118 strokeLinejoin="round"119 strokeWidth="2"120 d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"121 />122 </svg>123 <span class="text-gray-100">Settings</span>124 </a>125 <a126 href="#"127 class="flex items-center p-2 bg-indigo-500 text-gray-100 rounded-lg hover:bg-indigo-400"128 >129 <svg130 class="w-6 h-6 mr-3 text-gray-200"131 fill="none"132 stroke="currentColor"133 viewBox="0 0 24 24"134 xmlns="http://www.w3.org/2000/svg"135 >136 <path137 strokeLinecap="round"138 strokeLinejoin="round"139 strokeWidth="2"140 d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 11-6 0v-1m6-4V9a3 3 0 00-6 0v1"141 />142 </svg>143 <span class="text-gray-100">Logout</span>144 </a>145 </div>146 </div>147 </div>148 </div>149</div>
Prview
Conclusion
Creating a responsive React sidebar design using Tailwind CSS can be a great way to add more functionality to your website. It allows you to quickly create a simple, yet effective sidebar design that is easy to customize and maintain. With the help of Tailwind CSS, you can easily create a modern and responsive design that looks great on any device. It also provides you with a lot of flexibility, allowing you to quickly and easily customize your React sidebar design to match your website’s overall style and branding.
Windframe is an AI visual editor for rapidly building stunning web UIs & websites
Start building stunning web UIs & websites!
