Skip to content

Instantly share code, notes, and snippets.

@CodebyOmar
Last active July 10, 2023 06:53
Show Gist options
  • Save CodebyOmar/99b665424530fffc3ddaa98ede8c1322 to your computer and use it in GitHub Desktop.
Save CodebyOmar/99b665424530fffc3ddaa98ede8c1322 to your computer and use it in GitHub Desktop.
Place a badge that show notification numbers or number of items in a cart at top right of an icon with tailwindcss
<button class="py-4 px-1 relative border-2 border-transparent text-gray-800 rounded-full hover:text-gray-400 focus:outline-none focus:text-gray-500 transition duration-150 ease-in-out" aria-label="Cart">
<svg class="h-6 w-6" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor">
<path d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path>
</svg>
<span class="absolute inset-0 object-right-top -mr-6">
<div class="inline-flex items-center px-1.5 py-0.5 border-2 border-white rounded-full text-xs font-semibold leading-4 bg-red-500 text-white">
6
</div>
</span>
</button>
@tobya
Copy link

tobya commented May 14, 2021

Thanks, I found this and its just what I wanted.

@skshahriarahmedraka
Copy link

thanks a lot

@christopherokonkwo
Copy link

It was helpful...thanks

@F-47
Copy link

F-47 commented Feb 6, 2023

Thanks, that was really so helpful.

@Rajneesh-kumar-Rawat
Copy link

Thanks, a lot 😁

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment