How cool is to have coloured and meaningfull badges near your image/ cards/ testimonials. Sounds interesting, then why waiting to check inside 😎

Normal Badges

<div class="bg-gray-50">
<div class="mx-auto max-w-7xl py-12 px-4 sm:px-6 lg:flex lg:items-center lg:justify-between lg:py-16 lg:px-8">
  <div class="flex mt-8 lg:mt-0 lg:flex-shrink-0">
    <div class="flex flex-row gap-2 rounded-md shadow">
      <div class="flex flex-col gap-2">
        <h6 class="text-center text-black">Small</h6>
        <hr />
        <a href="#" class="inline-flex items-center justify-center rounded-full border border-transparent bg-indigo-600 px-2 py-2 text-xs font-medium text-white hover:bg-indigo-700"> Badge rounded-full </a>
        <a href="#" class="inline-flex items-center justify-center rounded-md border border-transparent bg-indigo-600 px-2 py-2 text-xs font-medium text-white hover:bg-indigo-700"> Badge rounded-md </a>
        <a href="#" class="rounded-xs inline-flex items-center justify-center border border-transparent bg-indigo-600 px-2 py-2 text-xs font-medium text-white hover:bg-indigo-700"> Badge rounded-xs </a>
        <a href="#" class="inline-flex items-center justify-center rounded-md border border-transparent bg-blue-600 px-2 py-2 text-xs font-medium text-white hover:bg-blue-700"> Badge blue </a>
        <a href="#" class="bg-lime inline-flex items-center justify-center rounded-md border border-transparent bg-lime-600 px-2 py-2 text-xs font-medium text-white hover:bg-lime-700"> Badge lime </a>
        <a href="#" class="bg-lime inline-flex items-center justify-center rounded-md border border-transparent bg-cyan-600 px-2 py-2 text-xs font-medium text-white hover:bg-cyan-700"> Badge cyan </a>
        <a href="#" class="bg-lime inline-flex items-center justify-center rounded-md border border-transparent bg-violet-600 px-2 py-2 text-xs font-medium text-white hover:bg-violet-700"> Badge violet </a>
        <a href="#" class="bg-lime inline-flex items-center justify-center rounded-md border border-transparent bg-sky-600 px-2 py-2 text-xs font-medium text-white hover:bg-sky-700"> Badge sky </a>
        <a href="#" class="bg-lime inline-flex items-center justify-center rounded-md border border-transparent bg-emerald-600 px-2 py-2 text-xs font-medium text-white hover:bg-emerald-700"> Badge emerald </a>
      </div>
     <div class="flex flex-col gap-2">
        <h6 class="text-center text-black">Base</h6>
        <hr />
        <a href="#" class="inline-flex items-center justify-center rounded-full border border-transparent bg-indigo-600 px-3 py-4 text-base font-medium text-white hover:bg-indigo-700"> Badge rounded-full </a>
        <a href="#" class="inline-flex items-center justify-center rounded-md border border-transparent bg-indigo-600 px-3 py-4 text-base font-medium text-white hover:bg-indigo-700"> Badge rounded-md </a>
        <a href="#" class="rounded-xs inline-flex items-center justify-center border border-transparent bg-indigo-600 px-3 py-4 text-base font-medium text-white hover:bg-indigo-700"> Badge rounded-xs </a>
        <a href="#" class="inline-flex items-center justify-center rounded-md border border-transparent bg-blue-600 px-3 py-4 text-base font-medium text-white hover:bg-blue-700"> Badge blue </a>
        <a href="#" class="bg-lime inline-flex items-center justify-center rounded-md border border-transparent bg-lime-600 px-3 py-4 text-base font-medium text-white hover:bg-lime-700"> Badge lime </a>
        <a href="#" class="bg-lime inline-flex items-center justify-center rounded-md border border-transparent bg-cyan-600 px-3 py-4 text-base font-medium text-white hover:bg-cyan-700"> Badge cyan </a>
        <a href="#" class="bg-lime inline-flex items-center justify-center rounded-md border border-transparent bg-violet-600 px-3 py-4 text-base font-medium text-white hover:bg-violet-700"> Badge violet </a>
        <a href="#" class="bg-lime inline-flex items-center justify-center rounded-md border border-transparent bg-sky-600 px-3 py-4 text-base font-medium text-white hover:bg-sky-700"> Badge sky </a>
        <a href="#" class="bg-lime inline-flex items-center justify-center rounded-md border border-transparent bg-emerald-600 px-3 py-4 text-base font-medium text-white hover:bg-emerald-700"> Badge emerald </a>
      </div><div class="flex flex-col gap-2">
        <h6 class="text-center text-black">Large</h6>
        <hr />
        <a href="#" class="inline-flex items-center justify-center rounded-full border border-transparent bg-indigo-600 px-4 py-4 text-lg font-medium text-white hover:bg-indigo-700"> Badge rounded-full </a>
        <a href="#" class="inline-flex items-center justify-center rounded-md border border-transparent bg-indigo-600 px-4 py-4 text-lg font-medium text-white hover:bg-indigo-700"> Badge rounded-md </a>
        <a href="#" class="rounded-xs inline-flex items-center justify-center border border-transparent bg-indigo-600 px-4 py-4 text-lg font-medium text-white hover:bg-indigo-700"> Badge rounded-xs </a>
        <a href="#" class="inline-flex items-center justify-center rounded-md border border-transparent bg-blue-600 px-4 py-4 text-lg font-medium text-white hover:bg-blue-700"> Badge blue </a>
        <a href="#" class="bg-lime inline-flex items-center justify-center rounded-md border border-transparent bg-lime-600 px-4 py-4 text-lg font-medium text-white hover:bg-lime-700"> Badge lime </a>
        <a href="#" class="bg-lime inline-flex items-center justify-center rounded-md border border-transparent bg-cyan-600 px-4 py-4 text-lg font-medium text-white hover:bg-cyan-700"> Badge cyan </a>
        <a href="#" class="bg-lime inline-flex items-center justify-center rounded-md border border-transparent bg-violet-600 px-4 py-4 text-lg font-medium text-white hover:bg-violet-700"> Badge violet </a>
        <a href="#" class="bg-lime inline-flex items-center justify-center rounded-md border border-transparent bg-sky-600 px-4 py-4 text-lg font-medium text-white hover:bg-sky-700"> Badge sky </a>
        <a href="#" class="bg-lime inline-flex items-center justify-center rounded-md border border-transparent bg-emerald-600 px-4 py-4 text-lg font-medium text-white hover:bg-emerald-700"> Badge emerald </a>
      </div>
  </div>
