(→무엇인가?) |
|||
| 13번째 줄: | 13번째 줄: | ||
=== 왜 쓰는가? === | === 왜 쓰는가? === | ||
코드를 짜는 시간이 짧아집니다. 대표적으로 틀을 가운데 두기 위해 많이 쓰는 <code>style="margin-right: auto; margin-left: auto;"</code>는 <code>class="mx-0"</code>로 짧게 작성할 수 있습니다. 또, 문서의 다크모드 대응도 가능하게 됩니다. 기존 방식에서는 다크모드에 대응할 수 없고, 대응하고자 하면 관리자가 미리 작성해놓은 <code>class="evewiki-dark-txt"</code> 같은걸 써야했지만, 이제는 관리자가 미리 작성했느냐와는 관계 없이 <code>class="dark:text-white"</code>라고 작성하여 다크모드에서 글자를 흰색으로 보이게 할 수 있습니다. | 코드를 짜는 시간이 짧아집니다. 대표적으로 틀을 가운데 두기 위해 많이 쓰는 <code>style="margin-right: auto; margin-left: auto;"</code>는 <code>class="mx-0"</code>로 짧게 작성할 수 있습니다. 또, 문서의 다크모드 대응도 가능하게 됩니다. 기존 방식에서는 다크모드에 대응할 수 없고, 대응하고자 하면 관리자가 미리 작성해놓은 <code>class="evewiki-dark-txt"</code> 같은걸 써야했지만, 이제는 관리자가 미리 작성했느냐와는 관계 없이 <code>class="dark:text-white"</code>라고 작성하여 다크모드에서 글자를 흰색으로 보이게 할 수 있습니다. | ||
== Tailwind CSS 색상표 == | |||
배경색(background), 테두리 색(border), 글자 색(color) 등 색상을 정할 때 Tailwind CSS에서는 이 색상표의 색을 기본으로 제공합니다. 물론, 검은색(black, #000)과 흰색(white, #fff)는 당연히 포함이죠! 또, 필요하다면 대괄호([,])를 이용해 별도의 색을 지정할 수도 있습니다. 예를 들어, <span class="text-[#00FF00]"><code>text-[#00FF00]</code>처럼 말이죠!</span> | |||
<div class="grid grid-cols-[repeat(auto-fit,minmax(8rem,1fr))] gap-x-2 gap-y-8 sm:grid-cols-1"> | |||
<div class="2xl:contents"> | |||
<div class="text-sm font-semibold text-slate-900 dark:text-slate-200 2xl:col-end-1 2xl:pt-2.5"> | |||
Slate | |||
</div> | |||
<div class="grid mt-3 grid-cols-1 sm:grid-cols-11 gap-y-3 gap-x-2 sm:mt-2 2xl:mt-0"> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(248, 250, 252);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
50 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#f8fafc | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(241, 245, 249);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
100 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#f1f5f9 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(226, 232, 240);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
200 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#e2e8f0 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(203, 213, 225);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
300 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#cbd5e1 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(148, 163, 184);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
400 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#94a3b8 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(100, 116, 139);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
500 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#64748b | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(71, 85, 105);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
600 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#475569 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(51, 65, 85);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
700 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#334155 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(30, 41, 59);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
800 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#1e293b | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(15, 23, 42);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
900 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#0f172a | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(2, 6, 23);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
950 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#020617 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="2xl:contents"> | |||
<div class="text-sm font-semibold text-slate-900 dark:text-slate-200 2xl:col-end-1 2xl:pt-2.5"> | |||
Gray | |||
</div> | |||
<div class="grid mt-3 grid-cols-1 sm:grid-cols-11 gap-y-3 gap-x-2 sm:mt-2 2xl:mt-0"> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(249, 250, 251);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
50 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#f9fafb | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(243, 244, 246);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
100 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#f3f4f6 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(229, 231, 235);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
200 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#e5e7eb | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(209, 213, 219);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
300 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#d1d5db | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(156, 163, 175);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
400 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#9ca3af | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(107, 114, 128);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
500 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#6b7280 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(75, 85, 99);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
600 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#4b5563 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(55, 65, 81);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
700 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#374151 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(31, 41, 55);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
800 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#1f2937 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(17, 24, 39);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
900 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#111827 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(3, 7, 18);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
950 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#030712 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="2xl:contents"> | |||
<div class="text-sm font-semibold text-slate-900 dark:text-slate-200 2xl:col-end-1 2xl:pt-2.5"> | |||
Zinc | |||
</div> | |||
<div class="grid mt-3 grid-cols-1 sm:grid-cols-11 gap-y-3 gap-x-2 sm:mt-2 2xl:mt-0"> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(250, 250, 250);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
50 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#fafafa | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(244, 244, 245);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
100 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#f4f4f5 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(228, 228, 231);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
200 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#e4e4e7 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(212, 212, 216);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
300 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#d4d4d8 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(161, 161, 170);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
400 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#a1a1aa | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(113, 113, 122);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
500 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#71717a | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(82, 82, 91);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
600 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#52525b | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(63, 63, 70);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
700 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#3f3f46 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(39, 39, 42);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
800 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#27272a | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(24, 24, 27);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
900 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#18181b | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(9, 9, 11);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
950 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#09090b | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="2xl:contents"> | |||
<div class="text-sm font-semibold text-slate-900 dark:text-slate-200 2xl:col-end-1 2xl:pt-2.5"> | |||
Neutral | |||
</div> | |||
<div class="grid mt-3 grid-cols-1 sm:grid-cols-11 gap-y-3 gap-x-2 sm:mt-2 2xl:mt-0"> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(250, 250, 250);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
50 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#fafafa | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(245, 245, 245);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
100 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#f5f5f5 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(229, 229, 229);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
200 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#e5e5e5 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(212, 212, 212);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
300 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#d4d4d4 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(163, 163, 163);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
400 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#a3a3a3 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(115, 115, 115);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
500 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#737373 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(82, 82, 82);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
600 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#525252 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(64, 64, 64);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
700 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#404040 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(38, 38, 38);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
800 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#262626 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(23, 23, 23);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
900 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#171717 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(10, 10, 10);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
950 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#0a0a0a | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="2xl:contents"> | |||
<div class="text-sm font-semibold text-slate-900 dark:text-slate-200 2xl:col-end-1 2xl:pt-2.5"> | |||
Stone | |||
</div> | |||
<div class="grid mt-3 grid-cols-1 sm:grid-cols-11 gap-y-3 gap-x-2 sm:mt-2 2xl:mt-0"> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(250, 250, 249);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
50 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#fafaf9 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(245, 245, 244);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
100 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#f5f5f4 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(231, 229, 228);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
200 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#e7e5e4 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(214, 211, 209);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
300 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#d6d3d1 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(168, 162, 158);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
400 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#a8a29e | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(120, 113, 108);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
500 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#78716c | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(87, 83, 78);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
600 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#57534e | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(68, 64, 60);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
700 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#44403c | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(41, 37, 36);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
800 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#292524 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(28, 25, 23);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
900 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#1c1917 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(12, 10, 9);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
950 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#0c0a09 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="2xl:contents"> | |||
<div class="text-sm font-semibold text-slate-900 dark:text-slate-200 2xl:col-end-1 2xl:pt-2.5"> | |||
Red | |||
</div> | |||
<div class="grid mt-3 grid-cols-1 sm:grid-cols-11 gap-y-3 gap-x-2 sm:mt-2 2xl:mt-0"> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(254, 242, 242);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
50 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#fef2f2 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(254, 226, 226);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
100 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#fee2e2 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(254, 202, 202);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
200 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#fecaca | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(252, 165, 165);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
300 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#fca5a5 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(248, 113, 113);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
400 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#f87171 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(239, 68, 68);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
500 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#ef4444 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(220, 38, 38);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
600 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#dc2626 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(185, 28, 28);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
700 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#b91c1c | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(153, 27, 27);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
800 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#991b1b | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(127, 29, 29);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
900 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#7f1d1d | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(69, 10, 10);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
950 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#450a0a | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="2xl:contents"> | |||
<div class="text-sm font-semibold text-slate-900 dark:text-slate-200 2xl:col-end-1 2xl:pt-2.5"> | |||
Orange | |||
</div> | |||
<div class="grid mt-3 grid-cols-1 sm:grid-cols-11 gap-y-3 gap-x-2 sm:mt-2 2xl:mt-0"> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(255, 247, 237);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
50 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#fff7ed | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(255, 237, 213);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
100 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#ffedd5 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(254, 215, 170);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
200 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#fed7aa | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(253, 186, 116);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
300 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#fdba74 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(251, 146, 60);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
400 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#fb923c | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(249, 115, 22);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
500 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#f97316 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(234, 88, 12);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
600 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#ea580c | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(194, 65, 12);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
700 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#c2410c | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(154, 52, 18);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
800 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#9a3412 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(124, 45, 18);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
900 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#7c2d12 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(67, 20, 7);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
950 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#431407 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="2xl:contents"> | |||
<div class="text-sm font-semibold text-slate-900 dark:text-slate-200 2xl:col-end-1 2xl:pt-2.5"> | |||
Amber | |||
</div> | |||
<div class="grid mt-3 grid-cols-1 sm:grid-cols-11 gap-y-3 gap-x-2 sm:mt-2 2xl:mt-0"> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(255, 251, 235);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
50 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#fffbeb | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(254, 243, 199);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
100 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#fef3c7 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(253, 230, 138);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
200 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#fde68a | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(252, 211, 77);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
300 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#fcd34d | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(251, 191, 36);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
400 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#fbbf24 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(245, 158, 11);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
500 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#f59e0b | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(217, 119, 6);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
600 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#d97706 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(180, 83, 9);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
700 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#b45309 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(146, 64, 14);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
800 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#92400e | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(120, 53, 15);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
900 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#78350f | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(69, 26, 3);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
950 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#451a03 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="2xl:contents"> | |||
<div class="text-sm font-semibold text-slate-900 dark:text-slate-200 2xl:col-end-1 2xl:pt-2.5"> | |||
Yellow | |||
</div> | |||
<div class="grid mt-3 grid-cols-1 sm:grid-cols-11 gap-y-3 gap-x-2 sm:mt-2 2xl:mt-0"> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(254, 252, 232);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
50 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#fefce8 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(254, 249, 195);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
100 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#fef9c3 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(254, 240, 138);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
200 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#fef08a | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(253, 224, 71);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
300 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#fde047 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(250, 204, 21);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
400 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#facc15 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(234, 179, 8);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
500 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#eab308 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(202, 138, 4);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
600 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#ca8a04 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(161, 98, 7);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
700 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#a16207 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(133, 77, 14);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
800 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#854d0e | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(113, 63, 18);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
900 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#713f12 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(66, 32, 6);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
950 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#422006 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="2xl:contents"> | |||
<div class="text-sm font-semibold text-slate-900 dark:text-slate-200 2xl:col-end-1 2xl:pt-2.5"> | |||
Lime | |||
</div> | |||
<div class="grid mt-3 grid-cols-1 sm:grid-cols-11 gap-y-3 gap-x-2 sm:mt-2 2xl:mt-0"> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(247, 254, 231);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
50 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#f7fee7 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(236, 252, 203);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
100 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#ecfccb | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(217, 249, 157);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
200 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#d9f99d | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(190, 242, 100);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
300 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#bef264 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(163, 230, 53);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
400 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#a3e635 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(132, 204, 22);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
500 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#84cc16 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(101, 163, 13);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
600 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#65a30d | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(77, 124, 15);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
700 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#4d7c0f | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(63, 98, 18);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
800 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#3f6212 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(54, 83, 20);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
900 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#365314 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(26, 46, 5);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
950 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#1a2e05 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="2xl:contents"> | |||
<div class="text-sm font-semibold text-slate-900 dark:text-slate-200 2xl:col-end-1 2xl:pt-2.5"> | |||
Green | |||
</div> | |||
<div class="grid mt-3 grid-cols-1 sm:grid-cols-11 gap-y-3 gap-x-2 sm:mt-2 2xl:mt-0"> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(240, 253, 244);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
50 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#f0fdf4 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(220, 252, 231);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
100 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#dcfce7 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(187, 247, 208);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
200 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#bbf7d0 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(134, 239, 172);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
300 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#86efac | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(74, 222, 128);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
400 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#4ade80 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(34, 197, 94);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
500 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#22c55e | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(22, 163, 74);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
600 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#16a34a | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(21, 128, 61);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
700 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#15803d | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(22, 101, 52);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
800 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#166534 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(20, 83, 45);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
900 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#14532d | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(5, 46, 22);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
950 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#052e16 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="2xl:contents"> | |||
<div class="text-sm font-semibold text-slate-900 dark:text-slate-200 2xl:col-end-1 2xl:pt-2.5"> | |||
Emerald | |||
</div> | |||
<div class="grid mt-3 grid-cols-1 sm:grid-cols-11 gap-y-3 gap-x-2 sm:mt-2 2xl:mt-0"> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(236, 253, 245);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
50 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#ecfdf5 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(209, 250, 229);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
100 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#d1fae5 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(167, 243, 208);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
200 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#a7f3d0 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(110, 231, 183);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
300 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#6ee7b7 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(52, 211, 153);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
400 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#34d399 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(16, 185, 129);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
500 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#10b981 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(5, 150, 105);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
600 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#059669 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(4, 120, 87);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
700 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#047857 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(6, 95, 70);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
800 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#065f46 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(6, 78, 59);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
900 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#064e3b | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(2, 44, 34);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
950 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#022c22 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="2xl:contents"> | |||
<div class="text-sm font-semibold text-slate-900 dark:text-slate-200 2xl:col-end-1 2xl:pt-2.5"> | |||
Teal | |||
</div> | |||
<div class="grid mt-3 grid-cols-1 sm:grid-cols-11 gap-y-3 gap-x-2 sm:mt-2 2xl:mt-0"> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(240, 253, 250);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
50 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#f0fdfa | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(204, 251, 241);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
100 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#ccfbf1 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(153, 246, 228);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
200 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#99f6e4 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(94, 234, 212);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
300 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#5eead4 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(45, 212, 191);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
400 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#2dd4bf | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(20, 184, 166);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
500 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#14b8a6 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(13, 148, 136);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
600 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#0d9488 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(15, 118, 110);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
700 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#0f766e | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(17, 94, 89);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
800 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#115e59 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(19, 78, 74);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
900 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#134e4a | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(4, 47, 46);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
950 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#042f2e | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="2xl:contents"> | |||
<div class="text-sm font-semibold text-slate-900 dark:text-slate-200 2xl:col-end-1 2xl:pt-2.5"> | |||
Cyan | |||
</div> | |||
<div class="grid mt-3 grid-cols-1 sm:grid-cols-11 gap-y-3 gap-x-2 sm:mt-2 2xl:mt-0"> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(236, 254, 255);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
50 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#ecfeff | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(207, 250, 254);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
100 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#cffafe | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(165, 243, 252);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
200 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#a5f3fc | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(103, 232, 249);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
300 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#67e8f9 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(34, 211, 238);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
400 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#22d3ee | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(6, 182, 212);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
500 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#06b6d4 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(8, 145, 178);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
600 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#0891b2 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(14, 116, 144);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
700 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#0e7490 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(21, 94, 117);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
800 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#155e75 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(22, 78, 99);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
900 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#164e63 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(8, 51, 68);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
950 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#083344 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="2xl:contents"> | |||
<div class="text-sm font-semibold text-slate-900 dark:text-slate-200 2xl:col-end-1 2xl:pt-2.5"> | |||
Sky | |||
</div> | |||
<div class="grid mt-3 grid-cols-1 sm:grid-cols-11 gap-y-3 gap-x-2 sm:mt-2 2xl:mt-0"> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(240, 249, 255);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
50 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#f0f9ff | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(224, 242, 254);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
100 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#e0f2fe | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(186, 230, 253);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
200 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#bae6fd | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(125, 211, 252);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
300 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#7dd3fc | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(56, 189, 248);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
400 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#38bdf8 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(14, 165, 233);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
500 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#0ea5e9 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(2, 132, 199);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
600 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#0284c7 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(3, 105, 161);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
700 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#0369a1 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(7, 89, 133);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
800 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#075985 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(12, 74, 110);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
900 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#0c4a6e | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(8, 47, 73);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
950 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#082f49 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="2xl:contents"> | |||
<div class="text-sm font-semibold text-slate-900 dark:text-slate-200 2xl:col-end-1 2xl:pt-2.5"> | |||
Blue | |||
</div> | |||
<div class="grid mt-3 grid-cols-1 sm:grid-cols-11 gap-y-3 gap-x-2 sm:mt-2 2xl:mt-0"> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(239, 246, 255);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
50 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#eff6ff | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(219, 234, 254);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
100 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#dbeafe | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(191, 219, 254);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
200 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#bfdbfe | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(147, 197, 253);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
300 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#93c5fd | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(96, 165, 250);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
400 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#60a5fa | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(59, 130, 246);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
500 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#3b82f6 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(37, 99, 235);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
600 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#2563eb | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(29, 78, 216);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
700 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#1d4ed8 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(30, 64, 175);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
800 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#1e40af | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(30, 58, 138);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
900 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#1e3a8a | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(23, 37, 84);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
950 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#172554 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="2xl:contents"> | |||
<div class="text-sm font-semibold text-slate-900 dark:text-slate-200 2xl:col-end-1 2xl:pt-2.5"> | |||
Indigo | |||
</div> | |||
<div class="grid mt-3 grid-cols-1 sm:grid-cols-11 gap-y-3 gap-x-2 sm:mt-2 2xl:mt-0"> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(238, 242, 255);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
50 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#eef2ff | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(224, 231, 255);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
100 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#e0e7ff | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(199, 210, 254);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
200 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#c7d2fe | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(165, 180, 252);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
300 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#a5b4fc | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(129, 140, 248);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
400 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#818cf8 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(99, 102, 241);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
500 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#6366f1 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(79, 70, 229);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
600 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#4f46e5 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(67, 56, 202);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
700 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#4338ca | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(55, 48, 163);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
800 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#3730a3 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(49, 46, 129);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
900 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#312e81 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(30, 27, 75);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
950 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#1e1b4b | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="2xl:contents"> | |||
<div class="text-sm font-semibold text-slate-900 dark:text-slate-200 2xl:col-end-1 2xl:pt-2.5"> | |||
Violet | |||
</div> | |||
<div class="grid mt-3 grid-cols-1 sm:grid-cols-11 gap-y-3 gap-x-2 sm:mt-2 2xl:mt-0"> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(245, 243, 255);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
50 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#f5f3ff | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(237, 233, 254);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
100 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#ede9fe | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(221, 214, 254);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
200 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#ddd6fe | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(196, 181, 253);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
300 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#c4b5fd | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(167, 139, 250);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
400 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#a78bfa | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(139, 92, 246);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
500 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#8b5cf6 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(124, 58, 237);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
600 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#7c3aed | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(109, 40, 217);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
700 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#6d28d9 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(91, 33, 182);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
800 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#5b21b6 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(76, 29, 149);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
900 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#4c1d95 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(46, 16, 101);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
950 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#2e1065 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="2xl:contents"> | |||
<div class="text-sm font-semibold text-slate-900 dark:text-slate-200 2xl:col-end-1 2xl:pt-2.5"> | |||
Purple | |||
</div> | |||
<div class="grid mt-3 grid-cols-1 sm:grid-cols-11 gap-y-3 gap-x-2 sm:mt-2 2xl:mt-0"> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(250, 245, 255);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
50 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#faf5ff | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(243, 232, 255);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
100 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#f3e8ff | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(233, 213, 255);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
200 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#e9d5ff | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(216, 180, 254);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
300 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#d8b4fe | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(192, 132, 252);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
400 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#c084fc | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(168, 85, 247);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
500 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#a855f7 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(147, 51, 234);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
600 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#9333ea | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(126, 34, 206);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
700 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#7e22ce | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(107, 33, 168);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
800 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#6b21a8 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(88, 28, 135);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
900 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#581c87 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(59, 7, 100);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
950 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#3b0764 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="2xl:contents"> | |||
<div class="text-sm font-semibold text-slate-900 dark:text-slate-200 2xl:col-end-1 2xl:pt-2.5"> | |||
Fuchsia | |||
</div> | |||
<div class="grid mt-3 grid-cols-1 sm:grid-cols-11 gap-y-3 gap-x-2 sm:mt-2 2xl:mt-0"> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(253, 244, 255);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
50 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#fdf4ff | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(250, 232, 255);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
100 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#fae8ff | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(245, 208, 254);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
200 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#f5d0fe | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(240, 171, 252);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
300 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#f0abfc | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(232, 121, 249);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
400 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#e879f9 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(217, 70, 239);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
500 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#d946ef | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(192, 38, 211);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
600 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#c026d3 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(162, 28, 175);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
700 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#a21caf | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(134, 25, 143);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
800 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#86198f | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(112, 26, 117);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
900 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#701a75 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(74, 4, 78);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
950 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#4a044e | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="2xl:contents"> | |||
<div class="text-sm font-semibold text-slate-900 dark:text-slate-200 2xl:col-end-1 2xl:pt-2.5"> | |||
Pink | |||
</div> | |||
<div class="grid mt-3 grid-cols-1 sm:grid-cols-11 gap-y-3 gap-x-2 sm:mt-2 2xl:mt-0"> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(253, 242, 248);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
50 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#fdf2f8 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(252, 231, 243);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
100 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#fce7f3 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(251, 207, 232);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
200 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#fbcfe8 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(249, 168, 212);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
300 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#f9a8d4 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(244, 114, 182);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
400 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#f472b6 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(236, 72, 153);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
500 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#ec4899 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(219, 39, 119);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
600 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#db2777 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(190, 24, 93);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
700 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#be185d | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(157, 23, 77);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
800 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#9d174d | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(131, 24, 67);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
900 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#831843 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(80, 7, 36);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
950 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#500724 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="2xl:contents"> | |||
<div class="text-sm font-semibold text-slate-900 dark:text-slate-200 2xl:col-end-1 2xl:pt-2.5"> | |||
Rose | |||
</div> | |||
<div class="grid mt-3 grid-cols-1 sm:grid-cols-11 gap-y-3 gap-x-2 sm:mt-2 2xl:mt-0"> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(255, 241, 242);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
50 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#fff1f2 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(255, 228, 230);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
100 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#ffe4e6 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(254, 205, 211);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
200 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#fecdd3 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(253, 164, 175);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
300 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#fda4af | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(251, 113, 133);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
400 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#fb7185 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(244, 63, 94);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
500 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#f43f5e | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(225, 29, 72);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
600 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#e11d48 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(190, 18, 60);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
700 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#be123c | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(159, 18, 57);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
800 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#9f1239 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(136, 19, 55);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
900 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#881337 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="relative flex"> | |||
<div class="flex items-center gap-x-3 w-full cursor-pointer sm:block sm:space-y-1.5"> | |||
<div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(76, 5, 25);"> | |||
</div> | |||
<div class="px-0.5"> | |||
<div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white"> | |||
950 | |||
</div> | |||
<div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs"> | |||
#4c0519 | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
2023년 10월 9일 (월) 22:24 판
기능 틀
테마(라이트모드/다크모드) 별 이미지
라이트모드에서 보입니다!
다크모드에서 보입니다!
다크모드 전환 토글
Tailwind CSS 설명
무엇인가?
Tailwind CSS를 설명하는 영상
css 파일 대신 html에 코드를 쓰는 걸로 대신할 수 있는 CSS 프레임워크 라고는 하지만 이해 못하시죠? 간단히 말하자면 style="" 사이에 무언가를 쓰는것 대신에 class=""에 적어서 적용할 수 있게 만드는 기능입니다.
왜 쓰는가?
코드를 짜는 시간이 짧아집니다. 대표적으로 틀을 가운데 두기 위해 많이 쓰는 style="margin-right: auto; margin-left: auto;"는 class="mx-0"로 짧게 작성할 수 있습니다. 또, 문서의 다크모드 대응도 가능하게 됩니다. 기존 방식에서는 다크모드에 대응할 수 없고, 대응하고자 하면 관리자가 미리 작성해놓은 class="evewiki-dark-txt" 같은걸 써야했지만, 이제는 관리자가 미리 작성했느냐와는 관계 없이 class="dark:text-white"라고 작성하여 다크모드에서 글자를 흰색으로 보이게 할 수 있습니다.
Tailwind CSS 색상표
배경색(background), 테두리 색(border), 글자 색(color) 등 색상을 정할 때 Tailwind CSS에서는 이 색상표의 색을 기본으로 제공합니다. 물론, 검은색(black, #000)과 흰색(white, #fff)는 당연히 포함이죠! 또, 필요하다면 대괄호([,])를 이용해 별도의 색을 지정할 수도 있습니다. 예를 들어, text-[#00FF00]처럼 말이죠!
Slate
50
- f8fafc
100
- f1f5f9
200
- e2e8f0
300
- cbd5e1
400
- 94a3b8
500
- 64748b
600
- 475569
700
- 334155
800
- 1e293b
900
- 0f172a
950
- 020617
Gray
50
- f9fafb
100
- f3f4f6
200
- e5e7eb
300
- d1d5db
400
- 9ca3af
500
- 6b7280
600
- 4b5563
700
- 374151
800
- 1f2937
900
- 111827
950
- 030712
Zinc
50
- fafafa
100
- f4f4f5
200
- e4e4e7
300
- d4d4d8
400
- a1a1aa
500
- 71717a
600
- 52525b
700
- 3f3f46
800
- 27272a
900
- 18181b
950
- 09090b
Neutral
50
- fafafa
100
- f5f5f5
200
- e5e5e5
300
- d4d4d4
400
- a3a3a3
500
- 737373
600
- 525252
700
- 404040
800
- 262626
900
- 171717
950
- 0a0a0a
Stone
50
- fafaf9
100
- f5f5f4
200
- e7e5e4
300
- d6d3d1
400
- a8a29e
500
- 78716c
600
- 57534e
700
- 44403c
800
- 292524
900
- 1c1917
950
- 0c0a09
Red
50
- fef2f2
100
- fee2e2
200
- fecaca
300
- fca5a5
400
- f87171
500
- ef4444
600
- dc2626
700
- b91c1c
800
- 991b1b
900
- 7f1d1d
950
- 450a0a
Orange
50
- fff7ed
100
- ffedd5
200
- fed7aa
300
- fdba74
400
- fb923c
500
- f97316
600
- ea580c
700
- c2410c
800
- 9a3412
900
- 7c2d12
950
- 431407
Amber
50
- fffbeb
100
- fef3c7
200
- fde68a
300
- fcd34d
400
- fbbf24
500
- f59e0b
600
- d97706
700
- b45309
800
- 92400e
900
- 78350f
950
- 451a03
Yellow
50
- fefce8
100
- fef9c3
200
- fef08a
300
- fde047
400
- facc15
500
- eab308
600
- ca8a04
700
- a16207
800
- 854d0e
900
- 713f12
950
- 422006
Lime
50
- f7fee7
100
- ecfccb
200
- d9f99d
300
- bef264
400
- a3e635
500
- 84cc16
600
- 65a30d
700
- 4d7c0f
800
- 3f6212
900
- 365314
950
- 1a2e05
Green
50
- f0fdf4
100
- dcfce7
200
- bbf7d0
300
- 86efac
400
- 4ade80
500
- 22c55e
600
- 16a34a
700
- 15803d
800
- 166534
900
- 14532d
950
- 052e16
Emerald
50
- ecfdf5
100
- d1fae5
200
- a7f3d0
300
- 6ee7b7
400
- 34d399
500
- 10b981
600
- 059669
700
- 047857
800
- 065f46
900
- 064e3b
950
- 022c22
Teal
50
- f0fdfa
100
- ccfbf1
200
- 99f6e4
300
- 5eead4
400
- 2dd4bf
500
- 14b8a6
600
- 0d9488
700
- 0f766e
800
- 115e59
900
- 134e4a
950
- 042f2e
Cyan
50
- ecfeff
100
- cffafe
200
- a5f3fc
300
- 67e8f9
400
- 22d3ee
500
- 06b6d4
600
- 0891b2
700
- 0e7490
800
- 155e75
900
- 164e63
950
- 083344
Sky
50
- f0f9ff
100
- e0f2fe
200
- bae6fd
300
- 7dd3fc
400
- 38bdf8
500
- 0ea5e9
600
- 0284c7
700
- 0369a1
800
- 075985
900
- 0c4a6e
950
- 082f49
Blue
50
- eff6ff
100
- dbeafe
200
- bfdbfe
300
- 93c5fd
400
- 60a5fa
500
- 3b82f6
600
- 2563eb
700
- 1d4ed8
800
- 1e40af
900
- 1e3a8a
950
- 172554
Indigo
50
- eef2ff
100
- e0e7ff
200
- c7d2fe
300
- a5b4fc
400
- 818cf8
500
- 6366f1
600
- 4f46e5
700
- 4338ca
800
- 3730a3
900
- 312e81
950
- 1e1b4b
Violet
50
- f5f3ff
100
- ede9fe
200
- ddd6fe
300
- c4b5fd
400
- a78bfa
500
- 8b5cf6
600
- 7c3aed
700
- 6d28d9
800
- 5b21b6
900
- 4c1d95
950
- 2e1065
Purple
50
- faf5ff
100
- f3e8ff
200
- e9d5ff
300
- d8b4fe
400
- c084fc
500
- a855f7
600
- 9333ea
700
- 7e22ce
800
- 6b21a8
900
- 581c87
950
- 3b0764
Fuchsia
50
- fdf4ff
100
- fae8ff
200
- f5d0fe
300
- f0abfc
400
- e879f9
500
- d946ef
600
- c026d3
700
- a21caf
800
- 86198f
900
- 701a75
950
- 4a044e
Pink
50
- fdf2f8
100
- fce7f3
200
- fbcfe8
300
- f9a8d4
400
- f472b6
500
- ec4899
600
- db2777
700
- be185d
800
- 9d174d
900
- 831843
950
- 500724
Rose
50
- fff1f2
100
- ffe4e6
200
- fecdd3
300
- fda4af
400
- fb7185
500
- f43f5e
600
- e11d48
700
- be123c
800
- 9f1239
900
- 881337
950
- 4c0519