fadgram-ui/components/list-group.css

Fadgram UI is a Tailwind CSS plugin that provides a set of custom utility classes to enhance your web development experience. This plugin is designed to work seamlessly with Tailwind CSS, allowing you to quickly and easily style your web applications. ![F

@layer components {
    .list-group {
        @apply text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg dark:bg-gray-700 dark:border-gray-600 dark:text-white;
        @apply list-none m-0 p-0;

        .list-group-item {
            @apply w-full px-4 py-2 border-b border-gray-200 dark:border-gray-600;

            &:hover {
                @apply bg-gray-100;
            }

            &:last-child {
                @apply border-b-0 rounded-b-lg;
            }

            &:first-child {
                @apply rounded-t-lg;
            }

            &.active {
                @apply bg-primary text-white;
            }
        }
    }

}