How to position Dialog.Panel on right side of screen

Question

I'm wondering how to position the Dialog.Panel at the right side of the screen and only have it take up a certain width.

https://headlessui.dev/react/dialog#showing-and-hiding-your-dialog

The reason I need to limit the width is that I need to click outside the panel in order to close it (ie the grey area). If I'm not limiting its width, there's no outside area to click on.

import { Dialog } from "@headlessui/react";
...

<div className="flex">
      <button
        className="p-3 border-2 border-cyan-100"
        onClick={() => setIsOpen(true)}
      >
        Open/Close
      </button>
      <Dialog
        className="relative z-50"
        open={isOpen}
        onClose={() => setIsOpen(false)}
      >
        <div className="fixed inset-0 bg-black/30" aria-hidden="true" />
        <div className="fixed inset-0">

          <Dialog.Panel className="h-screen max-w-md">
            <div className="flex justify-end h-full">
              <div className="grow bg-red-400">block 1</div>
              <div className=" grow bg-green-400">block 2</div>
            </div>
          </Dialog.Panel>
        </div>
      </Dialog>
    </div>

Answer 1

You can do like this

<script src="https://cdn.tailwindcss.com"></script>
<div class="flex w-screen">
  <div class="bg-red-400  px-10">
    block1
  </div>
  <div class="bg-green-400  px-10">
    block2
  </div>
  <div class="bg-gray-200 p-20 w-full">
    <div class="relative bg-white px-6 pt-10 pb-8 shadow-xl ring-1 ring-gray-900/5 sm:mx-auto sm:max-w-lg sm:rounded-lg sm:px-10">
    <div class="mx-auto max-w-md">
     
      <div class="divide-y divide-gray-300/50">
        <div class="space-y-6 py-8 text-base leading-7 text-gray-600">
          <p>An advanced online playground for Tailwind CSS, including support for things like:</p>
          <ul class="space-y-4">
            <li class="flex items-center">
              <svg class="h-6 w-6 flex-none fill-sky-100 stroke-sky-500 stroke-2" stroke-linecap="round" stroke-linejoin="round">
                <circle cx="12" cy="12" r="11" />
                <path d="m8 13 2.165 2.165a1 1 0 0 0 1.521-.126L16 9" fill="none" />
              </svg>
              <p class="ml-4">
                Customizing your
                <code class="text-sm font-bold text-gray-900">tailwind.config.js</code> file
              </p>
            </li>
            <li class="flex items-center">
              <svg class="h-6 w-6 flex-none fill-sky-100 stroke-sky-500 stroke-2" stroke-linecap="round" stroke-linejoin="round">
                <circle cx="12" cy="12" r="11" />
                <path d="m8 13 2.165 2.165a1 1 0 0 0 1.521-.126L16 9" fill="none" />
              </svg>
              <p class="ml-4">
                Extracting classes with
                <code class="text-sm font-bold text-gray-900">@apply</code>
              </p>
            </li>
            <li class="flex items-center">
              <svg class="h-6 w-6 flex-none fill-sky-100 stroke-sky-500 stroke-2" stroke-linecap="round" stroke-linejoin="round">
                <circle cx="12" cy="12" r="11" />
                <path d="m8 13 2.165 2.165a1 1 0 0 0 1.521-.126L16 9" fill="none" />
              </svg>
              <p class="ml-4">Code completion with instant preview</p>
            </li>
          </ul>
          <p>Perfect for learning how the framework works, prototyping a new idea, or creating a demo to share online.</p>
        </div>
        <div class="pt-8 text-base font-semibold leading-7">
          <p class="text-gray-900">Want to dig deeper into Tailwind?</p>
          <p>
            <a href="https://tailwindcss.com/docs" class="text-sky-500 hover:text-sky-600">Read the docs &rarr;</a>
          </p>
        </div>
      </div>
    </div>
  </div>

  </div>
</div>