</div>
</div>

Badges with Dot

<div class="bg-gray-50">
<div class="mx-auto max-w-7xl py-12 px-4 sm:px-6 lg:flex lg:items-center lg:justify-between lg:py-16 lg:px-8">
  <div class="flex mt-8 lg:mt-0 lg:flex-shrink-0">
    <div class="flex flex-row gap-2 rounded-md shadow">
      <div class="flex flex-col gap-2">
        <h6 class="text-center text-black">Small</h6>
        <hr />
        <a href="#" class="inline-flex items-center justify-center rounded-full border border-transparent bg-indigo-600 px-2 py-2 text-xs font-medium text-indigo-600 hover:bg-indigo-700 bg-opacity-30 hover:text-white"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" class="w-2 h-2 mr-1"  viewBox="0 0 31.955 31.955" style="enable-background:new 0 0 31.955 31.955;" xml:space="preserve"><circle style='fill:currentColor' cx="15.979" cy="15.977" r="6.117"/></svg> Badge rounded-full </a>
        <a href="#" class="inline-flex items-center justify-center rounded-md border border-transparent bg-indigo-600 px-2 py-2 text-xs font-medium text-indigo-600 hover:bg-indigo-700 bg-opacity-30 hover:text-white"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" class="w-2 h-2 mr-1"  viewBox="0 0 31.955 31.955" style="enable-background:new 0 0 31.955 31.955;" xml:space="preserve"><circle style='fill:currentColor' cx="15.979" cy="15.977" r="6.117"/></svg> Badge rounded-md </a>
        <a href="#" class="rounded-xs inline-flex items-center justify-center border border-transparent bg-indigo-600 px-2 py-2 text-xs font-medium text-indigo-600 hover:bg-indigo-700 bg-opacity-30 hover:text-white"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" class="w-2 h-2 mr-1"  viewBox="0 0 31.955 31.955" style="enable-background:new 0 0 31.955 31.955;" xml:space="preserve"><circle style='fill:currentColor' cx="15.979" cy="15.977" r="6.117"/></svg> Badge rounded-xs </a>
        <a href="#" class="inline-flex items-center justify-center rounded-md border border-transparent bg-blue-600 px-2 py-2 text-xs font-medium text-blue-600 hover:bg-blue-700 bg-opacity-30 hover:text-white"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" class="w-2 h-2 mr-1"  viewBox="0 0 31.955 31.955" style="enable-background:new 0 0 31.955 31.955;" xml:space="preserve"><circle style='fill:currentColor' cx="15.979" cy="15.977" r="6.117"/></svg> Badge blue </a>
        <a href="#" class="bg-lime inline-flex items-center justify-center rounded-md border border-transparent bg-lime-600 px-2 py-2 text-xs font-medium text-lime-600 hover:bg-lime-700 bg-opacity-30 hover:text-white"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" class="w-2 h-2 mr-1"  viewBox="0 0 31.955 31.955" style="enable-background:new 0 0 31.955 31.955;" xml:space="preserve"><circle style='fill:currentColor' cx="15.979" cy="15.977" r="6.117"/></svg> Badge lime </a>
        <a href="#" class="bg-lime inline-flex items-center justify-center rounded-md border border-transparent bg-cyan-600 px-2 py-2 text-xs font-medium text-cyan-600 hover:bg-cyan-700 bg-opacity-30 hover:text-white"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" class="w-2 h-2 mr-1"  viewBox="0 0 31.955 31.955" style="enable-background:new 0 0 31.955 31.955;" xml:space="preserve"><circle style='fill:currentColor' cx="15.979" cy="15.977" r="6.117"/></svg> Badge cyan </a>
        <a href="#" class="bg-lime inline-flex items-center justify-center rounded-md border border-transparent bg-violet-600 px-2 py-2 text-xs font-medium text-violet-600 hover:bg-violet-700 bg-opacity-30 hover:text-white"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" class="w-2 h-2 mr-1"  viewBox="0 0 31.955 31.955" style="enable-background:new 0 0 31.955 31.955;" xml:space="preserve"><circle style='fill:currentColor' cx="15.979" cy="15.977" r="6.117"/></svg> Badge violet </a>
        <a href="#" class="bg-lime inline-flex items-center justify-center rounded-md border border-transparent bg-sky-600 px-2 py-2 text-xs font-medium text-sky-600 hover:bg-sky-700 bg-opacity-30 hover:text-white"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" class="w-2 h-2 mr-1"  viewBox="0 0 31.955 31.955" style="enable-background:new 0 0 31.955 31.955;" xml:space="preserve"><circle style='fill:currentColor' cx="15.979" cy="15.977" r="6.117"/></svg> Badge sky </a>
        <a href="#" class="bg-lime inline-flex items-center justify-center rounded-md border border-transparent bg-emerald-600 px-2 py-2 text-xs font-medium text-emerald-600 hover:bg-emerald-700 bg-opacity-30 hover:text-white"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" class="w-2 h-2 mr-1"  viewBox="0 0 31.955 31.955" style="enable-background:new 0 0 31.955 31.955;" xml:space="preserve"><circle style='fill:currentColor' cx="15.979" cy="15.977" r="6.117"/></svg> Badge emerald </a>
      </div>
     <div class="flex flex-col gap-2">
        <h6 class="text-center text-black">Base</h6>
        <hr />
        <a href="#" class="inline-flex items-center justify-center rounded-full border border-transparent bg-indigo-600 px-3 py-4 text-base font-medium text-indigo-600 hover:bg-indigo-700 bg-opacity-30 hover:text-white"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" class="w-2 h-2 mr-1"  viewBox="0 0 31.955 31.955" style="enable-background:new 0 0 31.955 31.955;" xml:space="preserve"><circle style='fill:currentColor' cx="15.979" cy="15.977" r="6.117"/></svg> Badge rounded-full </a>
        <a href="#" class="inline-flex items-center justify-center rounded-md border border-transparent bg-indigo-600 px-3 py-4 text-base font-medium text-indigo-600 hover:bg-indigo-700 bg-opacity-30 hover:text-white"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" class="w-2 h-2 mr-1"  viewBox="0 0 31.955 31.955" style="enable-background:new 0 0 31.955 31.955;" xml:space="preserve"><circle style='fill:currentColor' cx="15.979" cy="15.977" r="6.117"/></svg> Badge rounded-md </a>
        <a href="#" class="rounded-xs inline-flex items-center justify-center border border-transparent bg-indigo-600 px-3 py-4 text-base font-medium text-indigo-600 hover:bg-indigo-700 bg-opacity-30 hover:text-white"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" class="w-2 h-2 mr-1"  viewBox="0 0 31.955 31.955" style="enable-background:new 0 0 31.955 31.955;" xml:space="preserve"><circle style='fill:currentColor' cx="15.979" cy="15.977" r="6.117"/></svg> Badge rounded-xs </a>
        <a href="#" class="inline-flex items-center justify-center rounded-md border border-transparent bg-blue-600 px-3 py-4 text-base font-medium text-blue-600 hover:bg-blue-700 bg-opacity-30 hover:text-white"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" class="w-2 h-2 mr-1"  viewBox="0 0 31.955 31.955" style="enable-background:new 0 0 31.955 31.955;" xml:space="preserve"><circle style='fill:currentColor' cx="15.979" cy="15.977" r="6.117"/></svg> Badge blue </a>
        <a href="#" class="bg-lime inline-flex items-center justify-center rounded-md border border-transparent bg-lime-600 px-3 py-4 text-base font-medium text-lime-600 hover:bg-lime-700 bg-opacity-30 hover:text-white"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" class="w-2 h-2 mr-1"  viewBox="0 0 31.955 31.955" style="enable-background:new 0 0 31.955 31.955;" xml:space="preserve"><circle style='fill:currentColor' cx="15.979" cy="15.977" r="6.117"/></svg> Badge lime </a>
        <a href="#" class="bg-lime inline-flex items-center justify-center rounded-md border border-transparent bg-cyan-600 px-3 py-4 text-base font-medium text-cyan-600 hover:bg-cyan-700 bg-opacity-30 hover:text-white"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" class="w-2 h-2 mr-1"  viewBox="0 0 31.955 31.955" style="enable-background:new 0 0 31.955 31.955;" xml:space="preserve"><circle style='fill:currentColor' cx="15.979" cy="15.977" r="6.117"/></svg> Badge cyan </a>
        <a href="#" class="bg-lime inline-flex items-center justify-center rounded-md border border-transparent bg-violet-600 px-3 py-4 text-base font-medium text-violet-600 hover:bg-violet-700 bg-opacity-30 hover:text-white"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" class="w-2 h-2 mr-1"  viewBox="0 0 31.955 31.955" style="enable-background:new 0 0 31.955 31.955;" xml:space="preserve"><circle style='fill:currentColor' cx="15.979" cy="15.977" r="6.117"/></svg> Badge violet </a>
        <a href="#" class="bg-lime inline-flex items-center justify-center rounded-md border border-transparent bg-sky-600 px-3 py-4 text-base font-medium text-sky-600 hover:bg-sky-700 bg-opacity-30 hover:text-white"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" class="w-2 h-2 mr-1"  viewBox="0 0 31.955 31.955" style="enable-background:new 0 0 31.955 31.955;" xml:space="preserve"><circle style='fill:currentColor' cx="15.979" cy="15.977" r="6.117"/></svg> Badge sky </a>
        <a href="#" class="bg-lime inline-flex items-center justify-center rounded-md border border-transparent bg-emerald-600 px-3 py-4 text-base font-medium text-emerald-600 hover:bg-emerald-700 bg-opacity-30 hover:text-white"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" class="w-2 h-2 mr-1"  viewBox="0 0 31.955 31.955" style="enable-background:new 0 0 31.955 31.955;" xml:space="preserve"><circle style='fill:currentColor' cx="15.979" cy="15.977" r="6.117"/></svg> Badge emerald </a>
      </div><div class="flex flex-col gap-2">
        <h6 class="text-center text-black">Large</h6>
        <hr />
        <a href="#" class="inline-flex items-center justify-center rounded-full border border-transparent bg-indigo-600 px-4 py-4 text-lg font-medium text-indigo-600 hover:bg-indigo-700 bg-opacity-30 hover:text-white"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" class="w-2 h-2 mr-1"  viewBox="0 0 31.955 31.955" style="enable-background:new 0 0 31.955 31.955;" xml:space="preserve"><circle style='fill:currentColor' cx="15.979" cy="15.977" r="6.117"/></svg> Badge rounded-full </a>
        <a href="#" class="inline-flex items-center justify-center rounded-md border border-transparent bg-indigo-600 px-4 py-4 text-lg font-medium text-indigo-600 hover:bg-indigo-700 bg-opacity-30 hover:text-white"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" class="w-2 h-2 mr-1"  viewBox="0 0 31.955 31.955" style="enable-background:new 0 0 31.955 31.955;" xml:space="preserve"><circle style='fill:currentColor' cx="15.979" cy="15.977" r="6.117"/></svg> Badge rounded-md </a>
        <a href="#" class="rounded-xs inline-flex items-center justify-center border border-transparent bg-indigo-600 px-4 py-4 text-lg font-medium text-indigo-600 hover:bg-indigo-700 bg-opacity-30 hover:text-white"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" class="w-2 h-2 mr-1"  viewBox="0 0 31.955 31.955" style="enable-background:new 0 0 31.955 31.955;" xml:space="preserve"><circle style='fill:currentColor' cx="15.979" cy="15.977" r="6.117"/></svg> Badge rounded-xs </a>
        <a href="#" class="inline-flex items-center justify-center rounded-md border border-transparent bg-blue-600 px-4 py-4 text-lg font-medium text-blue-600 hover:bg-blue-700 bg-opacity-30 hover:text-white"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" class="w-2 h-2 mr-1"  viewBox="0 0 31.955 31.955" style="enable-background:new 0 0 31.955 31.955;" xml:space="preserve"><circle style='fill:currentColor' cx="15.979" cy="15.977" r="6.117"/></svg> Badge blue </a>
        <a href="#" class="bg-lime inline-flex items-center justify-center rounded-md border border-transparent bg-lime-600 px-4 py-4 text-lg font-medium text-lime-600 hover:bg-lime-700 bg-opacity-30 hover:text-white"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" class="w-2 h-2 mr-1"  viewBox="0 0 31.955 31.955" style="enable-background:new 0 0 31.955 31.955;" xml:space="preserve"><circle style='fill:currentColor' cx="15.979" cy="15.977" r="6.117"/></svg> Badge lime </a>
        <a href="#" class="bg-lime inline-flex items-center justify-center rounded-md border border-transparent bg-cyan-600 px-4 py-4 text-lg font-medium text-cyan-600 hover:bg-cyan-700 bg-opacity-30 hover:text-white"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" class="w-2 h-2 mr-1"  viewBox="0 0 31.955 31.955" style="enable-background:new 0 0 31.955 31.955;" xml:space="preserve"><circle style='fill:currentColor' cx="15.979" cy="15.977" r="6.117"/></svg> Badge cyan </a>
        <a href="#" class="bg-lime inline-flex items-center justify-center rounded-md border border-transparent bg-violet-600 px-4 py-4 text-lg font-medium text-violet-600 hover:bg-violet-700 bg-opacity-30 hover:text-white"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" class="w-2 h-2 mr-1"  viewBox="0 0 31.955 31.955" style="enable-background:new 0 0 31.955 31.955;" xml:space="preserve"><circle style='fill:currentColor' cx="15.979" cy="15.977" r="6.117"/></svg> Badge violet </a>
        <a href="#" class="bg-lime inline-flex items-center justify-center rounded-md border border-transparent bg-sky-600 px-4 py-4 text-lg font-medium text-sky-600 hover:bg-sky-700 bg-opacity-30 hover:text-white"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" class="w-2 h-2 mr-1"  viewBox="0 0 31.955 31.955" style="enable-background:new 0 0 31.955 31.955;" xml:space="preserve"><circle style='fill:currentColor' cx="15.979" cy="15.977" r="6.117"/></svg> Badge sky </a>
        <a href="#" class="bg-lime inline-flex items-center justify-center rounded-md border border-transparent bg-emerald-600 px-4 py-4 text-lg font-medium text-emerald-600 hover:bg-emerald-700 bg-opacity-30 hover:text-white"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" class="w-2 h-2 mr-1"  viewBox="0 0 31.955 31.955" style="enable-background:new 0 0 31.955 31.955;" xml:space="preserve"><circle style='fill:currentColor' cx="15.979" cy="15.977" r="6.117"/></svg> Badge emerald </a>
      </div>
  </div>
