I’m trying to replicate what’s shown in this picture using Tailwind, and I’m not sure exactly how to position the quadrant circle in the bottom right and the image on top of it. This is a modal element. I whitened out the other content in the modal so I’m only showing the quadrant circle and the picture. You can see the code below for more detail.

This is the code so far:

<div class="fixed top-0 left-0 z-50 w-100% h-100%">
  <div class="flex items-center justify-center min-h-screen text-center">
    <div
      class="bg-white rounded-[24px] text-center shadow-xl p-2 w-3/5 v-4/5"
      role="dialog"
      aria-modal="true"
    >
      <div class="grid">
        <div class="font-OpenSansSemiBold">
          <h1 class="float-start ms-4.5 text-yellow text-18px">Category</h1>
          <div class="float-end text-gray4 text-26px cursor-pointer">X</div>
        </div>
        <div
          class="font-OpenSansSemiBold text-center pb-2 text-26px leading-1.2"
        >
          Question
        </div>
        <div class="ms-4.5">
          <div class="flex items-center mb-2">
            <input id="q1" type="radio" class="accent-darkblue w-2 h-2" />
            <label for="q1" class="text-sm font-medium">Option 1</label>
          </div>
          <div class="flex items-center mb-2">
            <input id="q2" type="radio" class="accent-darkblue w-2 h-2" />
            <label for="q2" class="text-sm font-medium">Option 2</label>
          </div>
          <div class="flex items-center mb-2">
            <input id="q3" type="radio" class="accent-darkblue w-2 h-2" />
            <label for="q3" class="text-sm font-medium">Option 3</label>
          </div>
        </div>
        <div>
          <button
            class="ms-4.5 disabled:bg-gray4 float-start text-white bg-darkpurple p-16px w-12 rounded-[12px]"
          >
            Submit
          </button>
        </div>
      </div>
    </div>
  </div>
</div>