<div class="fixed top-0 left-0 z-30 w-full" :class="{'hidden': !open }" x-data="{ open: true }">
<div class="w-full py-4 px-5 bg-orange-400 relative" style="background-image: url('consulty-assets/alerts/shapes-background1.png')">
<p class="tracking-tight text-white text-sm font-medium text-center w-56 sm:w-auto mx-auto">
<span>A quick announcement goes here.</span>
<a href="#" class="underline">Add your quick alert here</a>
</p>
<div class="absolute right-5 top-1/2 transform -translate-y-1/2">
<a href="#" x-on:click.prevent="open = false">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M4 12L12 4M4 4L12 12" stroke="white" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</a>
</div>
</div>
</div>
Can't find the right component?
Describe it and Shuffle AI builds it in seconds, ready to edit and export.
Free to start
Generate with AI
