Badge

Default

100

16

2

312

18

7

89

32

1

<div class="flex flex-wrap gap-1">
  <div class="jumpu-badge bg-gray-100">100</div>
  <div class="jumpu-badge bg-green-100 text-green-800">16</div>
  <div class="jumpu-badge bg-red-100 text-red-800">2</div>
  <div class="jumpu-badge bg-yellow-100 text-yellow-800">312</div>
  <div class="jumpu-badge bg-pink-100 text-pink-800">18</div>
  <div class="jumpu-badge bg-gray-100 text-gray-800">7</div>
  <div class="jumpu-badge bg-blue-100 text-blue-800">89</div>
  <div class="jumpu-badge bg-indigo-100 text-indigo-800">32</div>
  <div class="jumpu-badge bg-purple-100 text-purple-800">1</div>
</div>

Small

100

16

2

312

18

7

89

32

1

<div class="flex flex-wrap gap-1">
  <div class="jumpu-badge bg-gray-100 text-xs">100</div>
  <div class="jumpu-badge bg-green-100 text-xs text-green-800">16</div>
  <div class="jumpu-badge bg-red-100 text-xs text-red-800">2</div>
  <div class="jumpu-badge bg-yellow-100 text-xs text-yellow-800">312</div>
  <div class="jumpu-badge bg-pink-100 text-xs text-pink-800">18</div>
  <div class="jumpu-badge bg-gray-100 text-xs text-gray-800">7</div>
  <div class="jumpu-badge bg-blue-100 text-xs text-blue-800">89</div>
  <div class="jumpu-badge bg-indigo-100 text-xs text-indigo-800">32</div>
  <div class="jumpu-badge bg-purple-100 text-xs text-purple-800">1</div>
</div>