Responsive Sidebar Navigation with Active State

This demonstrates a clean and minimal sidebar navigation component built with Tailwind CSS. It uses flexbox to lay out the sidebar and list items vertically. The active page link has a different background and text color style for indication. Each link displays icons and notification badges aligned to the end of the list item using utility classes like ml-auto and flex. On hover, the links change background and text color for feedback. The component is responsive and mobile-friendly with the gap, padding, and font sizes set using text and spacing utilities. Overall, it provides a great starting point to build a sidebar nav that looks and works well on all viewports.