DOCUMENTATION

<div x-data="{show: false }" class="p-12 bg-black mt-4 md:w-full">
    <div class="bg-white md:w-2/5 w-full text-gray-500 flex flex-wrap justify-between items-center py-2 px-4 border-b border-gray-300 rounded-t">
        <p class="font-bold text-gray-600 flex items-center">
            <svg class="rounded bd-placeholder-img mr-2" width="20" height="20" xmlns="http://www.w3.org/2000/svg"
                preserveAspectRatio="xMidYMid slice" focusable="false">
                <rect width="100%" height="100%" fill="#007aff"></rect>
            </svg>
            Tailwind
        </p>
        <p class="text-gray-600 opacity-90 pl-14 text-xs">11 mins ago</p>
        <button @click="show = !show"
            class="bg-transparent ml-0 outline-none opacity-80 hover:opacity-100 focus:outline-none"
            onclick="closeAlert(event)">
            <svg class="w-3 h-3" xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'>
                <path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z' />
            </svg>
        </button>
    </div>
    <div x-show="!show" class="p-4 md:w-2/5 w-full bg-gray-200 rounded-b text-sm font-medium text-gray-500">
        Hello, world! This is a toast message.
    </div>
</div>
<div class="p-12 bg-black mt-4 md:w-full">
    <div class="p-4 md:w-2/5 w-full bg-gray-200 rounded text-sm font-medium text-gray-500">
        Hello, world! This is a toast message.
        <button class="bg-transparent ml-2 outline-none opacity-80 hover:opacity-100 focus:outline-none"onclick="closeAlert(event)">
            <svg class="w-3 h-3" xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'>
                <path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z' />
            </svg>
        </button>
    </div>
</div>
<div class="p-12 bg-black mt-4 w-full">
    <div class="px-4 py-4 md:w-2/5 w-full bg-gray-200 rounded text-sm font-medium text-gray-500">
        Hello, world! This is a toast message.
        <hr class="text-black mt-3 mb-3 border-white">
        <button class="inline-block px-6 py-1.5 mb-3 text-center text-white bg-blue-500 border border-blue-300 rounded shadow-md focus:bg-blue-600 ">Take action</button>
        <button onclick="closeAlert(event)" class="inline-block px-6 py-1.5 mb-3 text-center text-white bg-black border border-black rounded shadow-md ">Close</button>
    </div>
</div>
      

function closeAlert(event) {
    let element = event.target;
    while (element.nodeName !== "BUTTON") {
      element = element.parentNode;
    }
    element.parentNode.parentNode.removeChild(element.parentNode);
}