search results:

    License Free hosting Learn Playground Services Community
    • + D
    • Light
    • Dark
    • System
    logo Tailwind Elements
    • Getting started
      • Quick start
      • Tutorials
      • Optimization
      • Dark mode
      • Theming
      • Changelog
      • Contribute
    • Integrations
      • Angular
      • Django
      • Express
      • Laravel
      • Next
      • Nuxt
      • React
      • Remix
      • Solid
      • Svelte
      • Vue
    • Content & styles
      • Animations
      • Colors
      • Dividers
      • Figures
      • Headings
      • Hover effects
      • Icons
      • Images
      • Mask
      • Shadows
      • Typography
    • Navigation
      • Breadcrumbs
      • Footer
      • Headers
      • Mega menu
      • Navbar
      • Offcanvas
      • Pagination
      • Pills
      • Scrollspy
      • Sidenav
      • Tabs
    • Components
      • Accordion
      • Alerts
      • Avatar
      • Badges
      • Button group
      • Buttons
      • Cards
      • Carousel
      • Chips
      • Collapse
      • Dropdown
      • Gallery
      • Jumbotron
      • Link
      • List group
      • Modal
      • Notifications
      • Paragraphs
      • Placeholders
      • Popover
      • Progress
      • Rating
      • Scroll back to top button
      • Social buttons
      • Spinners
      • Stepper
      • Testimonials
      • Timeline
      • Toast
      • Tooltip
      • Video
      • Video carousel
    • Forms
      • Checkbox
      • Datepicker
      • File input
      • Form templates
      • Input Group
      • Inputs
      • Login form
      • Radio
      • Range
      • Registration form
      • Search
      • Select
      • Switch
      • Textarea
      • Timepicker
    • Data
      • Charts
      • Tables
    • Methods
      • Ripple
    • Design Blocks
      • Banners
      • Contact
      • Content
      • CTA
      • FAQ
      • Features
      • Headers
      • Hero / Intro sections
      • Logo clouds
      • Mega menu
      • News
      • Newsletter
      • Pricing
      • Projects
      • Stats
      • Team
      • Testimonials
    • Coming Soon
      • Angular
      • Builder
      • React
      • Templates
      • Vue
    • ResourcesNew
      • YouTube Channel
      • Private FB Group
      • Newsletter
      • UI Design course New

    List group

    Tailwind CSS List Group

    Use responsive listgroup component with helper examples for active link, disabled link, links styling, nav links & more. Free download, open-source license.


    Basic example

    The list groups are very useful and flexible component for displaying lists of elements in a beautiful manner.

    The most basic list group is an unordered list with list items and the proper classes. Build upon it with the options that follow.

    • An item
    • A second item
    • A third item
    • A fourth item
    • And a fifth one
    • HTML
            
                
          <ul class="w-96">
            <li
              class="w-full border-b-2 border-neutral-100 border-opacity-100 py-4 dark:border-opacity-50">
              An item
            </li>
            <li
              class="w-full border-b-2 border-neutral-100 border-opacity-100 py-4 dark:border-opacity-50">
              A second item
            </li>
            <li
              class="w-full border-b-2 border-neutral-100 border-opacity-100 py-4 dark:border-opacity-50">
              A third item
            </li>
            <li
              class="w-full border-b-2 border-neutral-100 border-opacity-100 py-4 dark:border-opacity-50">
              A fourth item
            </li>
            <li class="w-full py-4">And a fifth one</li>
          </ul>
          
            
        

    Hey there 👋 we want to make Tailwind Elements a community-driven project. It's open source and free, and we would like it to stay that way. If you enjoy it, help the project grow by sharing it with your peers. Every share counts, thank you!

    Share via Dev.to Share via Twitter Share via Facebook Share via Pinterest Share via Reddit Share via StumbleUpon Share via Vkontakte Share via Weibo Share via HackerNews Share via Gmail Share via Email

    Active items

    Use code below to indicate the current active selection.

    • An item
    • A second item
    • A third item
    • A fourth item
    • And a fifth one
    • HTML
            
                
          <ul class="w-96">
            <li class="w-full rounded-lg bg-primary-100 p-4 text-primary-600">
              An item
            </li>
            <li class="w-full p-4">A second item</li>
            <li class="w-full p-4">A third item</li>
            <li class="w-full p-4">A fourth item</li>
            <li class="w-full p-4">And a fifth one</li>
          </ul>
          
            
        

    Disabled items

    The class .text-neutral-* and .cursor-default is used to disable a specific item in the list group.

    • A disabled item
    • A second item
    • A third item
    • A fourth item
    • And a fifth one
    • HTML
            
                
          <ul class="w-96">
            <li
              class="w-full cursor-default border-b-2 border-neutral-100 border-opacity-100 py-4 text-neutral-500 dark:border-opacity-50">
              A disabled item
            </li>
            <li
              class="w-full border-b-2 border-neutral-100 border-opacity-100 py-4 dark:border-opacity-50">
              A second item
            </li>
            <li
              class="w-full border-b-2 border-neutral-100 border-opacity-100 py-4 dark:border-opacity-50">
              A third item
            </li>
            <li
              class="w-full border-b-2 border-neutral-100 border-opacity-100 py-4 dark:border-opacity-50">
              A fourth item
            </li>
            <li class="w-full py-4">And a fifth one</li>
          </ul>
          
            
        

    Links

    Use <a> or <button> to create actionable list group items with hover, disabled, and active states.

    The current link item A second link item A third link item A fourth link item A disabled link item
    • HTML
            
                
          <div class="w-96">
            <a
              href="#!"
              aria-current="true"
              class="block w-full cursor-pointer rounded-lg bg-primary-100 p-4 text-primary-600">
              The current link item
            </a>
            <a
              href="#!"
              class="block w-full cursor-pointer rounded-lg p-4 transition duration-500 hover:bg-neutral-100 hover:text-neutral-500 focus:bg-neutral-100 focus:text-neutral-500 focus:ring-0 dark:hover:bg-neutral-600 dark:hover:text-neutral-200 dark:focus:bg-neutral-600 dark:focus:text-neutral-200">
              A second link item
            </a>
            <a
              href="#!"
              class="block w-full cursor-pointer rounded-lg p-4 transition duration-500 hover:bg-neutral-100 hover:text-neutral-500 focus:bg-neutral-100 focus:text-neutral-500 focus:ring-0 dark:hover:bg-neutral-600 dark:hover:text-neutral-200 dark:focus:bg-neutral-600 dark:focus:text-neutral-200">
              A third link item
            </a>
            <a
              href="#!"
              class="block w-full cursor-pointer rounded-lg p-4 transition duration-500 hover:bg-neutral-100 hover:text-neutral-500 focus:bg-neutral-100 focus:text-neutral-500 focus:ring-0 dark:hover:bg-neutral-600 dark:hover:text-neutral-200 dark:focus:bg-neutral-600 dark:focus:text-neutral-200">
              A fourth link item
            </a>
            <a
              href="#!"
              class="block w-full cursor-default p-4 text-neutral-500 focus:outline-none focus:ring-0">
              A disabled link item
            </a>
          </div>
          
            
        

    Buttons

    Use <a> or <button> to create actionable list group items with hover, disabled, and active states.

    • HTML
            
                
          <div class="w-96">
            <button
              aria-current="true"
              type="button"
              class="block w-full cursor-pointer rounded-lg bg-primary-100 p-4 text-left text-primary-600">
              The current button
            </button>
            <button
              type="button"
              class="block w-full cursor-pointer rounded-lg p-4 text-left transition duration-500 hover:bg-neutral-100 hover:text-neutral-500 focus:bg-neutral-100 focus:text-neutral-500 focus:ring-0 dark:hover:bg-neutral-600 dark:hover:text-neutral-200 dark:focus:bg-neutral-600 dark:focus:text-neutral-200">
              A second button item
            </button>
            <button
              type="button"
              class="block w-full cursor-pointer rounded-lg p-4 text-left transition duration-500 hover:bg-neutral-100 hover:text-neutral-500 focus:bg-neutral-100 focus:text-neutral-500 focus:ring-0 dark:hover:bg-neutral-600 dark:hover:text-neutral-200 dark:focus:bg-neutral-600 dark:focus:text-neutral-200">
              A third button item
            </button>
            <button
              type="button"
              class="block w-full cursor-pointer rounded-lg p-4 text-left transition duration-500 hover:bg-neutral-100 hover:text-neutral-500 focus:bg-neutral-100 focus:text-neutral-500 focus:ring-0 dark:hover:bg-neutral-600 dark:hover:text-neutral-200 dark:focus:bg-neutral-600 dark:focus:text-neutral-200">
              A fourth button item
            </button>
            <button
              disabled=""
              type="button"
              class="block w-full cursor-default p-4 text-left text-neutral-500 focus:outline-none focus:ring-0">
              A disabled button item
            </button>
          </div>
          
            
        

    Related resources

    Multiselect Buttons Hover effect

    If you are looking for more advanced options, try Bootstrap Images from MDBootstrap.

    • Basic example
    • Active items
    • Disabled items
    • Links
    • Buttons
    • Related resources
    Get useful tips & free resources directly to your inbox along with exclusive subscriber-only content.
    Join our mailing list now
    © 2023 Copyright: MDBootstrap.com