Tailwindcss Notification

gistfile1.txt

<div x-data="{open: true}" class="bg-gray-300 w-full h-screen p-4">
<div class="mb-6 w-full bg-white rounded-lg pointer-events-auto" x-show="open" x-transition:enter="ease-out duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="ease-in duration-200" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="fixed inset-0 transition-opacity">	
                        <div class="rounded-lg shadow-xs overflow-hidden">	
                            <div class="p-4">	
                                <div class="flex items-start">	
                                    <div class="flex-shrink-0">	
                                        <svg class="h-6 w-6 text-green-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">	
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />	
                                        </svg>	
                                    </div>	
                                    <div class="ml-3 w-0 flex-1 pt-0.5">	
                                        <p class="text-sm leading-5 font-medium text-gray-900">	
                                            Successfully saved!	
                                        </p>	
                                    </div>	
                                    <div class="ml-4 flex-shrink-0 flex">	
                                        <button x-on:click="open = false; setTimeout(() => open = true, 2000)" type="button" class="inline-flex text-gray-400 focus:outline-none focus:text-gray-500 transition ease-in-out duration-150">	
                                            <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">	
                                                <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
                                            </svg>	
                                        </button>	
                                    </div>	
                                </div>	
                            </div>	
                        </div>	
                    </div>
</div>