Tailwind CSS Button Group Components
Tailwind CSS Button by TailGrids. Group or group buttons are indicates series of buttons in same line. Button group Tailwind CSS components are a must-have for any website. Group buttons or groups indicate a line of series of buttons that fall next to each other. At TailGrids, you can find a number of group button styles for free and you can choose the one that works the best according to your specific needs. All the Tailwind CSS components by TailGrids are expertly crafted by a team of professionals and the Tailwind CSS UI components are created with love to make sure they serve the purpose they were made for in the first place. Hence, check out our list of free Tailwind sections of button group to make your website even more attractive for your prospective customers and audiences.
Button Group Style 1
FREE
FREE
Button Group Style 1<div class="inline-flex">
<a href="javascript:void(0)" class="
py-[10px]
sm:py-3
px-[12px]
sm:px-6
inline-flex
items-center
justify-center
font-semibold
border border-primary
text-center text-white text-base
bg-primary
transition-all
hover:bg-primary hover:text-white hover:border-primary
">
About
</a>
<a href="javascript:void(0)" class="
py-[10px]
sm:py-3
px-[12px]
sm:px-6
inline-flex
items-center
justify-center
font-semibold
border-y border-light
text-center text-black text-sm
sm:text-base
transition-all
hover:bg-primary hover:text-white hover:border-primary
">
Profile
</a>
<a href="javascript:void(0)" class="
py-[10px]
sm:py-3
px-[12px]
sm:px-6
inline-flex
items-center
justify-center
font-semibold
border border-light
text-center text-black text-sm
sm:text-base
transition-all
hover:bg-primary hover:text-white hover:border-primary
">
Services
</a>
</div>
Button Group Style 2
FREE
FREE
Button Group Style 2<div class="inline-flex rounded-lg">
<a href="javascript:void(0)" class="
py-[10px]
sm:py-3
px-[12px]
sm:px-6
inline-flex
items-center
justify-center
font-semibold
border border-primary
text-center text-white text-base
bg-primary
transition-all
hover:bg-primary hover:text-white hover:border-primary
rounded-l-lg
">
About
</a>
<a href="javascript:void(0)" class="
py-[10px]
sm:py-3
px-[12px]
sm:px-6
inline-flex
items-center
justify-center
font-semibold
border-y border-light
text-center text-black text-sm
sm:text-base
transition-all
hover:bg-primary hover:text-white hover:border-primary
">
Profile
</a>
<a href="javascript:void(0)" class="
py-[10px]
sm:py-3
px-[12px]
sm:px-6
inline-flex
items-center
justify-center
font-semibold
border border-light
text-center text-black text-sm
sm:text-base
transition-all
hover:bg-primary hover:text-white hover:border-primary
rounded-r-lg
">
Services
</a>
</div>
Button Group Style 3
FREE
FREE
Button Group Style 3<div class="inline-flex rounded-full">
<a href="javascript:void(0)" class="
py-[10px]
sm:py-3
px-[12px]
sm:px-6
inline-flex
items-center
justify-center
font-semibold
border border-primary
text-center text-white text-base
bg-primary
transition-all
hover:bg-primary hover:text-white hover:border-primary
rounded-l-full
">
About
</a>
<a href="javascript:void(0)" class="
py-[10px]
sm:py-3
px-[12px]
sm:px-6
inline-flex
items-center
justify-center
font-semibold
border-y border-light
text-center text-black text-sm
sm:text-base
transition-all
hover:bg-primary hover:text-white hover:border-primary
">
Profile
</a>
<a href="javascript:void(0)" class="
py-[10px]
sm:py-3
px-[12px]
sm:px-6
inline-flex
items-center
justify-center
font-semibold
border border-light
text-center text-black text-sm
sm:text-base
transition-all
hover:bg-primary hover:text-white hover:border-primary
rounded-r-full
">
Services
</a>
</div>
Button Group Style 4
FREE
FREE
Button Group Style 4<div class="inline-flex">
<a href="javascript:void(0)" class="
py-[10px]
sm:py-3
px-[12px]
sm:px-6
inline-flex
items-center
justify-center
font-semibold
border border-primary
text-center text-white text-base
bg-primary
transition-all
hover:bg-primary hover:text-white hover:border-primary
">
<span class="pr-2">
<svg width="15" height="15" viewBox="0 0 15 15" class="fill-current">
<path d="M7.5 8.53125C9.42187 8.53125 10.9922 6.96094 10.9922 5.03906C10.9922 3.11719 9.42187 1.52344 7.5 1.52344C5.57812 1.52344 4.00781 3.09375 4.00781 5.01562C4.00781 6.9375 5.57812 8.53125 7.5 8.53125ZM7.5 2.34375C8.97656 2.34375 10.1719 3.53906 10.1719 5.01562C10.1719 6.49219 8.97656 7.6875 7.5 7.6875C6.02344 7.6875 4.82812 6.49219 4.82812 5.01562C4.82812 3.5625 6.02344 2.34375 7.5 2.34375Z"></path>
<path d="M14.555 12.75C12.6097 11.0859 10.1019 10.1719 7.50034 10.1719C4.89878 10.1719 2.39096 11.0859 0.445651 12.75C0.258151 12.8906 0.234714 13.1484 0.398776 13.3359C0.539401 13.5 0.797214 13.5234 0.984714 13.3828C2.7894 11.8594 5.10971 11.0156 7.52378 11.0156C9.93784 11.0156 12.2582 11.8594 14.0628 13.3828C14.1332 13.4531 14.2269 13.4766 14.3207 13.4766C14.4378 13.4766 14.555 13.4297 14.6253 13.3359C14.766 13.1484 14.7425 12.8906 14.555 12.75Z"></path>
</svg>
</span>
About
</a>
<a href="javascript:void(0)" class="
py-[10px]
sm:py-3
px-[12px]
sm:px-6
inline-flex
items-center
justify-center
font-semibold
border-y border-light
text-center text-black text-sm
sm:text-base
transition-all
hover:bg-primary hover:text-white hover:border-primary
">
<span class="pr-2">
<svg width="15" height="15" viewBox="0 0 15 15" class="fill-current">
<path d="M7.17188 4.40625H3.23438C3 4.40625 2.8125 4.59375 2.8125 4.82813C2.8125 5.0625 3 5.25 3.23438 5.25H7.17188C7.40625 5.25 7.59375 5.0625 7.59375 4.82813C7.59375 4.59375 7.38281 4.40625 7.17188 4.40625Z"></path>
<path d="M3.23438 7.07813H5.03906C5.27344 7.07813 5.46094 6.89063 5.46094 6.65625C5.46094 6.42187 5.27344 6.23438 5.03906 6.23438H3.23438C3 6.23438 2.8125 6.42187 2.8125 6.65625C2.8125 6.89063 3 7.07813 3.23438 7.07813Z"></path>
<path d="M6.25781 8.10938H3.21094C2.97656 8.10938 2.78906 8.29688 2.78906 8.53125C2.78906 8.76563 2.97656 8.95313 3.21094 8.95313H6.25781C6.49219 8.95313 6.67969 8.76563 6.67969 8.53125C6.67969 8.29688 6.49219 8.10938 6.25781 8.10938Z"></path>
<path d="M11.3447 4.05468C10.8056 3.98437 10.3134 4.24218 10.0556 4.71093C9.9384 4.92187 10.0322 5.15625 10.2197 5.27343C10.4306 5.39062 10.665 5.29687 10.7822 5.10937C10.8759 4.94531 11.0634 4.85156 11.2509 4.875C11.4618 4.89843 11.6259 5.0625 11.6493 5.25C11.6728 5.4375 11.579 5.60156 11.415 5.67187C11.0634 5.83593 10.8056 6.25781 10.8056 6.65625V6.96093C10.8056 7.19531 10.9931 7.38281 11.2275 7.38281C11.4618 7.38281 11.6493 7.19531 11.6493 6.96093V6.65625C11.6493 6.58593 11.7431 6.44531 11.8134 6.42187C12.2822 6.1875 12.5634 5.69531 12.4931 5.15625C12.3993 4.57031 11.9306 4.125 11.3447 4.05468Z"></path>
<path d="M11.2031 8.17969C10.8516 8.17969 10.5938 8.46094 10.5938 8.78906C10.5938 9.14062 10.875 9.39844 11.2031 9.39844C11.5547 9.39844 11.8125 9.11719 11.8125 8.78906C11.8359 8.46094 11.5547 8.17969 11.2031 8.17969Z"></path>
<path d="M12.9609 2.20312H2.03906C1.07813 2.20312 0.304688 2.97656 0.304688 3.9375V11.7422C0.304688 12.1172 0.492188 12.4453 0.820313 12.6328C0.984375 12.7266 1.14844 12.7734 1.33594 12.7734C1.52344 12.7734 1.6875 12.7266 1.85156 12.6328L4.57031 11.0625C4.59375 11.0391 4.64063 11.0391 4.66406 11.0391H12.9844C13.9453 11.0391 14.7188 10.2656 14.7188 9.30469V3.96094C14.7188 3 13.9219 2.20312 12.9609 2.20312ZM13.8984 9.32812C13.8984 9.84375 13.4766 10.2422 12.9844 10.2422H4.64063C4.45313 10.2422 4.28906 10.2891 4.125 10.3828L1.42969 11.9531C1.33594 12 1.24219 11.9766 1.21875 11.9531C1.19531 11.9297 1.125 11.8828 1.125 11.7656V3.96094C1.125 3.44531 1.54688 3.04688 2.03906 3.04688H12.9609C13.4766 3.04688 13.875 3.46875 13.875 3.96094V9.32812H13.8984Z"></path>
</svg>
</span>
Profile
</a>
<a href="javascript:void(0)" class="
py-[10px]
sm:py-3
px-[12px]
sm:px-6
inline-flex
items-center
justify-center
font-semibold
border border-light
text-center text-black text-sm
sm:text-base
transition-all
hover:bg-primary hover:text-white hover:border-primary
">
<span class="pr-2">
<svg width="15" height="15" viewBox="0 0 15 15" class="fill-current">
<path d="M12.5391 0.28125H11.3438C10.4063 0.28125 9.63281 1.05469 9.63281 1.99219V11.3906C9.63281 11.4609 9.65625 11.5313 9.70313 11.6016L11.4141 14.4141C11.5313 14.6016 11.7422 14.7188 11.9766 14.7188C12.2109 14.7188 12.4219 14.6016 12.5391 14.4141L14.25 11.6016C14.2969 11.5313 14.3203 11.4609 14.3203 11.3906V1.99219C14.25 1.05469 13.4766 0.28125 12.5391 0.28125ZM11.3438 1.10156H12.5391C13.0312 1.10156 13.4297 1.5 13.4297 1.99219V2.78906H10.4531V1.99219C10.4531 1.5 10.8516 1.10156 11.3438 1.10156ZM11.9297 13.7344L10.4297 11.2734V3.60938H13.4062V11.2734L11.9297 13.7344Z"></path>
<path d="M5.27344 0.304688H2.10938C1.35938 0.304688 0.75 0.914063 0.75 1.66406V13.3594C0.75 14.1094 1.35938 14.7188 2.10938 14.7188H5.27344C6.02344 14.7188 6.63281 14.1094 6.63281 13.3594V1.66406C6.60938 0.914063 6 0.304688 5.27344 0.304688ZM5.78906 13.3359C5.78906 13.6172 5.55469 13.875 5.25 13.875H2.10938C1.82813 13.875 1.57031 13.6406 1.57031 13.3359V12.3047C1.59375 12.3047 1.64062 12.3281 1.6875 12.3281H3.42188C3.65625 12.3281 3.84375 12.1406 3.84375 11.9063C3.84375 11.6719 3.65625 11.4844 3.42188 11.4844H1.6875C1.64062 11.4844 1.61719 11.4844 1.57031 11.5078V10.0078C1.59375 10.0078 1.64062 10.0313 1.6875 10.0313H2.20312C2.4375 10.0313 2.625 9.84375 2.625 9.60938C2.625 9.375 2.4375 9.1875 2.20312 9.1875H1.6875C1.64062 9.1875 1.61719 9.1875 1.57031 9.21094V7.73438C1.59375 7.73438 1.64062 7.75781 1.6875 7.75781H3.42188C3.65625 7.75781 3.84375 7.57031 3.84375 7.33594C3.84375 7.10156 3.65625 6.91406 3.42188 6.91406H1.6875C1.64062 6.91406 1.61719 6.91406 1.57031 6.9375V5.4375C1.59375 5.4375 1.64062 5.46094 1.6875 5.46094H2.20312C2.4375 5.46094 2.625 5.27344 2.625 5.03906C2.625 4.80469 2.4375 4.61719 2.20312 4.61719H1.6875C1.64062 4.61719 1.61719 4.61719 1.57031 4.64063V3.14063C1.59375 3.14063 1.64062 3.16406 1.6875 3.16406H3.42188C3.65625 3.16406 3.84375 2.97656 3.84375 2.74219C3.84375 2.50781 3.65625 2.34375 3.42188 2.34375H1.6875C1.64062 2.34375 1.61719 2.34375 1.57031 2.36719V1.66406C1.57031 1.38281 1.80469 1.125 2.10938 1.125H5.27344C5.55469 1.125 5.8125 1.35938 5.8125 1.66406V13.3359H5.78906Z"></path>
</svg>
</span>
Services
</a>
</div>
Button Group Style 5
FREE
FREE
Button Group Style 5<div class="inline-flex rounded-lg">
<a href="javascript:void(0)" class="
py-[10px]
sm:py-3
px-[12px]
sm:px-6
inline-flex
items-center
justify-center
font-semibold
border border-primary
text-center text-white text-base
bg-primary
transition-all
hover:bg-primary hover:text-white hover:border-primary
rounded-l-lg
">
<span class="pr-2">
<svg width="15" height="15" viewBox="0 0 15 15" class="fill-current">
<path d="M7.5 8.53125C9.42187 8.53125 10.9922 6.96094 10.9922 5.03906C10.9922 3.11719 9.42187 1.52344 7.5 1.52344C5.57812 1.52344 4.00781 3.09375 4.00781 5.01562C4.00781 6.9375 5.57812 8.53125 7.5 8.53125ZM7.5 2.34375C8.97656 2.34375 10.1719 3.53906 10.1719 5.01562C10.1719 6.49219 8.97656 7.6875 7.5 7.6875C6.02344 7.6875 4.82812 6.49219 4.82812 5.01562C4.82812 3.5625 6.02344 2.34375 7.5 2.34375Z"></path>
<path d="M14.555 12.75C12.6097 11.0859 10.1019 10.1719 7.50034 10.1719C4.89878 10.1719 2.39096 11.0859 0.445651 12.75C0.258151 12.8906 0.234714 13.1484 0.398776 13.3359C0.539401 13.5 0.797214 13.5234 0.984714 13.3828C2.7894 11.8594 5.10971 11.0156 7.52378 11.0156C9.93784 11.0156 12.2582 11.8594 14.0628 13.3828C14.1332 13.4531 14.2269 13.4766 14.3207 13.4766C14.4378 13.4766 14.555 13.4297 14.6253 13.3359C14.766 13.1484 14.7425 12.8906 14.555 12.75Z"></path>
</svg>
</span>
About
</a>
<a href="javascript:void(0)" class="
py-[10px]
sm:py-3
px-[12px]
sm:px-6
inline-flex
items-center
justify-center
font-semibold
border-y border-light
text-center text-black text-sm
sm:text-base
transition-all
hover:bg-primary hover:text-white hover:border-primary
">
<span class="pr-2">
<svg width="15" height="15" viewBox="0 0 15 15" class="fill-current">
<path d="M7.17188 4.40625H3.23438C3 4.40625 2.8125 4.59375 2.8125 4.82813C2.8125 5.0625 3 5.25 3.23438 5.25H7.17188C7.40625 5.25 7.59375 5.0625 7.59375 4.82813C7.59375 4.59375 7.38281 4.40625 7.17188 4.40625Z"></path>
<path d="M3.23438 7.07813H5.03906C5.27344 7.07813 5.46094 6.89063 5.46094 6.65625C5.46094 6.42187 5.27344 6.23438 5.03906 6.23438H3.23438C3 6.23438 2.8125 6.42187 2.8125 6.65625C2.8125 6.89063 3 7.07813 3.23438 7.07813Z"></path>
<path d="M6.25781 8.10938H3.21094C2.97656 8.10938 2.78906 8.29688 2.78906 8.53125C2.78906 8.76563 2.97656 8.95313 3.21094 8.95313H6.25781C6.49219 8.95313 6.67969 8.76563 6.67969 8.53125C6.67969 8.29688 6.49219 8.10938 6.25781 8.10938Z"></path>
<path d="M11.3447 4.05468C10.8056 3.98437 10.3134 4.24218 10.0556 4.71093C9.9384 4.92187 10.0322 5.15625 10.2197 5.27343C10.4306 5.39062 10.665 5.29687 10.7822 5.10937C10.8759 4.94531 11.0634 4.85156 11.2509 4.875C11.4618 4.89843 11.6259 5.0625 11.6493 5.25C11.6728 5.4375 11.579 5.60156 11.415 5.67187C11.0634 5.83593 10.8056 6.25781 10.8056 6.65625V6.96093C10.8056 7.19531 10.9931 7.38281 11.2275 7.38281C11.4618 7.38281 11.6493 7.19531 11.6493 6.96093V6.65625C11.6493 6.58593 11.7431 6.44531 11.8134 6.42187C12.2822 6.1875 12.5634 5.69531 12.4931 5.15625C12.3993 4.57031 11.9306 4.125 11.3447 4.05468Z"></path>
<path d="M11.2031 8.17969C10.8516 8.17969 10.5938 8.46094 10.5938 8.78906C10.5938 9.14062 10.875 9.39844 11.2031 9.39844C11.5547 9.39844 11.8125 9.11719 11.8125 8.78906C11.8359 8.46094 11.5547 8.17969 11.2031 8.17969Z"></path>
<path d="M12.9609 2.20312H2.03906C1.07813 2.20312 0.304688 2.97656 0.304688 3.9375V11.7422C0.304688 12.1172 0.492188 12.4453 0.820313 12.6328C0.984375 12.7266 1.14844 12.7734 1.33594 12.7734C1.52344 12.7734 1.6875 12.7266 1.85156 12.6328L4.57031 11.0625C4.59375 11.0391 4.64063 11.0391 4.66406 11.0391H12.9844C13.9453 11.0391 14.7188 10.2656 14.7188 9.30469V3.96094C14.7188 3 13.9219 2.20312 12.9609 2.20312ZM13.8984 9.32812C13.8984 9.84375 13.4766 10.2422 12.9844 10.2422H4.64063C4.45313 10.2422 4.28906 10.2891 4.125 10.3828L1.42969 11.9531C1.33594 12 1.24219 11.9766 1.21875 11.9531C1.19531 11.9297 1.125 11.8828 1.125 11.7656V3.96094C1.125 3.44531 1.54688 3.04688 2.03906 3.04688H12.9609C13.4766 3.04688 13.875 3.46875 13.875 3.96094V9.32812H13.8984Z"></path>
</svg>
</span>
Profile
</a>
<a href="javascript:void(0)" class="
py-[10px]
sm:py-3
px-[12px]
sm:px-6
inline-flex
items-center
justify-center
font-semibold
border border-light
text-center text-black text-sm
sm:text-base
transition-all
hover:bg-primary hover:text-white hover:border-primary
rounded-r-lg
">
<span class="pr-2">
<svg width="15" height="15" viewBox="0 0 15 15" class="fill-current">
<path d="M12.5391 0.28125H11.3438C10.4063 0.28125 9.63281 1.05469 9.63281 1.99219V11.3906C9.63281 11.4609 9.65625 11.5313 9.70313 11.6016L11.4141 14.4141C11.5313 14.6016 11.7422 14.7188 11.9766 14.7188C12.2109 14.7188 12.4219 14.6016 12.5391 14.4141L14.25 11.6016C14.2969 11.5313 14.3203 11.4609 14.3203 11.3906V1.99219C14.25 1.05469 13.4766 0.28125 12.5391 0.28125ZM11.3438 1.10156H12.5391C13.0312 1.10156 13.4297 1.5 13.4297 1.99219V2.78906H10.4531V1.99219C10.4531 1.5 10.8516 1.10156 11.3438 1.10156ZM11.9297 13.7344L10.4297 11.2734V3.60938H13.4062V11.2734L11.9297 13.7344Z"></path>
<path d="M5.27344 0.304688H2.10938C1.35938 0.304688 0.75 0.914063 0.75 1.66406V13.3594C0.75 14.1094 1.35938 14.7188 2.10938 14.7188H5.27344C6.02344 14.7188 6.63281 14.1094 6.63281 13.3594V1.66406C6.60938 0.914063 6 0.304688 5.27344 0.304688ZM5.78906 13.3359C5.78906 13.6172 5.55469 13.875 5.25 13.875H2.10938C1.82813 13.875 1.57031 13.6406 1.57031 13.3359V12.3047C1.59375 12.3047 1.64062 12.3281 1.6875 12.3281H3.42188C3.65625 12.3281 3.84375 12.1406 3.84375 11.9063C3.84375 11.6719 3.65625 11.4844 3.42188 11.4844H1.6875C1.64062 11.4844 1.61719 11.4844 1.57031 11.5078V10.0078C1.59375 10.0078 1.64062 10.0313 1.6875 10.0313H2.20312C2.4375 10.0313 2.625 9.84375 2.625 9.60938C2.625 9.375 2.4375 9.1875 2.20312 9.1875H1.6875C1.64062 9.1875 1.61719 9.1875 1.57031 9.21094V7.73438C1.59375 7.73438 1.64062 7.75781 1.6875 7.75781H3.42188C3.65625 7.75781 3.84375 7.57031 3.84375 7.33594C3.84375 7.10156 3.65625 6.91406 3.42188 6.91406H1.6875C1.64062 6.91406 1.61719 6.91406 1.57031 6.9375V5.4375C1.59375 5.4375 1.64062 5.46094 1.6875 5.46094H2.20312C2.4375 5.46094 2.625 5.27344 2.625 5.03906C2.625 4.80469 2.4375 4.61719 2.20312 4.61719H1.6875C1.64062 4.61719 1.61719 4.61719 1.57031 4.64063V3.14063C1.59375 3.14063 1.64062 3.16406 1.6875 3.16406H3.42188C3.65625 3.16406 3.84375 2.97656 3.84375 2.74219C3.84375 2.50781 3.65625 2.34375 3.42188 2.34375H1.6875C1.64062 2.34375 1.61719 2.34375 1.57031 2.36719V1.66406C1.57031 1.38281 1.80469 1.125 2.10938 1.125H5.27344C5.55469 1.125 5.8125 1.35938 5.8125 1.66406V13.3359H5.78906Z"></path>
</svg>
</span>
Services
</a>
</div>
Button Group Style 6
FREE
FREE
Button Group Style 6<div class="inline-flex rounded-full">
<a href="javascript:void(0)" class="
py-[10px]
sm:py-3
px-[12px]
sm:px-6
inline-flex
items-center
justify-center
font-semibold
border border-primary
text-center text-white text-base
bg-primary
transition-all
hover:bg-primary hover:text-white hover:border-primary
rounded-l-full
">
<span class="pr-2">
<svg width="15" height="15" viewBox="0 0 15 15" class="fill-current">
<path d="M7.5 8.53125C9.42187 8.53125 10.9922 6.96094 10.9922 5.03906C10.9922 3.11719 9.42187 1.52344 7.5 1.52344C5.57812 1.52344 4.00781 3.09375 4.00781 5.01562C4.00781 6.9375 5.57812 8.53125 7.5 8.53125ZM7.5 2.34375C8.97656 2.34375 10.1719 3.53906 10.1719 5.01562C10.1719 6.49219 8.97656 7.6875 7.5 7.6875C6.02344 7.6875 4.82812 6.49219 4.82812 5.01562C4.82812 3.5625 6.02344 2.34375 7.5 2.34375Z"></path>
<path d="M14.555 12.75C12.6097 11.0859 10.1019 10.1719 7.50034 10.1719C4.89878 10.1719 2.39096 11.0859 0.445651 12.75C0.258151 12.8906 0.234714 13.1484 0.398776 13.3359C0.539401 13.5 0.797214 13.5234 0.984714 13.3828C2.7894 11.8594 5.10971 11.0156 7.52378 11.0156C9.93784 11.0156 12.2582 11.8594 14.0628 13.3828C14.1332 13.4531 14.2269 13.4766 14.3207 13.4766C14.4378 13.4766 14.555 13.4297 14.6253 13.3359C14.766 13.1484 14.7425 12.8906 14.555 12.75Z"></path>
</svg>
</span>
About
</a>
<a href="javascript:void(0)" class="
py-[10px]
sm:py-3
px-[12px]
sm:px-6
inline-flex
items-center
justify-center
font-semibold
border-y border-light
text-center text-black text-sm
sm:text-base
transition-all
hover:bg-primary hover:text-white hover:border-primary
">
<span class="pr-2">
<svg width="15" height="15" viewBox="0 0 15 15" class="fill-current">
<path d="M7.17188 4.40625H3.23438C3 4.40625 2.8125 4.59375 2.8125 4.82813C2.8125 5.0625 3 5.25 3.23438 5.25H7.17188C7.40625 5.25 7.59375 5.0625 7.59375 4.82813C7.59375 4.59375 7.38281 4.40625 7.17188 4.40625Z"></path>
<path d="M3.23438 7.07813H5.03906C5.27344 7.07813 5.46094 6.89063 5.46094 6.65625C5.46094 6.42187 5.27344 6.23438 5.03906 6.23438H3.23438C3 6.23438 2.8125 6.42187 2.8125 6.65625C2.8125 6.89063 3 7.07813 3.23438 7.07813Z"></path>
<path d="M6.25781 8.10938H3.21094C2.97656 8.10938 2.78906 8.29688 2.78906 8.53125C2.78906 8.76563 2.97656 8.95313 3.21094 8.95313H6.25781C6.49219 8.95313 6.67969 8.76563 6.67969 8.53125C6.67969 8.29688 6.49219 8.10938 6.25781 8.10938Z"></path>
<path d="M11.3447 4.05468C10.8056 3.98437 10.3134 4.24218 10.0556 4.71093C9.9384 4.92187 10.0322 5.15625 10.2197 5.27343C10.4306 5.39062 10.665 5.29687 10.7822 5.10937C10.8759 4.94531 11.0634 4.85156 11.2509 4.875C11.4618 4.89843 11.6259 5.0625 11.6493 5.25C11.6728 5.4375 11.579 5.60156 11.415 5.67187C11.0634 5.83593 10.8056 6.25781 10.8056 6.65625V6.96093C10.8056 7.19531 10.9931 7.38281 11.2275 7.38281C11.4618 7.38281 11.6493 7.19531 11.6493 6.96093V6.65625C11.6493 6.58593 11.7431 6.44531 11.8134 6.42187C12.2822 6.1875 12.5634 5.69531 12.4931 5.15625C12.3993 4.57031 11.9306 4.125 11.3447 4.05468Z"></path>
<path d="M11.2031 8.17969C10.8516 8.17969 10.5938 8.46094 10.5938 8.78906C10.5938 9.14062 10.875 9.39844 11.2031 9.39844C11.5547 9.39844 11.8125 9.11719 11.8125 8.78906C11.8359 8.46094 11.5547 8.17969 11.2031 8.17969Z"></path>
<path d="M12.9609 2.20312H2.03906C1.07813 2.20312 0.304688 2.97656 0.304688 3.9375V11.7422C0.304688 12.1172 0.492188 12.4453 0.820313 12.6328C0.984375 12.7266 1.14844 12.7734 1.33594 12.7734C1.52344 12.7734 1.6875 12.7266 1.85156 12.6328L4.57031 11.0625C4.59375 11.0391 4.64063 11.0391 4.66406 11.0391H12.9844C13.9453 11.0391 14.7188 10.2656 14.7188 9.30469V3.96094C14.7188 3 13.9219 2.20312 12.9609 2.20312ZM13.8984 9.32812C13.8984 9.84375 13.4766 10.2422 12.9844 10.2422H4.64063C4.45313 10.2422 4.28906 10.2891 4.125 10.3828L1.42969 11.9531C1.33594 12 1.24219 11.9766 1.21875 11.9531C1.19531 11.9297 1.125 11.8828 1.125 11.7656V3.96094C1.125 3.44531 1.54688 3.04688 2.03906 3.04688H12.9609C13.4766 3.04688 13.875 3.46875 13.875 3.96094V9.32812H13.8984Z"></path>
</svg>
</span>
Profile
</a>
<a href="javascript:void(0)" class="
py-[10px]
sm:py-3
px-[12px]
sm:px-6
inline-flex
items-center
justify-center
font-semibold
border border-light
text-center text-black text-sm
sm:text-base
transition-all
hover:bg-primary hover:text-white hover:border-primary
rounded-r-full
">
<span class="pr-2">
<svg width="15" height="15" viewBox="0 0 15 15" class="fill-current">
<path d="M12.5391 0.28125H11.3438C10.4063 0.28125 9.63281 1.05469 9.63281 1.99219V11.3906C9.63281 11.4609 9.65625 11.5313 9.70313 11.6016L11.4141 14.4141C11.5313 14.6016 11.7422 14.7188 11.9766 14.7188C12.2109 14.7188 12.4219 14.6016 12.5391 14.4141L14.25 11.6016C14.2969 11.5313 14.3203 11.4609 14.3203 11.3906V1.99219C14.25 1.05469 13.4766 0.28125 12.5391 0.28125ZM11.3438 1.10156H12.5391C13.0312 1.10156 13.4297 1.5 13.4297 1.99219V2.78906H10.4531V1.99219C10.4531 1.5 10.8516 1.10156 11.3438 1.10156ZM11.9297 13.7344L10.4297 11.2734V3.60938H13.4062V11.2734L11.9297 13.7344Z"></path>
<path d="M5.27344 0.304688H2.10938C1.35938 0.304688 0.75 0.914063 0.75 1.66406V13.3594C0.75 14.1094 1.35938 14.7188 2.10938 14.7188H5.27344C6.02344 14.7188 6.63281 14.1094 6.63281 13.3594V1.66406C6.60938 0.914063 6 0.304688 5.27344 0.304688ZM5.78906 13.3359C5.78906 13.6172 5.55469 13.875 5.25 13.875H2.10938C1.82813 13.875 1.57031 13.6406 1.57031 13.3359V12.3047C1.59375 12.3047 1.64062 12.3281 1.6875 12.3281H3.42188C3.65625 12.3281 3.84375 12.1406 3.84375 11.9063C3.84375 11.6719 3.65625 11.4844 3.42188 11.4844H1.6875C1.64062 11.4844 1.61719 11.4844 1.57031 11.5078V10.0078C1.59375 10.0078 1.64062 10.0313 1.6875 10.0313H2.20312C2.4375 10.0313 2.625 9.84375 2.625 9.60938C2.625 9.375 2.4375 9.1875 2.20312 9.1875H1.6875C1.64062 9.1875 1.61719 9.1875 1.57031 9.21094V7.73438C1.59375 7.73438 1.64062 7.75781 1.6875 7.75781H3.42188C3.65625 7.75781 3.84375 7.57031 3.84375 7.33594C3.84375 7.10156 3.65625 6.91406 3.42188 6.91406H1.6875C1.64062 6.91406 1.61719 6.91406 1.57031 6.9375V5.4375C1.59375 5.4375 1.64062 5.46094 1.6875 5.46094H2.20312C2.4375 5.46094 2.625 5.27344 2.625 5.03906C2.625 4.80469 2.4375 4.61719 2.20312 4.61719H1.6875C1.64062 4.61719 1.61719 4.61719 1.57031 4.64063V3.14063C1.59375 3.14063 1.64062 3.16406 1.6875 3.16406H3.42188C3.65625 3.16406 3.84375 2.97656 3.84375 2.74219C3.84375 2.50781 3.65625 2.34375 3.42188 2.34375H1.6875C1.64062 2.34375 1.61719 2.34375 1.57031 2.36719V1.66406C1.57031 1.38281 1.80469 1.125 2.10938 1.125H5.27344C5.55469 1.125 5.8125 1.35938 5.8125 1.66406V13.3359H5.78906Z"></path>
</svg>
</span>
Services
</a>
</div>