How cool is to have coloured and meaningfull badges near your image/ cards/ testimonials. Sounds interesting, then why waiting to check inside 😎
<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>
<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>