Modal

<div x-data="{ open: true }" class="">
    <!-- Trigger -->
    <button type="button" class="btn btn-dark" x-on:click="open = true">Open Modal</button>

    <!-- Modal -->
    <div x-show="open" style="display: none" x-on:keydown.escape.prevent.stop="open = false" role="dialog" aria-modal="true" x-id="['modal-title']" :aria-labelledby="$id('modal-title')" class="fixed inset-0 overflow-y-auto">
        <!-- Overlay -->
        <div x-show="open" x-transition.opacity class="fixed inset-0 bg-dark/50"></div>

        <!-- Panel -->
        <div x-show="open" x-transition x-on:click="open = false" class="relative min-h-screen flex items-center justify-center p-4">
            <div x-on:click.stop x-trap.noscroll.inert="open" class="relative max-w-5xl w-full bg-light rounded-md shadow-lg overflow-y-auto">
                <div class="bg-green-light p-4 sm:p-8 flex justify-between items-center">
                    <div class="">
                        <div class="text-sm uppercase opacity-50">You are applying for</div>
                        <h2 class="text-3xl font-bold" :id="$id('modal-title')">Private medical insurance</h2>
                    </div>
                    <div class="">
                        <button type="button" x-on:click="open = false" class="flex items-center rounded-sm bg-dark/50 border-2 border-transparent hover:bg-dark/60 focus:outline-none focus:ring-0 focus:border-light">
                            <div class="hidden md:block px-6 py-4 text-light font-bold">Cancel application</div>
                            <div class="p-2 sm:p-4 md:border-l border-green-light">
                                <div class="bg-light w-6 h-6 rounded-full flex justify-center items-center text-green"><i class="fas fa-times"></i></div>
                            </div>
                        </button>
                    </div>
                </div>

                <div class="flex flex-col md:flex-row">
                    <div class="flex-1 p-4 sm:p-8 flex flex-col">

                        <div class="flex items-center justify-between relative space-x-3 sm:px-6 my-10 sm:mb-20">
                            <div class="flex flex-col items-center space-y-2 relative">
                                <div class="bg-dark text-light w-12 h-12 rounded-full font-bold flex items-center justify-center text-2xl">1</div>
                                <div class="hidden sm:block absolute text-sm uppercase opacity-50 whitespace-nowrap -bottom-6">Your cover</div>
                            </div>
                            <div class="flex-1 border-t border-dark/20 w-full"></div>
                            <div class="flex flex-col items-center space-y-2 relative">
                                <div class="bg-dark/10 w-12 h-12 rounded-full font-bold flex items-center justify-center text-2xl">2</div>
                                <div class="hidden sm:block absolute text-sm uppercase opacity-50 whitespace-nowrap -bottom-6">Confirmation</div>
                            </div>
                            <div class="flex-1 border-t border-dark/20 w-full"></div>
                            <div class="flex flex-col items-center space-y-2 relative">
                                <div class="bg-dark/10 w-12 h-12 rounded-full font-bold flex items-center justify-center text-2xl">3</div>
                                <div class="hidden sm:block absolute text-sm uppercase opacity-50 whitespace-nowrap -bottom-6">Complete</div>
                            </div>
                        </div>

                        <form>
                            <h3 class="uppercase font-bold text-dark border-t border-dark/10 pt-3 mb-10">Form Section Heading</h3>
                            <div class="mb-6">
                                <fieldset class="space-y-6">
                                    <legend class="font-bold">Checkbox selection label</legend>

                                    <div class="relative flex items-start">
                                        <div class="flex items-center h-6">
                                            <input id="option-1" name="options" type="radio" class="h-8 w-8 text-blue border-dark/40">
                                        </div>
                                        <div class="ml-3">
                                            <label for="option-1" class="">Option 1</label>
                                        </div>
                                    </div>
                                    <div class="relative flex items-start">
                                        <div class="flex items-center h-6">
                                            <input id="option-2" name="options" aria-describedby="option-2-description" type="radio" class="h-8 w-8 text-blue border-dark/40 rounded-full cursor-pointer focus:outline-none focus:ring-1 focus:ring-blue focus:shadow-lg focus:border-blue">
                                        </div>
                                        <div class="ml-3">
                                            <label for="option-2" class="">Option 2</label>
                                            <p id="option-2-description" class="mt-2 text-sm">Get notified when someones posts a comment on a posting.</p>
                                        </div>
                                    </div>
                                    <div class="relative flex items-start">
                                        <div class="flex items-center h-6">
                                            <input id="option-3" name="options" type="radio" class="h-8 w-8 text-blue border-red-600 rounded-full cursor-pointer focus:outline-none focus:ring-1 focus:ring-red-500 focus:shadow-lg focus:border-red-500">
                                        </div>
                                        <div class="ml-3">
                                            <label for="option-3" class="">Option 3</label>
                                            <p class="text-sm text-red-600" id="email-error">Error message</p>
                                        </div>
                                    </div>
                                    <div class="relative flex items-start">
                                        <div class="flex items-center h-6">
                                            <input id="option-2" name="options" aria-describedby="option-2-description" type="radio" class="h-8 w-8 text-blue border-dark/40 rounded-full cursor-pointer focus:outline-none focus:ring-1 focus:ring-blue focus:shadow-lg focus:border-blue" disabled>
                                        </div>
                                        <div class="ml-3">
                                            <label for="option-2" class="opacity-50">Option 2</label>
                                            <p id="option-2-description" class="mt-2 text-sm">Get notified when someones posts a comment on a posting.</p>
                                        </div>
                                    </div>
                                </fieldset>
                            </div>
                        </form>

                        <div class="flex-1 flex items-end justify-between mt-10">
                            <button class="btn-outline btn-dark">Previous</button>
                            <button class="btn btn-dark">Next</button>
                        </div>

                    </div>
                    <div class="bg-dark/5 p-4 sm:p-8 md:w-[320px] space-y-6">
                        <h4 class="opacity-50 uppercase">Your selection</h4>
                        <div class="prose">
                            <p>You have selected <strong>VitalityHealth Business Healthcare Plan Single</strong> at an estimated monthly cost of <strong>£116.18</strong> to your employer.</p>
                            <p>Whilst there is no up-front cost to you, please note that this is classed as a benefit in kind for tax purposes. The tax cost to you for this and other benefits can be found <a href="#">here</a>.</p>
                        </div>
                        <div class="border-t border-dark/10 pt-6 pr-6">
                            <a href="#" class="flex items-center text-lg font-bold hover:opacity-90">
                                <div class="bg-green-light w-12 h-12 rounded-full flex items-center justify-center mr-3 text-light"><i class="fas fa-calculator fa-lg"></i></div>
                                <div class="flex-1 underline underline-offset-2 decoration-green-light">How does this affect me?</div>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>