Tailwind CSS List Group Components

Components

Tailwind CSS List Group Components - Madhuranjan UI

Explore a collection of stylish and functional list group components built with Tailwind CSS. These list groups enhance UI structure, improve readability, and offer a visually appealing organization of content. Fully responsive and supports both light and dark themes.

Default List Group

A simple and clean list group with default styling. It provides an intuitive layout for organizing content into structured lists. Fully responsive and supports both light and dark themes.

1 <div className="flex justify-center items-center p-5">
2      <div class="w-full max-w-sm bg-white dark:bg-neutral-900 text-neutral-900 dark:text-white  border border-neutral-300 dark:border-neutral-800 shadow-md">
3        <button class="w-full text-left px-4 py-3 border-b border-neutral-300 dark:border-neutral-800 hover:bg-neutral-100 dark:hover:bg-neutral-800 focus:outline-none transition">
4          Profile
5        </button>
6        <button class="w-full text-left px-4 py-3 border-b border-neutral-300 dark:border-neutral-800 hover:bg-neutral-100 dark:hover:bg-neutral-800 focus:outline-none transition">
7          Settings
8        </button>
9        <button class="w-full text-left px-4 py-3 hover:bg-neutral-100 dark:hover:bg-neutral-800 focus:outline-none transition">
10          Newsletter

Striped List Group

A striped list group that alternates background colors for better readability. Ideal for highlighting rows in a structured manner while keeping a clean design.

1 <div class="w-full max-w-sm bg-white dark:bg-neutral-900 text-neutral-900 dark:text-neutral-200 rounded-lg border border-neutral-300 dark:border-neutral-800 shadow-md overflow-hidden">
2    <button class="w-full text-left px-4 py-3 border-b border-neutral-300 dark:border-neutral-800 bg-neutral-100 dark:bg-gray-800 text-neutral-900 dark:text-neutral-200 hover:bg-neutral-200 dark:hover:bg-neutral-700 focus:outline-none transition">
3        Profile
4    </button>
5    <button class="w-full text-left px-4 py-3 border-b border-neutral-300 dark:border-neutral-800 bg-white dark:bg-neutral-900 text-neutral-900 dark:text-neutral-200 hover:bg-neutral-200 dark:hover:bg-neutral-700 focus:outline-none transition">
6        Settings
7    </button>
8    <button class="w-full text-left px-4 py-3 border-b border-neutral-300 dark:border-neutral-800 dark:bg-gray-800 bg-neutral-100  text-neutral-900 dark:text-neutral-200 hover:bg-neutral-200 dark:hover:bg-neutral-700 focus:outline-none transition">
9        Newsletter
10    </button>

List Group with Icons

This list group includes icons for better visual representation. Each item in the list is paired with an icon, making navigation and recognition easier for users.

Newsletter

Downloads

Team Account

1 <div className="flex justify-center items-center p-5 dark:bg-black">
2      <div class="w-full max-w-xs bg-white dark:bg-gray-900 text-gray-900 dark:text-white rounded-lg shadow-md">
3        <div class="flex items-center gap-3 px-4 py-3 border-b border-gray-300 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-800 cursor-pointer rounded-t-lg">
4          <svg
5            class="w-5 h-5 text-gray-900 dark:text-white"
6            xmlns="http://www.w3.org/2000/svg"
7            fill="none"
8            viewBox="0 0 24 24"
9            stroke="currentColor"
10          >

List Group with Badges

A list group that features badges to indicate status, notifications, or additional context. This component is useful for applications requiring dynamic data display.

1<div class="w-full max-w-xs bg-white dark:bg-gray-900 text-gray-900 dark:text-white shadow-md">
2    <button class="flex items-center justify-between w-full px-4 py-3 border-b border-gray-300 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-800 cursor-pointer focus:outline-none focus:ring-2 focus:ring-violet-500 dark:focus:ring-blue-500">
3        <span class="font-semibold">Dashboard</span>
4        <span class="bg-blue-600 text-white text-xs font-semibold px-2 py-1 rounded-full">New</span>
5    </button>
6    <button class="flex items-center justify-between w-full px-4 py-3 border-b border-gray-300 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-800 cursor-pointer focus:outline-none focus:ring-2 focus:ring-violet-500 dark:focus:ring-blue-500">
7        <span class="font-semibold">Messages</span>
8        <span class="bg-blue-600 text-white text-xs font-semibold px-2 py-1 rounded-full">5</span>
9    </button>
10    <button class="flex items-center justify-between w-full px-4 py-3 hover:bg-gray-100 dark:hover:bg-gray-800 cursor-pointer focus:outline-none focus:ring-2 focus:ring-violet-500 dark:focus:ring-blue-500">

