<pre style="word-wrap: break-word; white-space: pre-wrap;">&lt;!-- https://codepen.io/xqbuilds/pen/LYwvOer  --&gt;

&lt;head&gt;
    &lt;script src="https://cdn.tailwindcss.com"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body class="bg-black text-white flex items-center justify-center min-h-screen space-x-6"&gt;
    &lt;!-- Hover Dropdown --&gt;
    &lt;div class="relative group"&gt;
        &lt;button class="bg-amber-900 hover:bg-amber-800 px-6 py-3 rounded-lg transition"&gt;
            Hover Dropdown
        &lt;/button&gt;
        &lt;div class="absolute left-0 hidden w-40 bg-gray-800 rounded-lg group-hover:block"&gt;
            &lt;a href="#" class="block px-4 py-2 hover:bg-gray-700"&gt;Option 1&lt;/a&gt;
            &lt;a href="#" class="block px-4 py-2 hover:bg-gray-700"&gt;Option 2&lt;/a&gt;
            &lt;a href="#" class="block px-4 py-2 hover:bg-gray-700"&gt;Option 3&lt;/a&gt;
            &lt;a href="#" class="block px-4 py-2 hover:bg-gray-700"&gt;Option 4&lt;/a&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;!-- Click Dropdown --&gt;
    &lt;div class="relative"&gt;
        &lt;details&gt;
            &lt;summary class="bg-teal-800 hover:bg-teal-700 px-6 py-3 rounded-lg cursor-pointer transition"&gt;
                Click to Open
            &lt;/summary&gt;
            &lt;div class="absolute left-0 w-40 bg-gray-800 rounded-lg"&gt;
                &lt;a href="#" class="block px-4 py-2 hover:bg-gray-700"&gt;Option A&lt;/a&gt;
                &lt;a href="#" class="block px-4 py-2 hover:bg-gray-700"&gt;Option B&lt;/a&gt;
                &lt;a href="#" class="block px-4 py-2 hover:bg-gray-700"&gt;Option C&lt;/a&gt;
                &lt;a href="#" class="block px-4 py-2 hover:bg-gray-700"&gt;Option D&lt;/a&gt;
            &lt;/div&gt;
        &lt;/details&gt;
    &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;</pre>