Here is the modal code that we are going to use in the next lecture:

 <!-- form modal -->
<div class="hidden relative z-50" aria-labelledby="modal-title" role="dialog" aria-modal="true" id="form-modal">
    <div class="fixed inset-0 bg-gray-500 bg-opacity-75"></div>
    <div class="fixed inset-0 z-10 overflow-y-auto">
      <div class="flex min-h-full items-center justify-center p-4 text-center" id="backdrop">
        <div class="relative transform overflow-hidden rounded-lg text-left shadow-xl transition-all my-8">
            <form action="" method="POST">
                {% csrf_token %}
                <div class="bg-white dark:text-white dark:bg-slate-300 pt-5 pb-4 px-8">
                    <div class="mt-3 text-left">
                        <h3 class="text-2xl font-medium leading-6 text-gray-900" id="modal-title">
                            <!-- title -->
                        </h3>
                        <div class="mt-3">
                            <!-- form -->
                        </div>
                    </div>
                </div>
                <div class="bg-gray-50 dark:text-white dark:bg-slate-400 px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6">
 
                    <button type="submit" class="bg-transparent hover:bg-blue-500 text-blue-700 font-semibold hover:text-white py-2 px-4 border border-blue-500 hover:border-transparent rounded">
                        save
                    </button>

                    <button type="button" id="cancel-btn" class="bg-red-500 hover:bg-red-600 text-white font-semibold py-2 px-4 border border-red-600 rounded mr-3">
                        cancel
                    </button>
                </div>
            </form>
        </div>
      </div>
    </div>
</div>