Horizontal List Group

A horizontal list group that arranges list items in a single row. Ideal for navigation bars, tabbed layouts, or action menus while maintaining a clean and structured design.

1<div class="flex w-fit overflow-hidden rounded-lg border border-neutral-300 bg-white text-neutral-900 shadow-md dark:border-neutral-800 dark:bg-neutral-900 dark:text-neutral-200">
2  <button class="flex items-center gap-2 border-r border-neutral-300 bg-neutral-100 px-4 py-3 text-neutral-900 transition hover:bg-neutral-200 focus:outline-none dark:border-neutral-800 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700">
3    <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20"><path d="M10 2a6 6 0 00-6 6v2a3 3 0 01-3 3h14a3 3 0 01-3-3V8a6 6 0 00-6-6zM4 10V8a4 4 0 118 0v2H4z"></path></svg>
4    Profile
5  </button>
6  <button class="flex items-center gap-2 border-r border-neutral-300 bg-white px-4 py-3 text-neutral-900 transition hover:bg-neutral-200 focus:outline-none dark:border-neutral-800 dark:bg-neutral-900 dark:text-neutral-200 dark:hover:bg-neutral-700">
7    <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M4 3a1 1 0 00-1 1v12a1 1 0 001 1h12a1 1 0 001-1V4a1 1 0 00-1-1H4zm11 5H5v2h10V8zm0 4H5v2h10v-2z" clip-rule="evenodd"></path></svg>
8    Settings
9  </button>
10  <button class="flex items-center gap-2 border-r border-neutral-300 bg-neutral-100 px-4 py-3 text-neutral-900 transition hover:bg-neutral-200 focus:outline-none dark:border-neutral-800 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700">

List Group with Toggle and Badges

A list group that combines toggle switches and badges to display settings or statuses dynamically. This component is ideal for preference panels, security settings, and feature management.

Two-Factor Authentication

Auto Updates

Enabled

Privacy Mode

Limited

Dark Mode

1<div class="w-full max-w-md bg-white dark:bg-gray-900 text-gray-900 dark:text-white rounded-lg shadow-md p-4">
2    <!-- Item 1 -->
3    <div class="flex items-center justify-between py-3 border-b border-gray-300 dark:border-gray-700">
4        <div class="flex items-center gap-3">
5            <svg class="w-5 h-5 text-gray-700 dark:text-gray-300" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
6                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
7            </svg>
8            <span class="font-semibold">Two-Factor Authentication</span>
9        </div>
10        <label class="relative inline-flex items-center cursor-pointer">

List Group with Checkboxes

This list group includes checkbox selections, allowing users to select multiple items efficiently. Suitable for task management, multi-selection menus, and settings customization.

1<div class="w-full max-w-md bg-white dark:bg-neutral-900 text-neutral-900 dark:text-neutral-200 border border-neutral-300 dark:border-neutral-800 rounded-lg shadow-md">
2    <!-- List Item 1 -->
3    <label class="flex items-center gap-3 px-4 py-3 border-b border-neutral-300 dark:border-neutral-800 bg-neutral-100 dark:bg-neutral-800 hover:bg-neutral-200 dark:hover:bg-neutral-700 cursor-pointer">
4        <input type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600">
5        <span>Task Management</span>
6    </label>
7
8    <!-- List Item 2 -->
9    <label class="flex items-center gap-3 px-4 py-3 border-b border-neutral-300 dark:border-neutral-800 bg-white dark:bg-neutral-900 hover:bg-neutral-200 dark:hover:bg-neutral-700 cursor-pointer">
10        <input type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600">

KBD (Keyboard Shortcut)Popover