</div>
</div>

Closing Badge

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <style>
    .small,
    .big {
      transition: opacity 2s;
    }
    .remove {
      opacity: 0;
    }
  </style>
  <body class="bg-gray-100">
    <span
      id="badge-dismiss-default"
      class="small inline-flex items-center py-1 px-2 mr-2 text-xs font-medium text-blue-800 bg-blue-100 dark:bg-blue-200 rounded-full dark:text-blue-800"
    >
      Small
      <button
        type="button"
        class="inline-flex items-center p-0.5 ml-2 text-sm text-blue-400 bg-transparent rounded-sm hover:bg-blue-200 hover:text-blue-900 dark:hover:bg-blue-300 dark:hover:text-blue-900"
        onclick="cl(1)"
      >
        <svg
          aria-hidden="true"
          class="w-3.5 h-3.5"
          aria-hidden="true"
          fill="currentColor"
          viewBox="0 0 20 20"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            fill-rule="evenodd"
            d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
            clip-rule="evenodd"
          ></path>
        </svg>
      </button>
    </span>

    <span
      id="badge-dismiss-default"
      class="big inline-flex items-center py-1 px-2 mr-2 text-sm rounded-full font-medium text-blue-800 bg-blue-100 dark:bg-blue-200 ml-3 dark:text-blue-800"
    >
      Large
      <button
        type="button"
        class="inline-flex items-center p-0.5 ml-2 text-sm text-blue-400 bg-transparent rounded-sm hover:bg-blue-200 hover:text-blue-900 dark:hover:bg-blue-300 dark:hover:text-blue-900"
        onclick="cl(0)"
      >
        <svg
          aria-hidden="true"
          class="w-3.5 h-3.5"
          aria-hidden="true"
          fill="currentColor"
          viewBox="0 0 20 20"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            fill-rule="evenodd"
            d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
            clip-rule="evenodd"
          ></path>
        </svg>
      </button>
    </span>
  </body>
  <script>
    let small = document.querySelector(".small");
    let big = document.querySelector(".big");
    function cl(sm) {
      if (sm == 1) small.classList.add("remove");
      else big.classList.add("remove");
    }
    small.addEventListener("transitionend", () => {
      small.remove();
    });
    big.addEventListener("transitionend", () => {
      big.remove();
    });
  </script>
</html>

Card Badge

<div class="relative mx-10 my-10 max-w-sm rounded overflow-hidden shadow-lg"> 
 <span class="absolute right-0 top-0 inline-block py-1.5 px-2.5 leading-none text-center whitespace-nowrap align-baseline font-bold bg-red-600 text-xl text-white rounded">New</span>

<img class="w-full" src="https://media.istockphoto.com/photos/hot-air-balloons-picture-id184091124?s=612x612" alt="VK tailwind Bootstrap">
  <div class="px-6 py-4">
    <div class="font-bold text-xl mb-2">Welcome to VK tailwind Bootstrap</div>
    <p class="text-gray-700 text-base">
      Best part of card badge is to have a badge above a card. Nothing else 😆
    </p>
  </div>
</div>