tailgrids
Version:
Handcrafted Library of Tailwind CSS UI Components & Blocks for HTML, React and Vue.
769 lines (766 loc) • 66 kB
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Buttons | TailGrids</title>
<link
rel="shortcut icon"
href="../../assets/images/favicon.svg"
type="image/x-icon"
/>
<link rel="stylesheet" href="../../assets/css/tailwind.css" />
</head>
<body>
<!-- ====== Button Section Start -->
<section class="pb-10 pt-20 lg:pb-20 lg:pt-[120px] dark:bg-dark">
<div class="container mx-auto">
<div class="-mx-4 flex flex-wrap">
<div class="w-full px-4">
<div class="mb-5 flex flex-wrap items-center gap-5">
<a
href="javascript:void(0)"
class="inline-flex items-center justify-center border border-primary bg-primary px-7 py-3 text-center text-base font-medium text-white hover:border-[#1B44C8] hover:bg-[#1B44C8] active:border-[#1B44C8] active:bg-[#1B44C8] disabled:border-gray-3 disabled:bg-gray-3 disabled:text-dark-5"
>
Button
</a>
<a
href="javascript:void(0)"
class="inline-flex items-center justify-center border border-primary px-7 py-3 text-center text-base font-medium text-primary hover:bg-blue-light-5 active:bg-blue-light-3 disabled:border-gray-3 disabled:bg-gray-3 disabled:text-dark-5"
>
Button
</a>
<a
href="javascript:void(0)"
class="inline-flex items-center justify-center border border-transparent bg-white px-7 py-3 text-center text-base font-medium text-primary shadow-1 hover:bg-gray-2 active:border-blue-light-5 active:bg-blue-light-5 disabled:border-gray-3 disabled:bg-gray-3 disabled:text-dark-5"
>
Button
</a>
<a
href="javascript:void(0)"
class="inline-flex items-center justify-center rounded-md border border-primary bg-primary px-7 py-3 text-center text-base font-medium text-white hover:border-[#1B44C8] hover:bg-[#1B44C8] active:border-[#1B44C8] active:bg-[#1B44C8] disabled:border-gray-3 disabled:bg-gray-3 disabled:text-dark-5"
>
Button
</a>
<a
href="javascript:void(0)"
class="inline-flex items-center justify-center rounded-md border border-primary px-7 py-3 text-center text-base font-medium text-primary hover:bg-blue-light-5 active:bg-blue-light-3 disabled:border-gray-3 disabled:bg-gray-3 disabled:text-dark-5"
>
Button
</a>
<a
href="javascript:void(0)"
class="inline-flex items-center justify-center rounded-md border border-transparent bg-white px-7 py-3 text-center text-base font-medium text-primary shadow-1 hover:bg-gray-2 active:border-blue-light-5 active:bg-blue-light-5 disabled:border-gray-3 disabled:bg-gray-3 disabled:text-dark-5"
>
Button
</a>
<a
href="javascript:void(0)"
class="inline-flex items-center justify-center rounded-full border border-primary bg-primary px-7 py-3 text-center text-base font-medium text-white hover:border-[#1B44C8] hover:bg-[#1B44C8] active:border-[#1B44C8] active:bg-[#1B44C8] disabled:border-gray-3 disabled:bg-gray-3 disabled:text-dark-5"
>
Button
</a>
<a
href="javascript:void(0)"
class="inline-flex items-center justify-center rounded-full border border-primary px-7 py-3 text-center text-base font-medium text-primary hover:bg-blue-light-5 active:bg-blue-light-3 disabled:border-gray-3 disabled:bg-gray-3 disabled:text-dark-5"
>
Button
</a>
<a
href="javascript:void(0)"
class="inline-flex items-center justify-center rounded-full border border-transparent bg-white px-7 py-3 text-center text-base font-medium text-primary shadow-1 hover:bg-gray-2 active:border-blue-light-5 active:bg-blue-light-5 disabled:border-gray-3 disabled:bg-gray-3 disabled:text-dark-5"
>
Button
</a>
</div>
<div class="mb-5 flex flex-wrap items-center gap-5">
<a
href="javascript:void(0)"
class="inline-flex items-center justify-center border border-secondary bg-secondary px-7 py-3 text-center text-base font-medium text-white hover:border-[#0BB489] hover:bg-[#0BB489] disabled:border-gray-3 disabled:bg-gray-3 disabled:text-dark-5"
>
Button
</a>
<a
href="javascript:void(0)"
class="inline-flex items-center justify-center border border-secondary px-7 py-3 text-center text-base font-medium text-secondary hover:bg-[#E8FBF6] disabled:border-gray-3 disabled:bg-gray-3 disabled:text-dark-5"
>
Button
</a>
<a
href="javascript:void(0)"
class="inline-flex items-center justify-center border border-transparent bg-white px-7 py-3 text-center text-base font-medium text-secondary shadow-1 hover:bg-[#E8FBF6] disabled:border-gray-3 disabled:bg-gray-3 disabled:text-dark-5"
>
Button
</a>
<a
href="javascript:void(0)"
class="inline-flex items-center justify-center rounded-md border border-secondary bg-secondary px-7 py-3 text-center text-base font-medium text-white hover:border-[#0BB489] hover:bg-[#0BB489] disabled:border-gray-3 disabled:bg-gray-3 disabled:text-dark-5"
>
Button
</a>
<a
href="javascript:void(0)"
class="inline-flex items-center justify-center rounded-md border border-secondary px-7 py-3 text-center text-base font-medium text-secondary hover:bg-[#E8FBF6] disabled:border-gray-3 disabled:bg-gray-3 disabled:text-dark-5"
>
Button
</a>
<a
href="javascript:void(0)"
class="inline-flex items-center justify-center rounded-md border border-transparent bg-white px-7 py-3 text-center text-base font-medium text-secondary shadow-1 hover:bg-[#E8FBF6] disabled:border-gray-3 disabled:bg-gray-3 disabled:text-dark-5"
>
Button
</a>
<a
href="javascript:void(0)"
class="inline-flex items-center justify-center rounded-full border border-secondary bg-secondary px-7 py-3 text-center text-base font-medium text-white hover:border-[#0BB489] hover:bg-[#0BB489] disabled:border-gray-3 disabled:bg-gray-3 disabled:text-dark-5"
>
Button
</a>
<a
href="javascript:void(0)"
class="inline-flex items-center justify-center rounded-full border border-secondary px-7 py-3 text-center text-base font-medium text-secondary hover:bg-[#E8FBF6] disabled:border-gray-3 disabled:bg-gray-3 disabled:text-dark-5"
>
Button
</a>
<a
href="javascript:void(0)"
class="inline-flex items-center justify-center rounded-full border border-transparent bg-white px-7 py-3 text-center text-base font-medium text-secondary shadow-1 hover:bg-[#E8FBF6] disabled:border-gray-3 disabled:bg-gray-3 disabled:text-dark-5"
>
Button
</a>
</div>
<div class="mb-5 flex flex-wrap items-center gap-5">
<a
href="javascript:void(0)"
class="inline-flex items-center justify-center border border-dark bg-dark px-7 py-3 text-center text-base font-medium text-white hover:border-body-color hover:bg-body-color disabled:border-gray-3 disabled:bg-gray-3 disabled:text-dark-5 dark:border-dark-2 dark:bg-dark-2"
>
Button
</a>
<a
href="javascript:void(0)"
class="inline-flex items-center justify-center border border-dark px-7 py-3 text-center text-base font-medium text-dark hover:bg-gray-4 disabled:border-gray-3 disabled:bg-gray-3 disabled:text-dark-5 dark:border-dark-2 dark:text-white dark:hover:bg-dark-3"
>
Button
</a>
<a
href="javascript:void(0)"
class="inline-flex items-center justify-center border border-transparent bg-white px-7 py-3 text-center text-base font-medium text-dark shadow-1 hover:bg-gray-4 disabled:border-gray-3 disabled:bg-gray-3 disabled:text-dark-5 dark:bg-gray-2 dark:shadow-box-dark dark:hover:bg-dark-3"
>
Button
</a>
<a
href="javascript:void(0)"
class="inline-flex items-center justify-center rounded-md border border-dark bg-dark px-7 py-3 text-center text-base font-medium text-white hover:border-body-color hover:bg-body-color disabled:border-gray-3 disabled:bg-gray-3 disabled:text-dark-5 dark:border-dark-2 dark:bg-dark-2"
>
Button
</a>
<a
href="javascript:void(0)"
class="inline-flex items-center justify-center rounded-md border border-dark px-7 py-3 text-center text-base font-medium text-dark hover:bg-gray-4 disabled:border-gray-3 disabled:bg-gray-3 disabled:text-dark-5 dark:border-dark-2 dark:text-white dark:hover:bg-dark-3"
>
Button
</a>
<a
href="javascript:void(0)"
class="inline-flex items-center justify-center rounded-md border border-transparent bg-white px-7 py-3 text-center text-base font-medium text-dark shadow-1 hover:bg-gray-4 disabled:border-gray-3 disabled:bg-gray-3 disabled:text-dark-5 dark:bg-gray-2 dark:shadow-box-dark dark:hover:bg-dark-3"
>
Button
</a>
<a
href="javascript:void(0)"
class="inline-flex items-center justify-center rounded-full border border-dark bg-dark px-7 py-3 text-center text-base font-medium text-white hover:border-body-color hover:bg-body-color disabled:border-gray-3 disabled:bg-gray-3 disabled:text-dark-5 dark:border-dark-2 dark:bg-dark-2"
>
Button
</a>
<a
href="javascript:void(0)"
class="inline-flex items-center justify-center rounded-full border border-dark px-7 py-3 text-center text-base font-medium text-dark hover:bg-gray-4 disabled:border-gray-3 disabled:bg-gray-3 disabled:text-dark-5 dark:border-dark-2 dark:text-white dark:hover:bg-dark-3"
>
Button
</a>
<a
href="javascript:void(0)"
class="inline-flex items-center justify-center rounded-full border border-transparent bg-white px-7 py-3 text-center text-base font-medium text-dark shadow-1 hover:bg-gray-4 disabled:border-gray-3 disabled:bg-gray-3 disabled:text-dark-5 dark:bg-gray-2 dark:shadow-box-dark dark:hover:bg-dark-3"
>
Button
</a>
</div>
<div class="mb-5 flex flex-wrap items-center gap-5">
<a
href="javascript:void(0)"
class="inline-flex items-center justify-center border border-primary bg-primary px-7 py-3 text-center text-base font-medium text-white hover:border-[#1B44C8] hover:bg-[#1B44C8] active:border-[#1B44C8] active:bg-[#1B44C8] disabled:border-gray-3 disabled:bg-gray-3 disabled:text-dark-5"
>
<span class="pr-[10px]">
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
class="fill-current"
>
<g clip-path="url(#clip0_906_8052)">
<path
d="M13.1875 9.28125H10.6875V6.8125C10.6875 6.4375 10.375 6.125 9.96875 6.125C9.59375 6.125 9.28125 6.4375 9.28125 6.84375V9.3125H6.8125C6.4375 9.3125 6.125 9.625 6.125 10.0312C6.125 10.4062 6.4375 10.7187 6.84375 10.7187H9.3125V13.1875C9.3125 13.5625 9.625 13.875 10.0312 13.875C10.4062 13.875 10.7187 13.5625 10.7187 13.1562V10.6875H13.1875C13.5625 10.6875 13.875 10.375 13.875 9.96875C13.875 9.59375 13.5625 9.28125 13.1875 9.28125Z"
/>
<path
d="M10 0.5625C4.78125 0.5625 0.5625 4.78125 0.5625 10C0.5625 15.2188 4.8125 19.4688 10.0312 19.4688C15.25 19.4688 19.5 15.2188 19.5 10C19.4688 4.78125 15.2188 0.5625 10 0.5625ZM10 18.0625C5.5625 18.0625 1.96875 14.4375 1.96875 10C1.96875 5.5625 5.5625 1.96875 10 1.96875C14.4375 1.96875 18.0625 5.5625 18.0625 10C18.0625 14.4375 14.4375 18.0625 10 18.0625Z"
/>
</g>
<defs>
<clipPath id="clip0_906_8052">
<rect width="20" height="20" fill="white" />
</clipPath>
</defs>
</svg>
</span>
Button
</a>
<a
href="javascript:void(0)"
class="inline-flex items-center justify-center border border-primary px-7 py-3 text-center text-base font-medium text-primary hover:bg-blue-light-5 active:bg-blue-light-3 disabled:border-gray-3 disabled:bg-gray-3 disabled:text-dark-5"
>
<span class="pr-[10px]">
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
class="fill-current"
>
<g clip-path="url(#clip0_906_8052)">
<path
d="M13.1875 9.28125H10.6875V6.8125C10.6875 6.4375 10.375 6.125 9.96875 6.125C9.59375 6.125 9.28125 6.4375 9.28125 6.84375V9.3125H6.8125C6.4375 9.3125 6.125 9.625 6.125 10.0312C6.125 10.4062 6.4375 10.7187 6.84375 10.7187H9.3125V13.1875C9.3125 13.5625 9.625 13.875 10.0312 13.875C10.4062 13.875 10.7187 13.5625 10.7187 13.1562V10.6875H13.1875C13.5625 10.6875 13.875 10.375 13.875 9.96875C13.875 9.59375 13.5625 9.28125 13.1875 9.28125Z"
/>
<path
d="M10 0.5625C4.78125 0.5625 0.5625 4.78125 0.5625 10C0.5625 15.2188 4.8125 19.4688 10.0312 19.4688C15.25 19.4688 19.5 15.2188 19.5 10C19.4688 4.78125 15.2188 0.5625 10 0.5625ZM10 18.0625C5.5625 18.0625 1.96875 14.4375 1.96875 10C1.96875 5.5625 5.5625 1.96875 10 1.96875C14.4375 1.96875 18.0625 5.5625 18.0625 10C18.0625 14.4375 14.4375 18.0625 10 18.0625Z"
/>
</g>
<defs>
<clipPath id="clip0_906_8052">
<rect width="20" height="20" fill="white" />
</clipPath>
</defs>
</svg>
</span>
Button
</a>
<a
href="javascript:void(0)"
class="inline-flex items-center justify-center border border-transparent bg-white px-7 py-3 text-center text-base font-medium text-primary shadow-1 hover:bg-gray-2 active:border-blue-light-5 active:bg-blue-light-5 disabled:border-gray-3 disabled:bg-gray-3 disabled:text-dark-5"
>
<span class="pr-[10px]">
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
class="fill-current"
>
<g clip-path="url(#clip0_906_8052)">
<path
d="M13.1875 9.28125H10.6875V6.8125C10.6875 6.4375 10.375 6.125 9.96875 6.125C9.59375 6.125 9.28125 6.4375 9.28125 6.84375V9.3125H6.8125C6.4375 9.3125 6.125 9.625 6.125 10.0312C6.125 10.4062 6.4375 10.7187 6.84375 10.7187H9.3125V13.1875C9.3125 13.5625 9.625 13.875 10.0312 13.875C10.4062 13.875 10.7187 13.5625 10.7187 13.1562V10.6875H13.1875C13.5625 10.6875 13.875 10.375 13.875 9.96875C13.875 9.59375 13.5625 9.28125 13.1875 9.28125Z"
/>
<path
d="M10 0.5625C4.78125 0.5625 0.5625 4.78125 0.5625 10C0.5625 15.2188 4.8125 19.4688 10.0312 19.4688C15.25 19.4688 19.5 15.2188 19.5 10C19.4688 4.78125 15.2188 0.5625 10 0.5625ZM10 18.0625C5.5625 18.0625 1.96875 14.4375 1.96875 10C1.96875 5.5625 5.5625 1.96875 10 1.96875C14.4375 1.96875 18.0625 5.5625 18.0625 10C18.0625 14.4375 14.4375 18.0625 10 18.0625Z"
/>
</g>
<defs>
<clipPath id="clip0_906_8052">
<rect width="20" height="20" fill="white" />
</clipPath>
</defs>
</svg>
</span>
Button
</a>
<a
href="javascript:void(0)"
class="inline-flex items-center justify-center rounded-md border border-primary bg-primary px-7 py-3 text-center text-base font-medium text-white hover:border-[#1B44C8] hover:bg-[#1B44C8] active:border-[#1B44C8] active:bg-[#1B44C8] disabled:border-gray-3 disabled:bg-gray-3 disabled:text-dark-5"
>
<span class="pr-[10px]">
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
class="fill-current"
>
<g clip-path="url(#clip0_906_8052)">
<path
d="M13.1875 9.28125H10.6875V6.8125C10.6875 6.4375 10.375 6.125 9.96875 6.125C9.59375 6.125 9.28125 6.4375 9.28125 6.84375V9.3125H6.8125C6.4375 9.3125 6.125 9.625 6.125 10.0312C6.125 10.4062 6.4375 10.7187 6.84375 10.7187H9.3125V13.1875C9.3125 13.5625 9.625 13.875 10.0312 13.875C10.4062 13.875 10.7187 13.5625 10.7187 13.1562V10.6875H13.1875C13.5625 10.6875 13.875 10.375 13.875 9.96875C13.875 9.59375 13.5625 9.28125 13.1875 9.28125Z"
/>
<path
d="M10 0.5625C4.78125 0.5625 0.5625 4.78125 0.5625 10C0.5625 15.2188 4.8125 19.4688 10.0312 19.4688C15.25 19.4688 19.5 15.2188 19.5 10C19.4688 4.78125 15.2188 0.5625 10 0.5625ZM10 18.0625C5.5625 18.0625 1.96875 14.4375 1.96875 10C1.96875 5.5625 5.5625 1.96875 10 1.96875C14.4375 1.96875 18.0625 5.5625 18.0625 10C18.0625 14.4375 14.4375 18.0625 10 18.0625Z"
/>
</g>
<defs>
<clipPath id="clip0_906_8052">
<rect width="20" height="20" fill="white" />
</clipPath>
</defs>
</svg>
</span>
Button
</a>
<a
href="javascript:void(0)"
class="inline-flex items-center justify-center rounded-md border border-primary px-7 py-3 text-center text-base font-medium text-primary hover:bg-blue-light-5 active:bg-blue-light-3 disabled:border-gray-3 disabled:bg-gray-3 disabled:text-dark-5"
>
<span class="pr-[10px]">
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
class="fill-current"
>
<g clip-path="url(#clip0_906_8052)">
<path
d="M13.1875 9.28125H10.6875V6.8125C10.6875 6.4375 10.375 6.125 9.96875 6.125C9.59375 6.125 9.28125 6.4375 9.28125 6.84375V9.3125H6.8125C6.4375 9.3125 6.125 9.625 6.125 10.0312C6.125 10.4062 6.4375 10.7187 6.84375 10.7187H9.3125V13.1875C9.3125 13.5625 9.625 13.875 10.0312 13.875C10.4062 13.875 10.7187 13.5625 10.7187 13.1562V10.6875H13.1875C13.5625 10.6875 13.875 10.375 13.875 9.96875C13.875 9.59375 13.5625 9.28125 13.1875 9.28125Z"
/>
<path
d="M10 0.5625C4.78125 0.5625 0.5625 4.78125 0.5625 10C0.5625 15.2188 4.8125 19.4688 10.0312 19.4688C15.25 19.4688 19.5 15.2188 19.5 10C19.4688 4.78125 15.2188 0.5625 10 0.5625ZM10 18.0625C5.5625 18.0625 1.96875 14.4375 1.96875 10C1.96875 5.5625 5.5625 1.96875 10 1.96875C14.4375 1.96875 18.0625 5.5625 18.0625 10C18.0625 14.4375 14.4375 18.0625 10 18.0625Z"
/>
</g>
<defs>
<clipPath id="clip0_906_8052">
<rect width="20" height="20" fill="white" />
</clipPath>
</defs>
</svg>
</span>
Button
</a>
<a
href="javascript:void(0)"
class="inline-flex items-center justify-center rounded-md border border-transparent bg-white px-7 py-3 text-center text-base font-medium text-primary shadow-1 hover:bg-gray-2 active:border-blue-light-5 active:bg-blue-light-5 disabled:border-gray-3 disabled:bg-gray-3 disabled:text-dark-5"
>
<span class="pr-[10px]">
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
class="fill-current"
>
<g clip-path="url(#clip0_906_8052)">
<path
d="M13.1875 9.28125H10.6875V6.8125C10.6875 6.4375 10.375 6.125 9.96875 6.125C9.59375 6.125 9.28125 6.4375 9.28125 6.84375V9.3125H6.8125C6.4375 9.3125 6.125 9.625 6.125 10.0312C6.125 10.4062 6.4375 10.7187 6.84375 10.7187H9.3125V13.1875C9.3125 13.5625 9.625 13.875 10.0312 13.875C10.4062 13.875 10.7187 13.5625 10.7187 13.1562V10.6875H13.1875C13.5625 10.6875 13.875 10.375 13.875 9.96875C13.875 9.59375 13.5625 9.28125 13.1875 9.28125Z"
/>
<path
d="M10 0.5625C4.78125 0.5625 0.5625 4.78125 0.5625 10C0.5625 15.2188 4.8125 19.4688 10.0312 19.4688C15.25 19.4688 19.5 15.2188 19.5 10C19.4688 4.78125 15.2188 0.5625 10 0.5625ZM10 18.0625C5.5625 18.0625 1.96875 14.4375 1.96875 10C1.96875 5.5625 5.5625 1.96875 10 1.96875C14.4375 1.96875 18.0625 5.5625 18.0625 10C18.0625 14.4375 14.4375 18.0625 10 18.0625Z"
/>
</g>
<defs>
<clipPath id="clip0_906_8052">
<rect width="20" height="20" fill="white" />
</clipPath>
</defs>
</svg>
</span>
Button
</a>
<a
href="javascript:void(0)"
class="inline-flex items-center justify-center rounded-full border border-primary bg-primary px-7 py-3 text-center text-base font-medium text-white hover:border-[#1B44C8] hover:bg-[#1B44C8] active:border-[#1B44C8] active:bg-[#1B44C8] disabled:border-gray-3 disabled:bg-gray-3 disabled:text-dark-5"
>
<span class="pr-[10px]">
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
class="fill-current"
>
<g clip-path="url(#clip0_906_8052)">
<path
d="M13.1875 9.28125H10.6875V6.8125C10.6875 6.4375 10.375 6.125 9.96875 6.125C9.59375 6.125 9.28125 6.4375 9.28125 6.84375V9.3125H6.8125C6.4375 9.3125 6.125 9.625 6.125 10.0312C6.125 10.4062 6.4375 10.7187 6.84375 10.7187H9.3125V13.1875C9.3125 13.5625 9.625 13.875 10.0312 13.875C10.4062 13.875 10.7187 13.5625 10.7187 13.1562V10.6875H13.1875C13.5625 10.6875 13.875 10.375 13.875 9.96875C13.875 9.59375 13.5625 9.28125 13.1875 9.28125Z"
/>
<path
d="M10 0.5625C4.78125 0.5625 0.5625 4.78125 0.5625 10C0.5625 15.2188 4.8125 19.4688 10.0312 19.4688C15.25 19.4688 19.5 15.2188 19.5 10C19.4688 4.78125 15.2188 0.5625 10 0.5625ZM10 18.0625C5.5625 18.0625 1.96875 14.4375 1.96875 10C1.96875 5.5625 5.5625 1.96875 10 1.96875C14.4375 1.96875 18.0625 5.5625 18.0625 10C18.0625 14.4375 14.4375 18.0625 10 18.0625Z"
/>
</g>
<defs>
<clipPath id="clip0_906_8052">
<rect width="20" height="20" fill="white" />
</clipPath>
</defs>
</svg>
</span>
Button
</a>
<a
href="javascript:void(0)"
class="inline-flex items-center justify-center rounded-full border border-primary px-7 py-3 text-center text-base font-medium text-primary hover:bg-blue-light-5 active:bg-blue-light-3 disabled:border-gray-3 disabled:bg-gray-3 disabled:text-dark-5"
>
<span class="pr-[10px]">
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
class="fill-current"
>
<g clip-path="url(#clip0_906_8052)">
<path
d="M13.1875 9.28125H10.6875V6.8125C10.6875 6.4375 10.375 6.125 9.96875 6.125C9.59375 6.125 9.28125 6.4375 9.28125 6.84375V9.3125H6.8125C6.4375 9.3125 6.125 9.625 6.125 10.0312C6.125 10.4062 6.4375 10.7187 6.84375 10.7187H9.3125V13.1875C9.3125 13.5625 9.625 13.875 10.0312 13.875C10.4062 13.875 10.7187 13.5625 10.7187 13.1562V10.6875H13.1875C13.5625 10.6875 13.875 10.375 13.875 9.96875C13.875 9.59375 13.5625 9.28125 13.1875 9.28125Z"
/>
<path
d="M10 0.5625C4.78125 0.5625 0.5625 4.78125 0.5625 10C0.5625 15.2188 4.8125 19.4688 10.0312 19.4688C15.25 19.4688 19.5 15.2188 19.5 10C19.4688 4.78125 15.2188 0.5625 10 0.5625ZM10 18.0625C5.5625 18.0625 1.96875 14.4375 1.96875 10C1.96875 5.5625 5.5625 1.96875 10 1.96875C14.4375 1.96875 18.0625 5.5625 18.0625 10C18.0625 14.4375 14.4375 18.0625 10 18.0625Z"
/>
</g>
<defs>
<clipPath id="clip0_906_8052">
<rect width="20" height="20" fill="white" />
</clipPath>
</defs>
</svg>
</span>
Button
</a>
<a
href="javascript:void(0)"
class="inline-flex items-center justify-center rounded-full border border-transparent bg-white px-7 py-3 text-center text-base font-medium text-primary shadow-1 hover:bg-gray-2 active:border-blue-light-5 active:bg-blue-light-5 disabled:border-gray-3 disabled:bg-gray-3 disabled:text-dark-5"
>
<span class="pr-[10px]">
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
class="fill-current"
>
<g clip-path="url(#clip0_906_8052)">
<path
d="M13.1875 9.28125H10.6875V6.8125C10.6875 6.4375 10.375 6.125 9.96875 6.125C9.59375 6.125 9.28125 6.4375 9.28125 6.84375V9.3125H6.8125C6.4375 9.3125 6.125 9.625 6.125 10.0312C6.125 10.4062 6.4375 10.7187 6.84375 10.7187H9.3125V13.1875C9.3125 13.5625 9.625 13.875 10.0312 13.875C10.4062 13.875 10.7187 13.5625 10.7187 13.1562V10.6875H13.1875C13.5625 10.6875 13.875 10.375 13.875 9.96875C13.875 9.59375 13.5625 9.28125 13.1875 9.28125Z"
/>
<path
d="M10 0.5625C4.78125 0.5625 0.5625 4.78125 0.5625 10C0.5625 15.2188 4.8125 19.4688 10.0312 19.4688C15.25 19.4688 19.5 15.2188 19.5 10C19.4688 4.78125 15.2188 0.5625 10 0.5625ZM10 18.0625C5.5625 18.0625 1.96875 14.4375 1.96875 10C1.96875 5.5625 5.5625 1.96875 10 1.96875C14.4375 1.96875 18.0625 5.5625 18.0625 10C18.0625 14.4375 14.4375 18.0625 10 18.0625Z"
/>
</g>
<defs>
<clipPath id="clip0_906_8052">
<rect width="20" height="20" fill="white" />
</clipPath>
</defs>
</svg>
</span>
Button
</a>
</div>
<div class="mb-5 flex flex-wrap items-center gap-5">
<a
href="javascript:void(0)"
class="inline-flex items-center justify-center border border-secondary bg-secondary px-7 py-3 text-center text-base font-medium text-white hover:border-[#0BB489] hover:bg-[#0BB489] disabled:border-gray-3 disabled:bg-gray-3 disabled:text-dark-5"
>
<span class="pr-[10px]">
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
class="fill-current"
>
<g clip-path="url(#clip0_906_8052)">
<path
d="M13.1875 9.28125H10.6875V6.8125C10.6875 6.4375 10.375 6.125 9.96875 6.125C9.59375 6.125 9.28125 6.4375 9.28125 6.84375V9.3125H6.8125C6.4375 9.3125 6.125 9.625 6.125 10.0312C6.125 10.4062 6.4375 10.7187 6.84375 10.7187H9.3125V13.1875C9.3125 13.5625 9.625 13.875 10.0312 13.875C10.4062 13.875 10.7187 13.5625 10.7187 13.1562V10.6875H13.1875C13.5625 10.6875 13.875 10.375 13.875 9.96875C13.875 9.59375 13.5625 9.28125 13.1875 9.28125Z"
/>
<path
d="M10 0.5625C4.78125 0.5625 0.5625 4.78125 0.5625 10C0.5625 15.2188 4.8125 19.4688 10.0312 19.4688C15.25 19.4688 19.5 15.2188 19.5 10C19.4688 4.78125 15.2188 0.5625 10 0.5625ZM10 18.0625C5.5625 18.0625 1.96875 14.4375 1.96875 10C1.96875 5.5625 5.5625 1.96875 10 1.96875C14.4375 1.96875 18.0625 5.5625 18.0625 10C18.0625 14.4375 14.4375 18.0625 10 18.0625Z"
/>
</g>
<defs>
<clipPath id="clip0_906_8052">
<rect width="20" height="20" fill="white" />
</clipPath>
</defs>
</svg>
</span>
Button
</a>
<a
href="javascript:void(0)"
class="inline-flex items-center justify-center border border-secondary px-7 py-3 text-center text-base font-medium text-secondary hover:bg-[#E8FBF6] disabled:border-gray-3 disabled:bg-gray-3 disabled:text-dark-5"
>
<span class="pr-[10px]">
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
class="fill-current"
>
<g clip-path="url(#clip0_906_8052)">
<path
d="M13.1875 9.28125H10.6875V6.8125C10.6875 6.4375 10.375 6.125 9.96875 6.125C9.59375 6.125 9.28125 6.4375 9.28125 6.84375V9.3125H6.8125C6.4375 9.3125 6.125 9.625 6.125 10.0312C6.125 10.4062 6.4375 10.7187 6.84375 10.7187H9.3125V13.1875C9.3125 13.5625 9.625 13.875 10.0312 13.875C10.4062 13.875 10.7187 13.5625 10.7187 13.1562V10.6875H13.1875C13.5625 10.6875 13.875 10.375 13.875 9.96875C13.875 9.59375 13.5625 9.28125 13.1875 9.28125Z"
/>
<path
d="M10 0.5625C4.78125 0.5625 0.5625 4.78125 0.5625 10C0.5625 15.2188 4.8125 19.4688 10.0312 19.4688C15.25 19.4688 19.5 15.2188 19.5 10C19.4688 4.78125 15.2188 0.5625 10 0.5625ZM10 18.0625C5.5625 18.0625 1.96875 14.4375 1.96875 10C1.96875 5.5625 5.5625 1.96875 10 1.96875C14.4375 1.96875 18.0625 5.5625 18.0625 10C18.0625 14.4375 14.4375 18.0625 10 18.0625Z"
/>
</g>
<defs>
<clipPath id="clip0_906_8052">
<rect width="20" height="20" fill="white" />
</clipPath>
</defs>
</svg>
</span>
Button
</a>
<a
href="javascript:void(0)"
class="inline-flex items-center justify-center border border-transparent bg-white px-7 py-3 text-center text-base font-medium text-secondary shadow-1 hover:bg-[#E8FBF6] disabled:border-gray-3 disabled:bg-gray-3 disabled:text-dark-5"
>
<span class="pr-[10px]">
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
class="fill-current"
>
<g clip-path="url(#clip0_906_8052)">
<path
d="M13.1875 9.28125H10.6875V6.8125C10.6875 6.4375 10.375 6.125 9.96875 6.125C9.59375 6.125 9.28125 6.4375 9.28125 6.84375V9.3125H6.8125C6.4375 9.3125 6.125 9.625 6.125 10.0312C6.125 10.4062 6.4375 10.7187 6.84375 10.7187H9.3125V13.1875C9.3125 13.5625 9.625 13.875 10.0312 13.875C10.4062 13.875 10.7187 13.5625 10.7187 13.1562V10.6875H13.1875C13.5625 10.6875 13.875 10.375 13.875 9.96875C13.875 9.59375 13.5625 9.28125 13.1875 9.28125Z"
/>
<path
d="M10 0.5625C4.78125 0.5625 0.5625 4.78125 0.5625 10C0.5625 15.2188 4.8125 19.4688 10.0312 19.4688C15.25 19.4688 19.5 15.2188 19.5 10C19.4688 4.78125 15.2188 0.5625 10 0.5625ZM10 18.0625C5.5625 18.0625 1.96875 14.4375 1.96875 10C1.96875 5.5625 5.5625 1.96875 10 1.96875C14.4375 1.96875 18.0625 5.5625 18.0625 10C18.0625 14.4375 14.4375 18.0625 10 18.0625Z"
/>
</g>
<defs>
<clipPath id="clip0_906_8052">
<rect width="20" height="20" fill="white" />
</clipPath>
</defs>
</svg>
</span>
Button
</a>
<a
href="javascript:void(0)"
class="inline-flex items-center justify-center rounded-md border border-secondary bg-secondary px-7 py-3 text-center text-base font-medium text-white hover:border-[#0BB489] hover:bg-[#0BB489] disabled:border-gray-3 disabled:bg-gray-3 disabled:text-dark-5"
>
<span class="pr-[10px]">
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
class="fill-current"
>
<g clip-path="url(#clip0_906_8052)">
<path
d="M13.1875 9.28125H10.6875V6.8125C10.6875 6.4375 10.375 6.125 9.96875 6.125C9.59375 6.125 9.28125 6.4375 9.28125 6.84375V9.3125H6.8125C6.4375 9.3125 6.125 9.625 6.125 10.0312C6.125 10.4062 6.4375 10.7187 6.84375 10.7187H9.3125V13.1875C9.3125 13.5625 9.625 13.875 10.0312 13.875C10.4062 13.875 10.7187 13.5625 10.7187 13.1562V10.6875H13.1875C13.5625 10.6875 13.875 10.375 13.875 9.96875C13.875 9.59375 13.5625 9.28125 13.1875 9.28125Z"
/>
<path
d="M10 0.5625C4.78125 0.5625 0.5625 4.78125 0.5625 10C0.5625 15.2188 4.8125 19.4688 10.0312 19.4688C15.25 19.4688 19.5 15.2188 19.5 10C19.4688 4.78125 15.2188 0.5625 10 0.5625ZM10 18.0625C5.5625 18.0625 1.96875 14.4375 1.96875 10C1.96875 5.5625 5.5625 1.96875 10 1.96875C14.4375 1.96875 18.0625 5.5625 18.0625 10C18.0625 14.4375 14.4375 18.0625 10 18.0625Z"
/>
</g>
<defs>
<clipPath id="clip0_906_8052">
<rect width="20" height="20" fill="white" />
</clipPath>
</defs>
</svg>
</span>
Button
</a>
<a
href="javascript:void(0)"
class="inline-flex items-center justify-center rounded-md border border-secondary px-7 py-3 text-center text-base font-medium text-secondary hover:bg-[#E8FBF6] disabled:border-gray-3 disabled:bg-gray-3 disabled:text-dark-5"
>
<span class="pr-[10px]">
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
class="fill-current"
>
<g clip-path="url(#clip0_906_8052)">
<path
d="M13.1875 9.28125H10.6875V6.8125C10.6875 6.4375 10.375 6.125 9.96875 6.125C9.59375 6.125 9.28125 6.4375 9.28125 6.84375V9.3125H6.8125C6.4375 9.3125 6.125 9.625 6.125 10.0312C6.125 10.4062 6.4375 10.7187 6.84375 10.7187H9.3125V13.1875C9.3125 13.5625 9.625 13.875 10.0312 13.875C10.4062 13.875 10.7187 13.5625 10.7187 13.1562V10.6875H13.1875C13.5625 10.6875 13.875 10.375 13.875 9.96875C13.875 9.59375 13.5625 9.28125 13.1875 9.28125Z"
/>
<path
d="M10 0.5625C4.78125 0.5625 0.5625 4.78125 0.5625 10C0.5625 15.2188 4.8125 19.4688 10.0312 19.4688C15.25 19.4688 19.5 15.2188 19.5 10C19.4688 4.78125 15.2188 0.5625 10 0.5625ZM10 18.0625C5.5625 18.0625 1.96875 14.4375 1.96875 10C1.96875 5.5625 5.5625 1.96875 10 1.96875C14.4375 1.96875 18.0625 5.5625 18.0625 10C18.0625 14.4375 14.4375 18.0625 10 18.0625Z"
/>
</g>
<defs>
<clipPath id="clip0_906_8052">
<rect width="20" height="20" fill="white" />
</clipPath>
</defs>
</svg>
</span>
Button
</a>
<a
href="javascript:void(0)"
class="inline-flex items-center justify-center rounded-md border border-transparent bg-white px-7 py-3 text-center text-base font-medium text-secondary shadow-1 hover:bg-[#E8FBF6] disabled:border-gray-3 disabled:bg-gray-3 disabled:text-dark-5"
>
<span class="pr-[10px]">
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
class="fill-current"
>
<g clip-path="url(#clip0_906_8052)">
<path
d="M13.1875 9.28125H10.6875V6.8125C10.6875 6.4375 10.375 6.125 9.96875 6.125C9.59375 6.125 9.28125 6.4375 9.28125 6.84375V9.3125H6.8125C6.4375 9.3125 6.125 9.625 6.125 10.0312C6.125 10.4062 6.4375 10.7187 6.84375 10.7187H9.3125V13.1875C9.3125 13.5625 9.625 13.875 10.0312 13.875C10.4062 13.875 10.7187 13.5625 10.7187 13.1562V10.6875H13.1875C13.5625 10.6875 13.875 10.375 13.875 9.96875C13.875 9.59375 13.5625 9.28125 13.1875 9.28125Z"
/>
<path
d="M10 0.5625C4.78125 0.5625 0.5625 4.78125 0.5625 10C0.5625 15.2188 4.8125 19.4688 10.0312 19.4688C15.25 19.4688 19.5 15.2188 19.5 10C19.4688 4.78125 15.2188 0.5625 10 0.5625ZM10 18.0625C5.5625 18.0625 1.96875 14.4375 1.96875 10C1.96875 5.5625 5.5625 1.96875 10 1.96875C14.4375 1.96875 18.0625 5.5625 18.0625 10C18.0625 14.4375 14.4375 18.0625 10 18.0625Z"
/>
</g>
<defs>
<clipPath id="clip0_906_8052">
<rect width="20" height="20" fill="white" />
</clipPath>
</defs>
</svg>
</span>
Button
</a>
<a
href="javascript:void(0)"
class="inline-flex items-center justify-center rounded-full border border-secondary bg-secondary px-7 py-3 text-center text-base font-medium text-white hover:border-[#0BB489] hover:bg-[#0BB489] disabled:border-gray-3 disabled:bg-gray-3 disabled:text-dark-5"
>
<span class="pr-[10px]">
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
class="fill-current"
>
<g clip-path="url(#clip0_906_8052)">
<path
d="M13.1875 9.28125H10.6875V6.8125C10.6875 6.4375 10.375 6.125 9.96875 6.125C9.59375 6.125 9.28125 6.4375 9.28125 6.84375V9.3125H6.8125C6.4375 9.3125 6.125 9.625 6.125 10.0312C6.125 10.4062 6.4375 10.7187 6.84375 10.7187H9.3125V13.1875C9.3125 13.5625 9.625 13.875 10.0312 13.875C10.4062 13.875 10.7187 13.5625 10.7187 13.1562V10.6875H13.1875C13.5625 10.6875 13.875 10.375 13.875 9.96875C13.875 9.59375 13.5625 9.28125 13.1875 9.28125Z"
/>
<path
d="M10 0.5625C4.78125 0.5625 0.5625 4.78125 0.5625 10C0.5625 15.2188 4.8125 19.4688 10.0312 19.4688C15.25 19.4688 19.5 15.2188 19.5 10C19.4688 4.78125 15.2188 0.5625 10 0.5625ZM10 18.0625C5.5625 18.0625 1.96875 14.4375 1.96875 10C1.96875 5.5625 5.5625 1.96875 10 1.96875C14.4375 1.96875 18.0625 5.5625 18.0625 10C18.0625 14.4375 14.4375 18.0625 10 18.0625Z"
/>
</g>
<defs>
<clipPath id="clip0_906_8052">
<rect width="20" height="20" fill="white" />
</clipPath>
</defs>
</svg>
</span>
Button
</a>
<a
href="javascript:void(0)"
class="inline-flex items-center justify-center rounded-full border border-secondary px-7 py-3 text-center text-base font-medium text-secondary hover:bg-[#E8FBF6] disabled:border-gray-3 disabled:bg-gray-3 disabled:text-dark-5"
>
<span class="pr-[10px]">
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
class="fill-current"
>
<g clip-path="url(#clip0_906_8052)">
<path
d="M13.1875 9.28125H10.6875V6.8125C10.6875 6.4375 10.375 6.125 9.96875 6.125C9.59375 6.125 9.28125 6.4375 9.28125 6.84375V9.3125H6.8125C6.4375 9.3125 6.125 9.625 6.125 10.0312C6.125 10.4062 6.4375 10.7187 6.84375 10.7187H9.3125V13.1875C9.3125 13.5625 9.625 13.875 10.0312 13.875C10.4062 13.875 10.7187 13.5625 10.7187 13.1562V10.6875H13.1875C13.5625 10.6875 13.875 10.375 13.875 9.96875C13.875 9.59375 13.5625 9.28125 13.1875 9.28125Z"
/>
<path
d="M10 0.5625C4.78125 0.5625 0.5625 4.78125 0.5625 10C0.5625 15.2188 4.8125 19.4688 10.0312 19.4688C15.25 19.4688 19.5 15.2188 19.5 10C19.4688 4.78125 15.2188 0.5625 10 0.5625ZM10 18.0625C5.5625 18.0625 1.96875 14.4375 1.96875 10C1.96875 5.5625 5.5625 1.96875 10 1.96875C14.4375 1.96875 18.0625 5.5625 18.0625 10C18.0625 14.4375 14.4375 18.0625 10 18.0625Z"
/>
</g>
<defs>
<clipPath id="clip0_906_8052">
<rect width="20" height="20" fill="white" />
</clipPath>
</defs>
</svg>
</span>
Button
</a>
<a
href="javascript:void(0)"
class="inline-flex items-center justify-center rounded-full border border-transparent bg-white px-7 py-3 text-center text-base font-medium text-secondary shadow-1 hover:bg-[#E8FBF6] disabled:border-gray-3 disabled:bg-gray-3 disabled:text-dark-5"
>
<span class="pr-[10px]">
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
class="fill-current"
>
<g clip-path="url(#clip0_906_8052)">
<path
d="M13.1875 9.28125H10.6875V6.8125C10.6875 6.4375 10.375 6.125 9.96875 6.125C9.59375 6.125 9.28125 6.4375 9.28125 6.84375V9.3125H6.8125C6.4375 9.3125 6.125 9.625 6.125 10.0312C6.125 10.4062 6.4375 10.7187 6.84375 10.7187H9.3125V13.1875C9.3125 13.5625 9.625 13.875 10.0312 13.875C10.4062 13.875 10.7187 13.5625 10.7187 13.1562V10.6875H13.1875C13.5625 10.6875 13.875 10.375 13.875 9.96875C13.875 9.59375 13.5625 9.28125 13.1875 9.28125Z"
/>
<path
d="M10 0.5625C4.78125 0.5625 0.5625 4.78125 0.5625 10C0.5625 15.2188 4.8125 19.4688 10.0312 19.4688C15.25 19.4688 19.5 15.2188 19.5 10C19.4688 4.78125 15.2188 0.5625 10 0.5625ZM10 18.0625C5.5625 18.0625 1.96875 14.4375 1.96875 10C1.96875 5.5625 5.5625 1.96875 10 1.96875C14.4375 1.96875 18.0625 5.5625 18.0625 10C18.0625 14.4375 14.4375 18.0625 10 18.0625Z"
/>
</g>
<defs>
<clipPath id="clip0_906_8052">
<rect width="20" height="20" fill="white" />
</clipPath>
</defs>
</svg>
</span>
Button
</a>
</div>
<div class="mb-5 flex flex-wrap items-center gap-5">
<a
href="javascript:void(0)"
class="inline-flex items-center justify-center border border-dark bg-dark px-7 py-3 text-center text-base font-medium text-white hover:border-body-color hover:bg-body-color disabled:border-gray-3 disabled:bg-gray-3 disabled:text-dark-5 dark:border-dark-2 dark:bg-dark-2"
>
<span class="pr-[10px]">
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
class="fill-current"
>
<g clip-path="url(#clip0_906_8052)">
<path
d="M13.1875 9.28125H10.6875V6.8125C10.6875 6.4375 10.375 6.125 9.96875 6.125C9.59375 6.125 9.28125 6.4375 9.28125 6.84375V9.3125H6.8125C6.4375 9.3125 6.125 9.625 6.125 10.0312C6.125 10.4062 6.4375 10.7187 6.84375 10.7187H9.3125V13.1875C9.3125 13.5625 9.625 13.875 10.0312 13.875C10.4062 13.875 10.7187 13.5625 10.7187 13.1562V10.6875H13.1875C13.5625 10.6875 13.875 10.375 13.875 9.96875C13.875 9.59375 13.5625 9.28125 13.1875 9.28125Z"
/>
<path
d="M10 0.5625C4.78125 0.5625 0.5625 4.78125 0.5625 10C0.5625 15.2188 4.8125 19.4688 10.0312 19.4688C15.25 19.4688 19.5 15.2188 19.5 10C19.4688 4.78125 15.2188 0.5625 10 0.5625ZM10 18.0625C5.5625 18.0625 1.96875 14.4375 1.96875 10C1.96875 5.5625 5.5625 1.96875 10 1.96875C14.4375 1.96875 18.0625 5.5625 18.0625 10C18.0625 14.4375 14.4375 18.0625 10 18.0625Z"
/>
</g>
<defs>
<clipPath id="clip0_906_8052">
<rect width="20" height="20" fill="white" />
</clipPath>
</defs>
</svg>
</span>
Button
</a>
<a
href="javascript:void(0)"
class="inline-flex items-center justify-center border border-dark px-7 py-3 text-center text-base font-medium text-dark hover:bg-gray-4 disabled:border-gray-