<section class="fixed inset-0 z-50 p-7 bg-neutral-500 bg-opacity-80" x-data="{ open: true }" :class="{'hidden': !open}">
<div class="p-4 ml-auto max-w-sm w-full bg-white rounded-xl shadow-5xl">
<div class="flex flex-wrap justify-between -m-2">
<div class="flex-1 p-2">
<div class="flex flex-wrap -m-2">
<div class="w-auto p-2">
<div class="flex items-center justify-center w-10 h-10 bg-gradient-purple-top rounded-full">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.66797 5.08333C6.25376 5.08333 5.91797 5.41912 5.91797 5.83333C5.91797 6.24755 6.25376 6.58333 6.66797 6.58333L6.66797 5.08333ZM16.668 5.83333L17.1983 6.36366C17.4912 6.07077 17.4912 5.5959 17.1983 5.303L16.668 5.83333ZM13.865 1.96967C13.5721 1.67678 13.0972 1.67678 12.8043 1.96967C12.5114 2.26256 12.5114 2.73744 12.8043 3.03033L13.865 1.96967ZM12.8043 8.63634C12.5114 8.92923 12.5114 9.4041 12.8043 9.697C13.0972 9.98989 13.5721 9.98989 13.865 9.697L12.8043 8.63634ZM13.3346 14.9167C13.7488 14.9167 14.0846 14.5809 14.0846 14.1667C14.0846 13.7525 13.7488 13.4167 13.3346 13.4167L13.3346 14.9167ZM3.33464 14.1667L2.80431 13.6363C2.51141 13.9292 2.51141 14.4041 2.80431 14.697L3.33464 14.1667ZM6.13764 18.0303C6.43053 18.3232 6.90541 18.3232 7.1983 18.0303C7.49119 17.7374 7.49119 17.2626 7.1983 16.9697L6.13764 18.0303ZM7.1983 11.3637C7.49119 11.0708 7.49119 10.5959 7.1983 10.303C6.90541 10.0101 6.43053 10.0101 6.13764 10.303L7.1983 11.3637ZM6.66797 6.58333L16.668 6.58333L16.668 5.08333L6.66797 5.08333L6.66797 6.58333ZM12.8043 3.03033L16.1376 6.36366L17.1983 5.303L13.865 1.96967L12.8043 3.03033ZM16.1376 5.303L12.8043 8.63634L13.865 9.697L17.1983 6.36366L16.1376 5.303ZM13.3346 13.4167L3.33464 13.4167L3.33464 14.9167L13.3346 14.9167L13.3346 13.4167ZM7.1983 16.9697L3.86497 13.6363L2.80431 14.697L6.13764 18.0303L7.1983 16.9697ZM3.86497 14.697L7.1983 11.3637L6.13764 10.303L2.80431 13.6363L3.86497 14.697Z" fill="white"></path>
</svg>
</div>
</div>
<div class="flex-1 p-2">
<h3 class="font-heading mb-1 text-sm font-semibold">Transfer successful</h3>
<p class="text-xs text-neutral-500">Your file transfer is successfully done</p>
</div>
</div>
</div>
<div class="w-auto p-2">
<button x-on:click="open = false" class="text-neutral-300 hover:text-neutral-400">
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.5 13.5L13.5 4.5M4.5 4.5L13.5 13.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</button>
</div>
</div>
</div>
</section>
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
