JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/alpinejs/2.3.0/alpine.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.9.6/tailwind.min.css">
          <div x-data="{ addDonationOpen: false }">
            <button @click="addDonationOpen = !addDonationOpen" class="bg-teal-700 hover:bg-teal-500 hover:text-gray-900 focus:bg-teal-500 focus:outline-none focus:shadow-outline text-white focus:text-gray-900 px-4 py-2 rounded font-medium mr-6"><i class="fas fa-plus-square pr-1"></i> Add Donation</button>
        
            <div x-show="addDonationOpen" :class="{'flex': addDonationOpen, 'fixed': addDonationOpen, 'hidden': !addDonationOpen}" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="transform opacity-0" x-transition:enter-end="transform opacity-100" x-transition:leave="transition ease-in duration-1000" x-transition:leave-start="transform opacity-100" x-transition:leave-end="transform opacity-0" class="w-full h-100 inset-0 z-50 overflow-hidden justify-center items-center" style="background: rgba(0,0,0,.7);">
              <div class="border border-teal-500 shadow-lg modal-container bg-white w-11/12 md:max-w-md mx-auto rounded shadow-lg z-50 overflow-y-auto">
                <div class="modal-content py-4 text-left px-6">
                  <!--Title-->
                  <div class="flex justify-between items-center pb-3">
                    <p class="text-2xl font-bold">Header</p>
                    <div @click="addDonationOpen = !addDonationOpen" class="modal-close cursor-pointer z-50">
                      <svg class="fill-current text-black" xmlns="http://www.w3.org/2000/svg" width="18" height="18"
                        viewBox="0 0 18 18">
                        <path
                          d="M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z">
                        </path>
                      </svg>
    ...