Tailwind Sidebar

侧边栏

sidebar

https://codepen.io/junchow/pen/GRoJPeo?editors=1000

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet">

<div class="container mx-auto my-12 p-12 bg-gray-100">  
<div class="mb-4 w-full md:w-1/4 border-t-4 border-red-400 rounded-b-lg rounded-t shadow-lg bg-white overflow-hidden">
  <div class="mt-4 mb-8 px-6 py-4">
    <div class="py-4 text-lg text-gray-700 tracking-wide">一级菜单</div>
    <div class="px-4 py-2 border-l-4 border-red-400 bg-red-100 cursor-pointer text-gray-800 flex items-center">
      <i class="fa fa-home"></i>
      <span class="pl-2">系统设置</span>
    </div>
    <div class="px-4 py-2 border-l-4 border-transparent cursor-pointer text-gray-800 flex items-center">
      <i class="fa fa-user"></i>
      <span class="pl-2">用户管理</span>
    </div>
    <div class="py-4 text-lg text-gray-700 tracking-wide">一级菜单</div>
    <div class="px-4 py-2 border-l-4 border-transparent cursor-pointer text-gray-800 flex items-center">
      <i class="fa fa-home"></i>
      <span class="pl-2">系统设置</span>
    </div>
    <div class="px-4 py-2 border-l-4 border-transparent cursor-pointer text-gray-800 flex items-center">
      <i class="fa fa-user"></i>
      <span class="pl-2">用户管理</span>
    </div>
  </div>
</div>
</div>

侧边栏

sidebar

<div class="mb-4 w-full md:w-1/4 shadow">
    <ul class="list-reset">
      <li>
        <a href="" class="block p-4 border-r-4 border-purple-400 text-base text-gray-gray-400 font-bold hover:border-purple-500 hover:bg-purple-100">商品管理</a>
      </li>
      <li>
        <a href="" class="block p-4 border-r-4 border-transparent text-base text-gray-gray-400 font-bold hover:border-purple-500 hover:bg-purple-100">系统管理</a>
      </li>
      <li>
        <a href="" class="block p-4 border-r-4 border-transparent text-base text-gray-gray-400 font-bold hover:border-purple-500 hover:bg-purple-100">分类管理</a>
      </li>
      <li>
        <a href="" class="block p-4 border-r-4 border-transparent text-base text-gray-gray-400 font-bold hover:border-purple-500 hover:bg-purple-100">联系我们</a>
      </li>
    </ul>
</div>