Dropdowns

<div class="dropdown arrow arrow--top-right | relative">
  <div class="dropdown__main | divide-y divide-grey-200 rounded-lg bg-white py-1 shadow-float">
    <a class="group flex w-full cursor-pointer items-center gap-2 px-8 py-4 transition-colors hover:text-green-500">
      <span>Ga naar profiel</span>
      <svg
        class="aspect-square w-3.5 -rotate-45 transition-transform group-hover:rotate-0"
        viewBox="0 0 16 16"
        xmlns="http://www.w3.org/2000/svg"
      >
        <!-- SVG content -->
      </svg>
    </a>
    <a href="index.html" class="flex w-full items-center gap-2 px-8 py-4 transition-colors hover:text-red-500">
      <svg class="aspect-square w-3.5" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
        <!-- SVG content -->
      </svg>
      <span>Uitloggen</span>
    </a>
  </div>
</div>

<div class="dropdown | arrow arrow--top-left | relative">
  <div class="dropdown__main | relative grid rounded-lg bg-white py-4 shadow-float">
    <div class="dropdown__header flex items-baseline justify-between px-8 pb-2 pt-3">
      <h5 class="heading-5">Mijn kaartengroepen</h5>
      <button
        class="button button--link | group ml-auto -translate-y-3 translate-x-3 p-0 text-blue-900 hover:text-red-500"
      >
        <div class="button__label text-sm">Sluit</div>
        <svg class="aspect-square h-3 text-red-500" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
          <!-- SVG content -->
        </svg>
      </button>
    </div>
    <div class="dropdown__content">
      <ol>
        <li class="">
          <a href="javascript:console.log('clicked link');" class="flex items-start gap-3 px-8 py-2 hover:bg-grey-100">
            <figure>
              <img src="https://i.lemone.space/image/pizza?1" alt="" class="avatar | aspect-square w-8 rounded-full" />
            </figure>
            <div>
              <h6 class="heading-6 leading-none">Gemeente Den Haag</h6>
              <div class="flex gap-2 text-green-500">
                <svg class="aspect-square w-4" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
                  <!-- SVG content -->
                </svg>
                Naar deze Kaartgoep
              </div>
            </div>
          </a>
        </li>
        <li class="">
          <a href="javascript:console.log('clicked link');" class="flex items-start gap-3 px-8 py-2 hover:bg-grey-100">
            <figure>
              <img src="https://i.lemone.space/image/pizza?2" alt="" class="avatar | aspect-square w-8 rounded-full" />
            </figure>
            <div>
              <h6 class="heading-6 leading-none">Gemeente Rotterdam</h6>
              <div class="flex gap-2 text-green-500">
                <svg class="aspect-square w-4" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
                  <!-- SVG content -->
                </svg>
                Naar deze Kaartgoep
              </div>
            </div>
          </a>
        </li>
        <li class="">
          <a href="javascript:console.log('clicked link');" class="flex items-start gap-3 px-8 py-2 hover:bg-grey-100">
            <figure class="relative">
              <img src="https://i.lemone.space/image/pizza?3" alt="" class="avatar | aspect-square w-8 rounded-full" />
              <div
                class="absolute bottom-0 right-0 translate-x-1 translate-y-2 rounded-full border border-white bg-blue-500 p-1 text-white"
              >
                <svg class="aspect-square w-2" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
                  <!-- SVG content -->
                </svg>
              </div>
            </figure>
            <div>
              <h6 class="heading-6 leading-none">Gemeente Schiedam</h6>
              <div class="text-blue-500">Geselecteerde Kaartgoep</div>
            </div>
          </a>
        </li>
        <li class="">
          <a href="javascript:console.log('clicked link');" class="flex items-start gap-3 px-8 py-2 hover:bg-grey-100">
            <figure>
              <img src="https://i.lemone.space/image/pizza?4" alt="" class="avatar | aspect-square w-8 rounded-full" />
            </figure>
            <div>
              <h6 class="heading-6 leading-none">Gemeente Utrecht</h6>
              <div class="flex gap-2 text-green-500">
                <svg class="aspect-square w-4" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
                  <!-- SVG content -->
                </svg>
                Naar deze Kaartgoep
              </div>
            </div>
          </a>
        </li>
      </ol>
    </div>
  </div>
</div>