tailwind position, mobile, desktop

by Imri Paloja

HTML

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

    <style type="text/tailwindcss">

        /* enable dark mode */
        @custom-variant dark (&:where(.dark, .dark *));

        @theme {
            --color-eb-red: #e60000;
            --color-eb-dark: #1b1e1f;
            --color-eb-gray: #181a1b;

            --font-sans: 'Inter', sans-serif;
        }

        /* Optional: Additional custom utilities */
        @layer utilities {
            /*.text-gradient {*/
            /*    background-clip: text;*/
            /*    -webkit-background-clip: text;*/
            /*    color: transparent;*/
            /*}*/
        }
    </style>


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.3.1/css/all.min.css">
<!-- 1. The Parent Container (Anchors the popup) -->
<div class="relative inline-block text-left">
  
  <!-- 2. The Menu Button -->
  <button class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700">
    Actions
  </button>

  <!-- 3. The Popup Menu (Positioned under the button) -->
  <div class="absolute block left-0 mt-2 w-48 bg-white rounded-md shadow border border-gray-400 z-50">
    <div class="py-1">
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Edit</a>
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Duplicate</a>
      <a href="#" class="block px-4 py-2 text-sm text-red-600 hover:bg-red-50">Delete</a>
    </div>
  </div>

</div>