@props(['title'])
<div class="flex flex-shrink-0 items-center justify-between rounded-t-md p-4 bg-rose-600">
    <!--Modal title-->
    <h5 class="text-xl font-medium leading-normal text-white">
        {{ $title }}
    </h5>
    <!--Close button-->
    <button type="button" class="box-content text-white rounded-none border-none hover:no-underline hover:opacity-75 focus:opacity-100 focus:shadow-none focus:outline-none" data-te-modal-dismiss aria-label="Close">
        <svg  xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-6 w-6">
            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
        </svg>
    </button>
</div>