연습장:Sakura: 두 판 사이의 차이

편집 요약 없음
 
(사용자 2명의 중간 판 71개는 보이지 않습니다)
1번째 줄: 1번째 줄:
== 기능 틀 ==
= 정우회 =
=== 테마(라이트모드/다크모드) 별 이미지 ===
{| class="wikitable" style="margin-left: auto; margin-right: auto; max-width: 500px; width: 100%; border: 2px; text-align: center;"
<div class="inline-block dark:hidden">{{{1|라이트모드에서 보입니다!}}}</div><div class="hidden dark:inline-block">{{{2|다크모드에서 보입니다!}}}</div>
! colspan="5" style="background: #0070c8; color: #FFF" | [[대한제국의 보수정당 (한나라)|{{color|#FFF|대한제국의 보수정당}}]]
|-
| <div class="mw-customtoggle-Hannara_History1">'''[ 펼치기  ·  접기 ]'''</div>
<div id="mw-customcollapsible-Hannara_History1" class="mw-collapsible mw-collapsed">
<div class="mw-collapsible-content" style="background: none; margin: 0px -10px 0px">
{| style="margin: 4px 0px -6px 0px; width: 100%; text-align: center;;
|-
| width="30%" | (창당)
| width="5%" rowspan="1" | →
! width="30%" rowspan="4" style="background: #6d1d1d; color: #FFF" | 정우회
| width="5%" rowspan="2" | →
| width="30%" rowspan="2" | [[헌정회 (한나라)|{{글씨 색|#326e6b|헌정회}}]]<br>{{-2|(흡수 합당)}}
|-
|}
|}
{| class="wikitable" style="max-width: 420px; width: 100%; border: 2px solid #6d1d1d; text-align: left; float: right;"
|-
| colspan="2" style="text-align: center" | <div class="my-[20px]">{{Theme|[[파일:정우회 글씨 (한나라).svg|300px]]|[[파일:정우회 글씨 흰색 (한나라).svg|300px]]}}</div>
|-
! colspan="2" style="color: #FFF; background: #6d1d1d" | 정우회
|-
! class="dark:bg-evewiki-020 dark:!text-white" style="width: 125px; color: #6d1d1d" | 한문명
| 政友會
|-
! class="dark:bg-evewiki-020 dark:!text-white" style="width: 125px; color: #6d1d1d" | 영문명
| Association of Friends of Diet
|-
! class="dark:bg-evewiki-020 dark:!text-white" style="color: #6d1d1d" | 창당일
| [[1908년]] [[4월 4일]]
|-
! class="dark:bg-evewiki-020 dark:!text-white" style="color: #6d1d1d" | 해산일
| [[1914년]] [[1월 14일]]
|-
! class="dark:bg-evewiki-020 dark:!text-white" style="color: #6d1d1d" | 후신
| [[헌정회 (한나라)|헌정회]]
|-
! rowspan="2" class="dark:bg-evewiki-020 dark:!text-white" style="color: #6d1d1d" | 주소
| <div style="margin: -5.0px -9.0px">{{#multimaps: 37.55938,126.98180 | height = 150px}}</div>
|-
| [[한성부 (한나라)|한성부]] [[중구 (한성부)|중구]] 소공로 51 (회현동1가)<br>現 우리은행 본점
|-
! class="dark:bg-evewiki-020 dark:!text-white" style="color: #6d1d1d" | 회장
| [[송병준 (한나라)|송병준]] <sub>/ 3선 ([[대한제국 민의원 (한나라)|민]], 1-3대)</sub>
|-
! class="dark:bg-evewiki-020 dark:!text-white" style="color: #6d1d1d" | [[대한제국 중추원 의원 (한나라)|<span class="dark:!text-white text-[#6d1d1d]">중추원 의원</span>]]
| style="background-image: linear-gradient(to right, #0095DA 0%, #aaa 0%); color: #FFF" | '''n석<ref>지역구 n석, 비례대표 n석</ref> / 200석 (n%)'''
|-
! class="dark:bg-evewiki-020 dark:!text-white" style="color: #6d1d1d" | [[대한제국 의정원 의원 (한나라)|<span class="dark:!text-white text-[#6d1d1d]">의정원 의원</span>]]
| style="background-image: linear-gradient(to right, #0095DA 0%, #aaa 0%); color: #FFF" | '''n석<ref>지역구 n석, 비례대표 n석</ref> / 500석 (n%)'''
|-
|}


=== 다크모드 전환 토글 ===
{{목차}}
{{test}}
 
== Tailwind CSS 설명 ==
=== 무엇인가? ===
<div class="max-w-[500px] w-full  mx-auto mb-[6px] pb-[6px]  bg-sky-500 border-sky-500 border-solid border-2  text-center text-white">{{youtube|--D4WMPEIZI|496px}}'''Tailwind CSS를 설명하는 영상'''</div>
css 파일 대신 html에 코드를 쓰는 걸로 대신할 수 있는 CSS 프레임워크 라고는 하지만 이해 못하시죠? 간단히 말하자면 <code>style=""</code> 사이에 무언가를 쓰는것 대신에 <code>class=""</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>
{| class="wikitable !w-full !border-sky-500 !border-2 !border-solid" style="font-size: 10pt"
! class="!bg-sky-500 text-center text-white" | 색상표
|-
|  |
<div class="mw-customtoggle-Tailwind !bg-transparent text-center"><div style="margin: 1px 0px 1.5px">'''[ 펼치기 · 접기 ]'''</div></div>
<div class="mw-collapsible mw-collapsed !border-transparent" id="mw-customcollapsible-Tailwind">
<div class="toccolours mw-collapsible-content !bg-transparent !border-transparent">
<!---->
<div class="grid grid-cols-[repeat(auto-fit,minmax(8rem,1fr))] gap-x-2 gap-y-4 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 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">
<nowiki>#</nowiki>f8fafc
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>f1f5f9
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>e2e8f0
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>cbd5e1
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>94a3b8
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>64748b
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>475569
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>334155
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>1e293b
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>0f172a
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>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 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">
<nowiki>#</nowiki>f9fafb
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>f3f4f6
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>e5e7eb
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>d1d5db
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>9ca3af
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>6b7280
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>4b5563
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>374151
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>1f2937
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>111827
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>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 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">
<nowiki>#</nowiki>fafafa
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>f4f4f5
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>e4e4e7
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>d4d4d8
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>a1a1aa
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>71717a
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>52525b
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>3f3f46
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>27272a
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>18181b
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>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 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">
<nowiki>#</nowiki>fafafa
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>f5f5f5
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>e5e5e5
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>d4d4d4
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>a3a3a3
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>737373
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>525252
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>404040
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>262626
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>171717
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>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 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">
<nowiki>#</nowiki>fafaf9
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>f5f5f4
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>e7e5e4
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>d6d3d1
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>a8a29e
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>78716c
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>57534e
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>44403c
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>292524
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>1c1917
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>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 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">
<nowiki>#</nowiki>fef2f2
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>fee2e2
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>fecaca
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>fca5a5
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>f87171
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>ef4444
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>dc2626
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>b91c1c
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>991b1b
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>7f1d1d
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>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 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">
<nowiki>#</nowiki>fff7ed
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>ffedd5
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>fed7aa
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>fdba74
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>fb923c
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>f97316
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>ea580c
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>c2410c
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>9a3412
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>7c2d12
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>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 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">
<nowiki>#</nowiki>fffbeb
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>fef3c7
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>fde68a
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>fcd34d
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>fbbf24
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>f59e0b
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>d97706
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>b45309
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>92400e
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>78350f
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>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 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">
<nowiki>#</nowiki>fefce8
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>fef9c3
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>fef08a
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>fde047
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>facc15
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>eab308
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>ca8a04
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>a16207
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>854d0e
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>713f12
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>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 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">
<nowiki>#</nowiki>f7fee7
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>ecfccb
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>d9f99d
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>bef264
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>a3e635
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>84cc16
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>65a30d
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>4d7c0f
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>3f6212
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>365314
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>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 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">
<nowiki>#</nowiki>f0fdf4
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>dcfce7
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>bbf7d0
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>86efac
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>4ade80
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>22c55e
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>16a34a
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>15803d
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>166534
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>14532d
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>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 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">
<nowiki>#</nowiki>ecfdf5
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>d1fae5
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>a7f3d0
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>6ee7b7
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>34d399
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>10b981
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>059669
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>047857
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>065f46
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>064e3b
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>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 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">
<nowiki>#</nowiki>f0fdfa
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>ccfbf1
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>99f6e4
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>5eead4
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>2dd4bf
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>14b8a6
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>0d9488
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>0f766e
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>115e59
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>134e4a
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>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 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">
<nowiki>#</nowiki>ecfeff
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>cffafe
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>a5f3fc
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>67e8f9
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>22d3ee
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>06b6d4
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>0891b2
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>0e7490
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>155e75
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>164e63
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>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 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">
<nowiki>#</nowiki>f0f9ff
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>e0f2fe
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>bae6fd
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>7dd3fc
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>38bdf8
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>0ea5e9
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>0284c7
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>0369a1
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>075985
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>0c4a6e
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>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 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">
<nowiki>#</nowiki>eff6ff
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>dbeafe
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>bfdbfe
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>93c5fd
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>60a5fa
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>3b82f6
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>2563eb
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>1d4ed8
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>1e40af
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>1e3a8a
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>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 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">
<nowiki>#</nowiki>eef2ff
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>e0e7ff
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>c7d2fe
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>a5b4fc
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>818cf8
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>6366f1
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>4f46e5
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>4338ca
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>3730a3
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>312e81
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>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 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">
<nowiki>#</nowiki>f5f3ff
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>ede9fe
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>ddd6fe
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>c4b5fd
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>a78bfa
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>8b5cf6
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>7c3aed
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>6d28d9
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>5b21b6
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>4c1d95
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>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 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">
<nowiki>#</nowiki>faf5ff
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>f3e8ff
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>e9d5ff
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>d8b4fe
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>c084fc
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>a855f7
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>9333ea
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>7e22ce
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>6b21a8
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>581c87
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>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 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">
<nowiki>#</nowiki>fdf4ff
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>fae8ff
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>f5d0fe
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>f0abfc
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>e879f9
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>d946ef
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>c026d3
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>a21caf
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>86198f
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>701a75
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>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 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">
<nowiki>#</nowiki>fdf2f8
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>fce7f3
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>fbcfe8
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>f9a8d4
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>f472b6
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>ec4899
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>db2777
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>be185d
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>9d174d
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>831843
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>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 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">
<nowiki>#</nowiki>fff1f2
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>ffe4e6
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>fecdd3
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>fda4af
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>fb7185
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>f43f5e
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>e11d48
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>be123c
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>9f1239
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>881337
</div>
</div>
</div>
</div>
<div class="relative flex">
<div class="flex items-center gap-x-3 w-full 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">
<nowiki>#</nowiki>4c0519
</div>
</div>
</div>
</div>
</div>
</div>
</div>
|}</div></div>


== Tailwind CSS 코드 ==
== 개요 ==
=== Padding ===
[[1911년]] [[8월 4일]] 창당되어 [[1914년]] [[1월 14일]]까지 존재했던 [[대한제국의 보수정당 (한나라)|대한제국의 보수정당]]. [[제1대 의정원 의원 총선거 (한나라)|제1대 의정원 선거]]의 중추원 추천 의원(사실상 [[한국통감부 (한나라)|통감부]] 추천) 몫에서 당선되기 위해 결성된 친일·어용단체로 [[동척법 파동 (한나라)|동척법 파동]]으로 인한 정계 재편 과정에서 같은 친일 정당인 [[동아본당 (한나라)|동아본당]]과 함께 [[헌정회 (한나라)|헌정회]]에 합당되었다.
=== Margin ===

2024년 8월 11일 (일) 18:25 기준 최신판

정우회

대한제국의 보수정당
[ 펼치기 · 접기 ]
(창당) 정우회 헌정회
(흡수 합당)
정우회
한문명 政友會
영문명 Association of Friends of Diet
창당일 1908년 4월 4일
해산일 1914년 1월 14일
후신 헌정회
주소

지도를 불러오는 중...

한성부 중구 소공로 51 (회현동1가)
現 우리은행 본점
회장 송병준 / 3선 (, 1-3대)
중추원 의원 n석[1] / 200석 (n%)
의정원 의원 n석[2] / 500석 (n%)

개요

1911년 8월 4일 창당되어 1914년 1월 14일까지 존재했던 대한제국의 보수정당. 제1대 의정원 선거의 중추원 추천 의원(사실상 통감부 추천) 몫에서 당선되기 위해 결성된 친일·어용단체로 동척법 파동으로 인한 정계 재편 과정에서 같은 친일 정당인 동아본당과 함께 헌정회에 합당되었다.

  1. 지역구 n석, 비례대표 n석
  2. 지역구 n석, 비례대표 n석