• HTML

HTML

<span class="p-4 block">Recargue la vista para ver el efecto.</span>

<div 
    class="bg-blue-100 rounded text-blue-900 px-4 py-3 shadow-md absolute bottom-8 left-1/2 transform -translate-x-1/2 z-50" 
    role="alert" 
    x-data="{'alert':true}" :class="{'hidden':!alert}" x-init="setTimeout(function(){ alert=false },3000)">
    
    <div class="flex">
        <div class="py-1">
            <svg class="fill-current h-6 w-6 text-blue-500 mr-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                <path d="M2.93 17.07A10 10 0 1 1 17.07 2.93 10 10 0 0 1 2.93 17.07zm12.73-1.41A8 8 0 1 0 4.34 4.34a8 8 0 0 0 11.32 11.32zM9 11V9h2v6H9v-4zm0-6h2v2H9V5z"/>
            </svg>
        </div>
        <div>
            <p class="font-bold">Mensaje de Compositu.com</p>
            <p class="text-sm">Encuentre los elementos y componentes que necesita su página Web</p>
        </div>
    </div>
</div>