Components
Dismiss any content.
Requires JSA basic example of a dismissable content.
Looks like you haven't received any emails.
<div id="dismiss-card" class="flex flex-col bg-white border shadow-sm rounded-xl dark:bg-gray-800 dark:border-gray-700 dark:shadow-slate-700/[.7]">
<div class="inline-flex justify-between items-center bg-gray-100 border-b rounded-t-xl py-3 px-4 md:py-4 md:px-5 dark:bg-gray-800 dark:border-gray-700">
<h3 class="font-semibold text-gray-800 dark:text-white">
Remove element card
</h3>
<button type="button" class="inline-flex justify-center items-center h-4 w-4 rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 focus:ring-offset-white text-sm dark:focus:ring-gray-700 dark:focus:ring-offset-gray-800" data-hs-remove-element="#dismiss-card">
<span class="sr-only">Close</span>
<svg class="w-3.5 h-3.5" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.92524 0.687069C1.126 0.486219 1.39823 0.373377 1.68209 0.373377C1.96597 0.373377 2.2382 0.486219 2.43894 0.687069L8.10514 6.35813L13.7714 0.687069C13.8701 0.584748 13.9882 0.503105 14.1188 0.446962C14.2494 0.39082 14.3899 0.361248 14.5321 0.360026C14.6742 0.358783 14.8151 0.38589 14.9468 0.439762C15.0782 0.493633 15.1977 0.573197 15.2983 0.673783C15.3987 0.774389 15.4784 0.894026 15.5321 1.02568C15.5859 1.15736 15.6131 1.29845 15.6118 1.44071C15.6105 1.58297 15.5809 1.72357 15.5248 1.85428C15.4688 1.98499 15.3872 2.10324 15.2851 2.20206L9.61883 7.87312L15.2851 13.5441C15.4801 13.7462 15.588 14.0168 15.5854 14.2977C15.5831 14.5787 15.4705 14.8474 15.272 15.046C15.0735 15.2449 14.805 15.3574 14.5244 15.3599C14.2437 15.3623 13.9733 15.2543 13.7714 15.0591L8.10514 9.38812L2.43894 15.0591C2.23704 15.2543 1.96663 15.3623 1.68594 15.3599C1.40526 15.3574 1.13677 15.2449 0.938279 15.046C0.739807 14.8474 0.627232 14.5787 0.624791 14.2977C0.62235 14.0168 0.730236 13.7462 0.92524 13.5441L6.59144 7.87312L0.92524 2.20206C0.724562 2.00115 0.611816 1.72867 0.611816 1.44457C0.611816 1.16047 0.724562 0.887983 0.92524 0.687069Z" fill="currentColor"/>
</svg>
</button>
</div>
<div class="text-center p-4 md:py-10 md:px-5"&kt;
<svg class="w-20 h-auto mx-auto" width="51" height="49" viewBox="0 0 51 49" fill="none" xmlns="http://www.w3.org/2000/svg"&kt;
<path d="M30.1044 1.13135L49.5 21L32.0892 31L26.2611 25.0569L18.5223 29.2171L4 15L27.6443 0.813437C28.4389 0.336639 29.4571 0.468208 30.1044 1.13135Z" class="fill-gray-400 dark:fill-white" fill="currentColor"/&kt;
<path d="M5.34439 15.5099L18.344 28.6964C18.6636 29.0205 19.1616 29.088 19.5558 28.8606L25.8654 25.2212C26.2677 24.9892 26.7768 25.0647 27.0945 25.4034L31.8521 30.4769C32.1787 30.8252 32.706 30.894 33.1111 30.6412L48.2909 21.1655C48.9922 20.7277 49.8917 21.2817 49.8163 22.105L47.5402 46.9576C47.4882 47.5254 46.9727 47.9349 46.4078 47.857L1.95761 41.7284C1.42357 41.6548 1.04401 41.1711 1.0995 40.6349L3.63757 16.1091C3.72459 15.2682 4.75092 14.908 5.34439 15.5099Z" class="stroke-gray-400 dark:stroke-white" stroke="currentColor" stroke-linecap="round"/&kt;
<path d="M5 38L15 31" class="stroke-gray-400 dark:stroke-white" stroke="currentColor" stroke-linecap="round"/&kt;
<path d="M36 34L43 43" class="stroke-gray-400 dark:stroke-white" stroke="currentColor" stroke-linecap="round"/&kt;
</svg&kt;
<h3 class="mt-5 font-bold text-gray-800 dark:text-white"&kt;
No new emails
</h3&kt;
<p class="text-sm text-gray-500 dark:text-gray-500"&kt;
Looks like you haven't received any emails.
</p&kt;
</div&kt;
</div>