Modal scroll

[melokki]

Hello, I have the following modal code, but I am having some problems with it.

<div class="container shadow-md rounded bg-white p-6">
<div class="fixed pin h-24 flex items-center z-10">
        <div class="fixed pin bg-black opacity-75 z-10"></div>
        <div class="relative mx-6 md:mx-auto w-full md:w-3/4 z-20 m-8">
            <div class="shadow-lg bg-white rounded-lg p-8">
                <h1 class="text-center text-2xl">New sheet</h1>

                <h3 class="border-b py-2 my-2">Groom</h3>
                <div class="flex flex-wrap -mx-3 mb-6">
                  <div class="w-full md:w-1/2 px-3 mb-6 md:mb-0">
                    <label class="block uppercase tracking-wide text-grey-darker text-xs font-bold mb-2" for="grid-first-name">
                      First Name
                    </label>
                    <input class="appearance-none block w-full bg-grey-lighter text-grey-darker border border-grey-lighter rounded py-3 px-4 mb-3 leading-tight" id="grid-first-name" type="text" placeholder="Jane">
                  </div>
                  <div class="w-full md:w-1/2 px-3">
                    <label class="block uppercase tracking-wide text-grey-darker text-xs font-bold mb-2" for="grid-last-name">
                      Last Name
                    </label>
                    <input class="appearance-none block w-full bg-grey-lighter text-grey-darker border border-grey-lighter rounded py-3 px-4 leading-tight" id="grid-last-name" type="text" placeholder="Doe">
                  </div>
                </div>
                <div class="flex flex-wrap -mx-3 mb-6">
                  <div class="w-full md:w-1/2 px-3 mb-6 md:mb-0">
                    <label class="block uppercase tracking-wide text-grey-darker text-xs font-bold mb-2" for="grid-first-name">
                      Email
                    </label>
                    <input class="appearance-none block w-full bg-grey-lighter text-grey-darker border border-grey-lighter rounded py-3 px-4 mb-3 leading-tight" id="grid-first-name" type="text" placeholder="Jane">
                  </div>
                  <div class="w-full md:w-1/2 px-3">
                    <label class="block uppercase tracking-wide text-grey-darker text-xs font-bold mb-2" for="grid-last-name">
                      Phone number
                    </label>
                    <input class="appearance-none block w-full bg-grey-lighter text-grey-darker border border-grey-lighter rounded py-3 px-4 leading-tight" id="grid-last-name" type="text" placeholder="Doe">
                  </div>
                </div>
                <h3 class="border-b py-2 my-2">Bride</h3>
                <div class="flex flex-wrap -mx-3 mb-6">
                  <div class="w-full md:w-1/2 px-3 mb-6 md:mb-0">
                    <label class="block uppercase tracking-wide text-grey-darker text-xs font-bold mb-2" for="grid-first-name">
                      First Name
                    </label>
                    <input class="appearance-none block w-full bg-grey-lighter text-grey-darker border border-grey-lighter rounded py-3 px-4 mb-3 leading-tight" id="grid-first-name" type="text" placeholder="Jane">
                  </div>
                  <div class="w-full md:w-1/2 px-3">
                    <label class="block uppercase tracking-wide text-grey-darker text-xs font-bold mb-2" for="grid-last-name">
                      Last Name
                    </label>
                    <input class="appearance-none block w-full bg-grey-lighter text-grey-darker border border-grey-lighter rounded py-3 px-4 leading-tight" id="grid-last-name" type="text" placeholder="Doe">
                  </div>
                </div>
                <div class="flex flex-wrap -mx-3 mb-6">
                  <div class="w-full md:w-1/2 px-3 mb-6 md:mb-0">
                    <label class="block uppercase tracking-wide text-grey-darker text-xs font-bold mb-2" for="grid-first-name">
                      Email
                    </label>
                    <input class="appearance-none block w-full bg-grey-lighter text-grey-darker border border-grey-lighter rounded py-3 px-4 mb-3 leading-tight" id="grid-first-name" type="text" placeholder="Jane">
                  </div>
                  <div class="w-full md:w-1/2 px-3">
                    <label class="block uppercase tracking-wide text-grey-darker text-xs font-bold mb-2" for="grid-last-name">
                      Phone number
                    </label>
                    <input class="appearance-none block w-full bg-grey-lighter text-grey-darker border border-grey-lighter rounded py-3 px-4 leading-tight" id="grid-last-name" type="text" placeholder="Doe">
                  </div>
                </div>
                <h3 class="border-b py-2 my-2">General</h3>
                <div class="flex flex-wrap mb-4">
                  <div class="w-1/2">
                    <label class="block uppercase tracking-wide text-grey-darker text-xs font-bold mb-2" for="grid-first-name">
                        Wedding date
                    </label>
                    <p class="text-grey-darker">
                      The future wedding date of the grooms.
                    </p>
                  </div>
                  <div class="w-1/2">
                    <input class="appearance-none block w-full bg-grey-lighter text-grey-darker rounded py-3 px-4 mb-3" type="text" placeholder="YYYY-MM-DD"
                    >
                  </div>
                </div>
                <div class="flex flex-wrap mb-4">
                  <div class="w-1/2">
                    <label class="block uppercase tracking-wide text-grey-darker text-xs font-bold mb-2" for="grid-first-name">
                        Instructor
                    </label>
                    <p class="text-grey-darker">
                      The instructor of the grooms.
                    </p>
                  </div>
                  <div class="w-1/2">
                    <input class="appearance-none block w-full bg-grey-lighter text-grey-darker rounded py-3 px-4 mb-3" type="text" placeholder="YYYY-MM-DD"
                    >
                  </div>
                </div>
            </div>
        </div>
    </div>
</div>

this is the html code. The problem is that I don't know how to make it to show me the entire forum without hiding fields. Right now some of the fields are hidden and I wish to have all of them displayed on that modal with scroll. Hope you understand what I am trying to achieve.

[isellsoap]

I guess the second line is the problem.

<div class="fixed pin h-24 flex items-center z-10">

You are setting a lot of stuff that seems to be redundant. Try just to write this instead:

<div class="z-10">