tailgrids
Version:
Handcrafted Library of Tailwind CSS UI Components & Blocks for HTML, React and Vue.
586 lines (570 loc) • 31.4 kB
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>Switch | 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>
<!-- ====== Switch Start -->
<section
class="relative z-10 overflow-hidden bg-white py-20 lg:py-[100px] dark:bg-dark"
>
<div class="container mx-auto">
<div class="-mx-4 flex flex-wrap items-center">
<div class="w-full px-4">
<div class="mb-10">
<div class="flex w-full flex-wrap items-center justify-center">
<div class="m-10">
<label
for="toggle"
class="flex cursor-pointer select-none items-center text-dark dark:text-white"
>
<div class="relative">
<input type="checkbox" id="toggle" class="peer sr-only" />
<div
class="block h-8 w-14 rounded-full bg-gray-3 dark:bg-dark-2"
></div>
<div
class="dot absolute left-1 top-1 h-6 w-6 rounded-full bg-white transition peer-checked:translate-x-full peer-checked:bg-primary dark:bg-dark-4"
></div>
</div>
</label>
</div>
<div class="m-10">
<label
for="toogle2"
class="flex cursor-pointer select-none items-center text-dark dark:text-white"
>
<div class="relative">
<input
id="toogle2"
type="checkbox"
class="peer sr-only"
/>
<div
class="h-5 w-14 rounded-full bg-gray-3 shadow-inner dark:bg-dark-2"
></div>
<div
class="dot absolute -top-1 left-0 h-7 w-7 rounded-full bg-white shadow-switch-1 transition peer-checked:translate-x-full peer-checked:bg-primary dark:bg-dark-4"
></div>
</div>
</label>
</div>
<div class="m-10">
<label
for="toggle3"
class="flex cursor-pointer select-none items-center text-dark dark:text-white"
>
<div class="relative">
<input
type="checkbox"
id="toggle3"
class="peer sr-only"
/>
<div
class="block h-8 w-14 rounded-full bg-gray-3 dark:bg-dark-2"
></div>
<div
class="dot absolute left-1 top-1 flex h-6 w-6 items-center justify-center rounded-full bg-white transition peer-checked:translate-x-full peer-checked:bg-primary dark:bg-dark-5"
>
<span class="active hidden">
<svg
width="11"
height="8"
viewBox="0 0 11 8"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M10.0915 0.951972L10.0867 0.946075L10.0813 0.940568C9.90076 0.753564 9.61034 0.753146 9.42927 0.939309L4.16201 6.22962L1.58507 3.63469C1.40401 3.44841 1.11351 3.44879 0.932892 3.63584C0.755703 3.81933 0.755703 4.10875 0.932892 4.29224L0.932878 4.29225L0.934851 4.29424L3.58046 6.95832C3.73676 7.11955 3.94983 7.2 4.1473 7.2C4.36196 7.2 4.55963 7.11773 4.71406 6.9584L10.0468 1.60234C10.2436 1.4199 10.2421 1.1339 10.0915 0.951972ZM4.2327 6.30081L4.2317 6.2998C4.23206 6.30015 4.23237 6.30049 4.23269 6.30082L4.2327 6.30081Z"
fill="white"
stroke="white"
stroke-width="0.4"
/>
</svg>
</span>
<span class="inactive text-body-color dark:text-light">
<svg
class="h-4 w-4 stroke-current"
fill="none"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M6 18L18 6M6 6l12 12"
></path>
</svg>
</span>
</div>
</div>
</label>
</div>
<div class="m-10">
<label
for="toggle4"
class="flex cursor-pointer select-none items-center text-dark dark:text-white"
>
<div class="relative">
<input
type="checkbox"
id="toggle4"
class="peer sr-only"
/>
<div
class="box block h-8 w-14 rounded-full bg-dark peer-checked:bg-primary dark:bg-dark-2"
></div>
<div
class="dot absolute left-1 top-1 flex h-6 w-6 items-center justify-center rounded-full bg-white transition peer-checked:translate-x-full dark:bg-dark-5 dark:peer-checked:bg-white"
></div>
</div>
</label>
</div>
<div class="m-10">
<label
for="toggle5"
class="group flex cursor-pointer select-none items-center text-dark dark:text-white"
>
<div class="relative">
<input
id="toggle5"
type="checkbox"
class="peer sr-only"
/>
<div
class="h-5 w-14 rounded-full bg-gray-3 shadow-inner dark:bg-dark-2"
></div>
<div
class="absolute -top-1 left-0 flex h-7 w-7 items-center justify-center rounded-full bg-white shadow-switch-1 transition peer-checked:translate-x-full dark:bg-dark-5 dark:peer-checked:bg-dark-3"
>
<span
class="h-4 w-4 rounded-full bg-gray-3 group-has-checked:bg-primary dark:bg-dark-2"
></span>
</div>
</div>
</label>
</div>
<div class="m-10">
<label
for="toggle6"
class="flex cursor-pointer select-none items-center text-dark dark:text-white"
>
<div class="relative">
<input
type="checkbox"
id="toggle6"
class="peer sr-only"
/>
<div
class="box block h-8 w-14 rounded-full bg-primary"
></div>
<div
class="absolute left-1 top-1 flex h-6 w-6 items-center justify-center rounded-full bg-white transition peer-checked:translate-x-full peer-checked:bg-white"
></div>
</div>
</label>
</div>
<div class="m-10">
<label
for="toggle7"
class="flex cursor-pointer select-none items-center text-dark dark:text-white"
>
<div class="relative">
<input
type="checkbox"
id="toggle7"
class="peer sr-only"
/>
<div
class="block h-8 w-14 rounded-full border border-[#BFCEFF] bg-gray-3 dark:border-dark-3 dark:bg-dark-2"
></div>
<div
class="absolute left-1 top-1 h-6 w-6 rounded-full bg-primary transition peer-checked:translate-x-full peer-checked:bg-primary"
></div>
</div>
</label>
</div>
<div class="m-10">
<label
for="toggle8"
class="flex cursor-pointer select-none items-center text-dark dark:text-white"
>
<div class="relative">
<input
id="toggle8"
type="checkbox"
class="peer sr-only"
/>
<div
class="h-5 w-14 rounded-full bg-dark shadow-inner transition peer-checked:bg-[#EAEEFB] dark:bg-dark-2 dark:peer-checked:bg-dark-3"
></div>
<div
class="absolute -top-1 left-0 flex h-7 w-7 items-center justify-center rounded-full bg-white text-dark shadow-switch-1 transition peer-checked:translate-x-full peer-checked:bg-primary peer-checked:text-white dark:bg-dark-3"
>
<span
class="h-4 w-4 rounded-full border border-current bg-inherit"
></span>
</div>
</div>
</label>
</div>
<div class="m-10">
<label
for="toggle9"
class="group flex cursor-pointer select-none items-center text-dark dark:text-white"
>
<div class="relative">
<input
type="checkbox"
id="toggle9"
class="peer sr-only"
/>
<div
class="block h-8 w-14 rounded-full bg-gray-3 dark:bg-dark-2"
></div>
<div
class="absolute left-1 top-1 flex h-6 w-6 items-center justify-center rounded-full bg-white transition peer-checked:translate-x-full peer-checked:bg-primary dark:bg-dark-3"
>
<span
class="h-3 w-3 rounded-full bg-primary group-has-checked:bg-white"
></span>
</div>
</div>
</label>
</div>
</div>
</div>
</div>
<div class="w-full">
<div class="-mx-4 flex flex-wrap">
<div class="mb-8 w-full px-4 md:w-1/2 lg:w-1/3">
<label
for="checkboxLabel1"
class="group flex cursor-pointer select-none items-center text-dark dark:text-white"
>
<div class="relative">
<input
type="checkbox"
id="checkboxLabel1"
class="peer sr-only"
/>
<div
class="mr-2.5 flex h-5 w-5 items-center justify-center rounded-sm border border-stroke peer-checked:border-primary peer-checked:bg-primary/10 dark:border-dark-3"
>
<span
class="h-2.5 w-2.5 rounded-xs group-has-checked:bg-primary"
></span>
</div>
</div>
Checkbox Text
</label>
</div>
<div class="mb-8 w-full px-4 md:w-1/2 lg:w-1/3">
<label
for="checkboxLabel2"
class="group flex cursor-pointer select-none items-center text-dark dark:text-white"
>
<div class="relative">
<input
type="checkbox"
id="checkboxLabel2"
class="peer sr-only"
/>
<div
class="mr-2.5 flex h-5 w-5 items-center justify-center rounded-sm border border-stroke peer-checked:border-primary peer-checked:bg-primary dark:border-dark-3"
>
<span class="opacity-0 group-has-checked:opacity-100">
<svg
width="11"
height="8"
viewBox="0 0 11 8"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M10.0915 0.951972L10.0867 0.946075L10.0813 0.940568C9.90076 0.753564 9.61034 0.753146 9.42927 0.939309L4.16201 6.22962L1.58507 3.63469C1.40401 3.44841 1.11351 3.44879 0.932892 3.63584C0.755703 3.81933 0.755703 4.10875 0.932892 4.29224L0.932878 4.29225L0.934851 4.29424L3.58046 6.95832C3.73676 7.11955 3.94983 7.2 4.1473 7.2C4.36196 7.2 4.55963 7.11773 4.71406 6.9584L10.0468 1.60234C10.2436 1.4199 10.2421 1.1339 10.0915 0.951972ZM4.2327 6.30081L4.2317 6.2998C4.23206 6.30015 4.23237 6.30049 4.23269 6.30082L4.2327 6.30081Z"
fill="white"
stroke="white"
stroke-width="0.4"
/>
</svg>
</span>
</div>
</div>
Checkbox Text
</label>
</div>
<div class="mb-8 w-full px-4 md:w-1/2 lg:w-1/3">
<label
for="checkboxLabel3"
class="group flex cursor-pointer select-none items-center text-dark dark:text-white"
>
<div class="relative">
<input
type="checkbox"
id="checkboxLabel3"
class="peer sr-only"
/>
<div
class="mr-2.5 flex h-5 w-5 items-center justify-center rounded-sm border border-stroke peer-checked:border-primary peer-checked:bg-primary/10 dark:border-dark-3"
>
<span
class="text-primary opacity-0 group-has-checked:opacity-100"
>
<svg
class="h-[14px] w-[14px] stroke-current"
fill="none"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M6 18L18 6M6 6l12 12"
></path>
</svg>
</span>
</div>
</div>
Checkbox Text
</label>
</div>
<div class="mb-8 w-full px-4 md:w-1/2 lg:w-1/3">
<label
for="checkboxLabel4"
class="group flex cursor-pointer select-none items-center text-dark dark:text-white"
>
<div class="relative">
<input
type="checkbox"
id="checkboxLabel4"
class="peer sr-only"
/>
<div
class="mr-2.5 flex h-5 w-5 items-center justify-center rounded-full border border-stroke peer-checked:border-primary peer-checked:bg-primary/10 dark:border-dark-3"
>
<span
class="block h-2.5 w-2.5 rounded-full bg-transparent group-has-checked:bg-primary"
>
</span>
</div>
</div>
Checkbox Text
</label>
</div>
<div class="mb-8 w-full px-4 md:w-1/2 lg:w-1/3">
<label
for="checkboxLabel5"
class="group flex cursor-pointer select-none items-center text-dark dark:text-white"
>
<div class="relative">
<input
type="checkbox"
id="checkboxLabel5"
class="peer sr-only"
/>
<div
class="mr-2.5 flex h-5 w-5 items-center justify-center rounded-full border border-primary bg-transparent peer-checked:bg-primary"
>
<span class="h-2.5 w-2.5 rounded-full bg-white"> </span>
</div>
</div>
Checkbox Text
</label>
</div>
</div>
</div>
<div class="w-full">
<div class="mb-12">
<label
for="autoSaver"
class="autoSaverSwitch relative inline-flex cursor-pointer select-none items-center"
>
<input
type="checkbox"
name="autoSaver"
id="autoSaver"
class="sr-only"
/>
<span
class="slider mr-3 flex h-[26px] w-[50px] items-center rounded-full bg-[#CCCCCE] p-1 duration-200 dark:bg-dark-2"
>
<span
class="dot h-[18px] w-[18px] rounded-full bg-white duration-200"
></span>
</span>
<span
class="label flex items-center text-sm font-medium text-dark dark:text-white"
>
Auto Saver <span class="on hidden pl-1"> On </span>
<span class="off pl-1"> Off </span>
</span>
</label>
</div>
<div class="mb-12">
<label
for="themeSwitcherOne"
class="themeSwitcherTwo relative inline-flex cursor-pointer select-none items-center justify-center rounded-md bg-white p-1 shadow-two dark:bg-dark-2"
>
<input
type="checkbox"
name="themeSwitcherOne"
id="themeSwitcherOne"
class="sr-only"
/>
<span
class="light flex items-center space-x-[6px] rounded-sm bg-gray px-[18px] py-2 text-sm font-medium text-primary dark:bg-dark-3"
>
<svg
width="16"
height="16"
viewBox="0 0 16 16"
class="mr-[6px] fill-current"
>
<g clip-path="url(#clip0_3122_652)">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M8 0C8.36819 0 8.66667 0.298477 8.66667 0.666667V2C8.66667 2.36819 8.36819 2.66667 8 2.66667C7.63181 2.66667 7.33333 2.36819 7.33333 2V0.666667C7.33333 0.298477 7.63181 0 8 0ZM8 5.33333C6.52724 5.33333 5.33333 6.52724 5.33333 8C5.33333 9.47276 6.52724 10.6667 8 10.6667C9.47276 10.6667 10.6667 9.47276 10.6667 8C10.6667 6.52724 9.47276 5.33333 8 5.33333ZM4 8C4 5.79086 5.79086 4 8 4C10.2091 4 12 5.79086 12 8C12 10.2091 10.2091 12 8 12C5.79086 12 4 10.2091 4 8ZM8.66667 14C8.66667 13.6318 8.36819 13.3333 8 13.3333C7.63181 13.3333 7.33333 13.6318 7.33333 14V15.3333C7.33333 15.7015 7.63181 16 8 16C8.36819 16 8.66667 15.7015 8.66667 15.3333V14ZM2.3411 2.3424C2.60145 2.08205 3.02356 2.08205 3.28391 2.3424L4.23057 3.28906C4.49092 3.54941 4.49092 3.97152 4.23057 4.23187C3.97022 4.49222 3.54811 4.49222 3.28776 4.23187L2.3411 3.28521C2.08075 3.02486 2.08075 2.60275 2.3411 2.3424ZM12.711 11.7682C12.4506 11.5078 12.0285 11.5078 11.7682 11.7682C11.5078 12.0285 11.5078 12.4506 11.7682 12.711L12.7148 13.6577C12.9752 13.918 13.3973 13.918 13.6577 13.6577C13.918 13.3973 13.918 12.9752 13.6577 12.7148L12.711 11.7682ZM0 8C0 7.63181 0.298477 7.33333 0.666667 7.33333H2C2.36819 7.33333 2.66667 7.63181 2.66667 8C2.66667 8.36819 2.36819 8.66667 2 8.66667H0.666667C0.298477 8.66667 0 8.36819 0 8ZM14 7.33333C13.6318 7.33333 13.3333 7.63181 13.3333 8C13.3333 8.36819 13.6318 8.66667 14 8.66667H15.3333C15.7015 8.66667 16 8.36819 16 8C16 7.63181 15.7015 7.33333 15.3333 7.33333H14ZM4.23057 11.7682C4.49092 12.0285 4.49092 12.4506 4.23057 12.711L3.28391 13.6577C3.02356 13.918 2.60145 13.918 2.3411 13.6577C2.08075 13.3973 2.08075 12.9752 2.3411 12.7148L3.28776 11.7682C3.54811 11.5078 3.97022 11.5078 4.23057 11.7682ZM13.6577 3.28521C13.918 3.02486 13.918 2.60275 13.6577 2.3424C13.3973 2.08205 12.9752 2.08205 12.7148 2.3424L11.7682 3.28906C11.5078 3.54941 11.5078 3.97152 11.7682 4.23187C12.0285 4.49222 12.4506 4.49222 12.711 4.23187L13.6577 3.28521Z"
/>
</g>
<defs>
<clipPath id="clip0_3122_652">
<rect width="16" height="16" fill="white" />
</clipPath>
</defs>
</svg>
Light Mode
</span>
<span
class="dark flex items-center space-x-[6px] rounded-sm px-[18px] py-2 text-sm font-medium text-body-color"
>
<svg
width="16"
height="16"
viewBox="0 0 16 16"
class="mr-[6px] fill-current"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M8.0547 1.67334C8.18372 1.90227 8.16622 2.18562 8.01003 2.39693C7.44055 3.16737 7.16651 4.11662 7.23776 5.07203C7.30901 6.02744 7.72081 6.92554 8.39826 7.60299C9.07571 8.28044 9.97381 8.69224 10.9292 8.76349C11.8846 8.83473 12.8339 8.5607 13.6043 7.99122C13.8156 7.83502 14.099 7.81753 14.3279 7.94655C14.5568 8.07556 14.6886 8.32702 14.6644 8.58868C14.5479 9.84957 14.0747 11.0512 13.3002 12.053C12.5256 13.0547 11.4818 13.8152 10.2909 14.2454C9.09992 14.6756 7.81108 14.7577 6.57516 14.4821C5.33925 14.2065 4.20738 13.5846 3.312 12.6892C2.41661 11.7939 1.79475 10.662 1.51917 9.42608C1.24359 8.19017 1.32569 6.90133 1.75588 5.71038C2.18606 4.51942 2.94652 3.47561 3.94828 2.70109C4.95005 1.92656 6.15168 1.45335 7.41257 1.33682C7.67423 1.31264 7.92568 1.44442 8.0547 1.67334ZM6.21151 2.96004C5.6931 3.1476 5.20432 3.41535 4.76384 3.75591C3.96242 4.37553 3.35405 5.21058 3.00991 6.16334C2.66576 7.11611 2.60008 8.14718 2.82054 9.13591C3.04101 10.1246 3.5385 11.0301 4.25481 11.7464C4.97111 12.4627 5.87661 12.9602 6.86534 13.1807C7.85407 13.4012 8.88514 13.3355 9.8379 12.9913C10.7907 12.6472 11.6257 12.0388 12.2453 11.2374C12.5859 10.7969 12.8536 10.3081 13.0412 9.78974C12.3391 10.0437 11.586 10.1495 10.8301 10.0931C9.55619 9.99813 8.35872 9.44907 7.45545 8.5458C6.55218 7.64253 6.00312 6.44506 5.90812 5.17118C5.85174 4.4152 5.9575 3.66212 6.21151 2.96004Z"
/>
</svg>
Dark Mode
</span>
</label>
</div>
<div class="mb-12">
<label
for="themeSwitcherTwo"
class="themeSwitcherTwo relative inline-flex cursor-pointer select-none items-center"
>
<input
type="checkbox"
name="themeSwitcherTwo"
id="themeSwitcherTwo"
class="sr-only"
/>
<span
class="label flex items-center text-sm font-medium text-dark dark:text-white"
>
Light
</span>
<span
class="slider mx-4 flex h-8 w-[60px] items-center rounded-full bg-[#CCCCCE] p-1 duration-200"
>
<span
class="dot h-6 w-6 rounded-full bg-white duration-200"
></span>
</span>
<span
class="label flex items-center text-sm font-medium text-dark dark:text-white"
>
Dark
</span>
</label>
</div>
<div class="mb-12">
<label
for="themeSwitcherThree"
class="themeSwitcherThree relative inline-flex cursor-pointer select-none items-center"
>
<input
type="checkbox"
name="themeSwitcherThree"
id="themeSwitcherThree"
class="sr-only"
/>
<span
class="mr-[18px] text-sm font-medium text-dark dark:text-white"
>
Switch Version
</span>
<div
class="flex h-[46px] w-[82px] items-center justify-center rounded-md bg-white shadow-two dark:bg-dark-2"
>
<span
class="light flex h-9 w-9 items-center justify-center rounded-sm bg-primary text-white"
>
<svg
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g clip-path="url(#clip0_3128_692)">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M8 0C8.36819 0 8.66667 0.298477 8.66667 0.666667V2C8.66667 2.36819 8.36819 2.66667 8 2.66667C7.63181 2.66667 7.33333 2.36819 7.33333 2V0.666667C7.33333 0.298477 7.63181 0 8 0ZM8 5.33333C6.52724 5.33333 5.33333 6.52724 5.33333 8C5.33333 9.47276 6.52724 10.6667 8 10.6667C9.47276 10.6667 10.6667 9.47276 10.6667 8C10.6667 6.52724 9.47276 5.33333 8 5.33333ZM4 8C4 5.79086 5.79086 4 8 4C10.2091 4 12 5.79086 12 8C12 10.2091 10.2091 12 8 12C5.79086 12 4 10.2091 4 8ZM8.66667 14C8.66667 13.6318 8.36819 13.3333 8 13.3333C7.63181 13.3333 7.33333 13.6318 7.33333 14V15.3333C7.33333 15.7015 7.63181 16 8 16C8.36819 16 8.66667 15.7015 8.66667 15.3333V14ZM2.3411 2.3424C2.60145 2.08205 3.02356 2.08205 3.28391 2.3424L4.23057 3.28906C4.49092 3.54941 4.49092 3.97152 4.23057 4.23187C3.97022 4.49222 3.54811 4.49222 3.28776 4.23187L2.3411 3.28521C2.08075 3.02486 2.08075 2.60275 2.3411 2.3424ZM12.711 11.7682C12.4506 11.5078 12.0285 11.5078 11.7682 11.7682C11.5078 12.0285 11.5078 12.4506 11.7682 12.711L12.7148 13.6577C12.9752 13.918 13.3973 13.918 13.6577 13.6577C13.918 13.3973 13.918 12.9752 13.6577 12.7148L12.711 11.7682ZM0 8C0 7.63181 0.298477 7.33333 0.666667 7.33333H2C2.36819 7.33333 2.66667 7.63181 2.66667 8C2.66667 8.36819 2.36819 8.66667 2 8.66667H0.666667C0.298477 8.66667 0 8.36819 0 8ZM14 7.33333C13.6318 7.33333 13.3333 7.63181 13.3333 8C13.3333 8.36819 13.6318 8.66667 14 8.66667H15.3333C15.7015 8.66667 16 8.36819 16 8C16 7.63181 15.7015 7.33333 15.3333 7.33333H14ZM4.23057 11.7682C4.49092 12.0285 4.49092 12.4506 4.23057 12.711L3.28391 13.6577C3.02356 13.918 2.60145 13.918 2.3411 13.6577C2.08075 13.3973 2.08075 12.9752 2.3411 12.7148L3.28776 11.7682C3.54811 11.5078 3.97022 11.5078 4.23057 11.7682ZM13.6577 3.28521C13.918 3.02486 13.918 2.60275 13.6577 2.3424C13.3973 2.08205 12.9752 2.08205 12.7148 2.3424L11.7682 3.28906C11.5078 3.54941 11.5078 3.97152 11.7682 4.23187C12.0285 4.49222 12.4506 4.49222 12.711 4.23187L13.6577 3.28521Z"
fill="currentColor"
/>
</g>
<defs>
<clipPath id="clip0_3128_692">
<rect width="16" height="16" fill="white" />
</clipPath>
</defs>
</svg>
</span>
<span
class="dark flex h-9 w-9 items-center justify-center rounded-sm text-body-color"
>
<svg
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M8.0547 1.67334C8.18372 1.90227 8.16622 2.18562 8.01003 2.39693C7.44055 3.16737 7.16651 4.11662 7.23776 5.07203C7.30901 6.02744 7.72081 6.92554 8.39826 7.60299C9.07571 8.28044 9.97381 8.69224 10.9292 8.76349C11.8846 8.83473 12.8339 8.5607 13.6043 7.99122C13.8156 7.83502 14.099 7.81753 14.3279 7.94655C14.5568 8.07556 14.6886 8.32702 14.6644 8.58868C14.5479 9.84957 14.0747 11.0512 13.3002 12.053C12.5256 13.0547 11.4818 13.8152 10.2909 14.2454C9.09992 14.6756 7.81108 14.7577 6.57516 14.4821C5.33925 14.2065 4.20738 13.5846 3.312 12.6892C2.41661 11.7939 1.79475 10.662 1.51917 9.42608C1.24359 8.19017 1.32569 6.90133 1.75588 5.71038C2.18606 4.51942 2.94652 3.47561 3.94828 2.70109C4.95005 1.92656 6.15168 1.45335 7.41257 1.33682C7.67423 1.31264 7.92568 1.44442 8.0547 1.67334ZM6.21151 2.96004C5.6931 3.1476 5.20432 3.41535 4.76384 3.75591C3.96242 4.37553 3.35405 5.21058 3.00991 6.16334C2.66576 7.11611 2.60008 8.14718 2.82054 9.13591C3.04101 10.1246 3.5385 11.0301 4.25481 11.7464C4.97111 12.4627 5.87661 12.9602 6.86534 13.1807C7.85407 13.4012 8.88514 13.3355 9.8379 12.9913C10.7907 12.6472 11.6257 12.0388 12.2453 11.2374C12.5859 10.7969 12.8536 10.3081 13.0412 9.78974C12.3391 10.0437 11.586 10.1495 10.8301 10.0931C9.55619 9.99813 8.35872 9.44907 7.45545 8.5458C6.55218 7.64253 6.00312 6.44506 5.90812 5.17118C5.85174 4.4152 5.9575 3.66212 6.21151 2.96004Z"
fill="currentColor"
/>
</svg>
</span>
</div>
</label>
</div>
</div>
</div>
</div>
</section>
<!-- ====== Switch End -->
</body>
</html>