Tailwind UI Badge Component
<div-class="relative-inline-flex-items-center-justify-center-rounded-full-bg-gray-100-dark:bg-gray-800-shadow-md-transition-all-duration-300-hover:shadow-lg-hover:scale-105-h-12-w-12-text-lg">-<img-alt="John-Doe"-class="h-full-w-full-object-cover-rounded-full"-src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80">-<div-class="absolute--bottom-1--right-1-z-20">-<!---BEGIN-app/frontend/components/ui/badge_component/badge_component.html.erb---><!--app/frontend/components/ui/badge_component/badge_component.html.erb-->-<span-class="inline-flex-items-center-justify-center-whitespace-nowrap-rounded-full-font-medium-ring-1-ring-inset-bg-green-50-text-green-700-ring-green-600/20-dark:bg-green-500/20-dark:text-green-400-dark:ring-green-500/30-h-5-min-w-5-px-1.5-text-xs"-{}="">-<div-class="-ml-0.5-mr-1.5-h-2-w-2-rounded-full-bg-current"></div>-</span><!---END-app/frontend/components/ui/badge_component/badge_component.html.erb--->-</div>-</div>
