fadgram-ui/components/dropdown.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 {
    .dropdown {
        @apply relative inline-block;
    }

    .dropdown-menu {
        @apply absolute z-20 min-w-[12rem] rounded-lg;
        @apply bg-white p-2 shadow dark:bg-gray-800;
        @apply mt-3;
        @apply collapse;

        &.show {
            @apply visible;
        }

        &.dropdown-top {
            @apply bottom-full top-auto mt-auto mb-3;
        }

        &.dropdown-start {
            @apply start-0;
        }

        &.dropdown-center {
            @apply start-1/2 -translate-x-1/2;
        }

        &.dropdown-end {
            @apply end-0;
        }
    }

    .dropdown-link {
        @apply inline-flex space-x-1 rtl:space-x-reverse items-center p-2 text-sm font-medium leading-5 text-gray-500 dark:text-gray-300 hover:text-gray-700 dark:hover:text-gray-100 focus:outline-none focus:text-gray-700 dark:focus:text-gray-300 transition duration-150 ease-in-out w-full border-red;
    }
}