← Back
Colours
Red
*-red-100
*-red-200
*-red-300
*-red-400
*-red-500
*-red-600
*-red-700
*-red-800
*-red-900
Orange
*-orange-100
*-orange-200
*-orange-300
*-orange-400
*-orange-500
*-orange-600
*-orange-700
*-orange-800
*-orange-900
Amber
*-amber-100
*-amber-200
*-amber-300
*-amber-400
*-amber-500
*-amber-600
*-amber-700
*-amber-800
*-amber-900
Lemon
*-lemon-100
*-lemon-200
*-lemon-300
*-lemon-400
*-lemon-500
*-lemon-600
*-lemon-700
*-lemon-800
*-lemon-900
Yellow
*-yellow-100
*-yellow-200
*-yellow-300
*-yellow-400
*-yellow-500
*-yellow-600
*-yellow-700
*-yellow-800
*-yellow-900
Lime
*-lime-100
*-lime-200
*-lime-300
*-lime-400
*-lime-500
*-lime-600
*-lime-700
*-lime-800
*-lime-900
Mint
*-mint-100
*-mint-200
*-mint-300
*-mint-400
*-mint-500
*-mint-600
*-mint-700
*-mint-800
*-mint-900
Green
*-green-100
*-green-200
*-green-300
*-green-400
*-green-500
*-green-600
*-green-700
*-green-800
*-green-900
Emerald
*-emerald-100
*-emerald-200
*-emerald-300
*-emerald-400
*-emerald-500
*-emerald-600
*-emerald-700
*-emerald-800
*-emerald-900
Teal
*-teal-100
*-teal-200
*-teal-300
*-teal-400
*-teal-500
*-teal-600
*-teal-700
*-teal-800
*-teal-900
Cyan
*-cyan-100
*-cyan-200
*-cyan-300
*-cyan-400
*-cyan-500
*-cyan-600
*-cyan-700
*-cyan-800
*-cyan-900
Sky
*-sky-100
*-sky-200
*-sky-300
*-sky-400
*-sky-500
*-sky-600
*-sky-700
*-sky-800
*-sky-900
Blue
*-blue-100
*-blue-200
*-blue-300
*-blue-400
*-blue-500
*-blue-600
*-blue-700
*-blue-800
*-blue-900
Indigo
*-indigo-100
*-indigo-200
*-indigo-300
*-indigo-400
*-indigo-500
*-indigo-600
*-indigo-700
*-indigo-800
*-indigo-900
Violet
*-violet-100
*-violet-200
*-violet-300
*-violet-400
*-violet-500
*-violet-600
*-violet-700
*-violet-800
*-violet-900
Purple
*-purple-100
*-purple-200
*-purple-300
*-purple-400
*-purple-500
*-purple-600
*-purple-700
*-purple-800
*-purple-900
Fuchsia
*-fuchsia-100
*-fuchsia-200
*-fuchsia-300
*-fuchsia-400
*-fuchsia-500
*-fuchsia-600
*-fuchsia-700
*-fuchsia-800
*-fuchsia-900
Pink
*-pink-100
*-pink-200
*-pink-300
*-pink-400
*-pink-500
*-pink-600
*-pink-700
*-pink-800
*-pink-900
Slate
*-slate-100
*-slate-200
*-slate-300
*-slate-400
*-slate-500
*-slate-600
*-slate-700
*-slate-800
*-slate-900
Gray
*-gray-100
*-gray-200
*-gray-300
*-gray-400
*-gray-500
*-gray-600
*-gray-700
*-gray-800
*-gray-900
Zinc
*-zinc-100
*-zinc-200
*-zinc-300
*-zinc-400
*-zinc-500
*-zinc-600
*-zinc-700
*-zinc-800
*-zinc-900
Code:
<h2 class="text-gray-800 text-2xl pb-10 mt-10">Red</h2>
<section class="grid grid-cols-3 md:grid-cols-5 gap-4 border-b last-of-type:border-0 pb-5">
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-red-100"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-red-100</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-red-200"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-red-200</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-red-300"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-red-300</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-red-400"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-red-400</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-red-500"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-red-500</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-red-600"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-red-600</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-red-700"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-red-700</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-red-800"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-red-800</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-red-900"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-red-900</p>
</figure>
</section>
<h2 class="text-gray-800 text-2xl pb-10 mt-10">Orange</h2>
<section class="grid grid-cols-3 md:grid-cols-5 gap-4 border-b last-of-type:border-0 pb-5">
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-orange-100"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-orange-100</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-orange-200"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-orange-200</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-orange-300"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-orange-300</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-orange-400"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-orange-400</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-orange-500"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-orange-500</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-orange-600"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-orange-600</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-orange-700"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-orange-700</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-orange-800"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-orange-800</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-orange-900"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-orange-900</p>
</figure>
</section>
<h2 class="text-gray-800 text-2xl pb-10 mt-10">Amber</h2>
<section class="grid grid-cols-3 md:grid-cols-5 gap-4 border-b last-of-type:border-0 pb-5">
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-amber-100"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-amber-100</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-amber-200"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-amber-200</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-amber-300"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-amber-300</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-amber-400"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-amber-400</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-amber-500"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-amber-500</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-amber-600"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-amber-600</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-amber-700"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-amber-700</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-amber-800"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-amber-800</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-amber-900"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-amber-900</p>
</figure>
</section>
<h2 class="text-gray-800 text-2xl pb-10 mt-10">Lemon</h2>
<section class="grid grid-cols-3 md:grid-cols-5 gap-4 border-b last-of-type:border-0 pb-5">
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-lemon-100"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-lemon-100</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-lemon-200"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-lemon-200</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-lemon-300"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-lemon-300</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-lemon-400"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-lemon-400</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-lemon-500"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-lemon-500</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-lemon-600"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-lemon-600</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-lemon-700"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-lemon-700</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-lemon-800"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-lemon-800</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-lemon-900"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-lemon-900</p>
</figure>
</section>
<h2 class="text-gray-800 text-2xl pb-10 mt-10">Yellow</h2>
<section class="grid grid-cols-3 md:grid-cols-5 gap-4 border-b last-of-type:border-0 pb-5">
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-yellow-100"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-yellow-100</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-yellow-200"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-yellow-200</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-yellow-300"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-yellow-300</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-yellow-400"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-yellow-400</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-yellow-500"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-yellow-500</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-yellow-600"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-yellow-600</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-yellow-700"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-yellow-700</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-yellow-800"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-yellow-800</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-yellow-900"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-yellow-900</p>
</figure>
</section>
<h2 class="text-gray-800 text-2xl pb-10 mt-10">Lime</h2>
<section class="grid grid-cols-3 md:grid-cols-5 gap-4 border-b last-of-type:border-0 pb-5">
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-lime-100"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-lime-100</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-lime-200"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-lime-200</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-lime-300"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-lime-300</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-lime-400"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-lime-400</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-lime-500"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-lime-500</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-lime-600"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-lime-600</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-lime-700"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-lime-700</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-lime-800"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-lime-800</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-lime-900"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-lime-900</p>
</figure>
</section>
<h2 class="text-gray-800 text-2xl pb-10 mt-10">Mint</h2>
<section class="grid grid-cols-3 md:grid-cols-5 gap-4 border-b last-of-type:border-0 pb-5">
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-mint-100"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-mint-100</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-mint-200"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-mint-200</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-mint-300"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-mint-300</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-mint-400"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-mint-400</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-mint-500"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-mint-500</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-mint-600"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-mint-600</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-mint-700"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-mint-700</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-mint-800"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-mint-800</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-mint-900"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-mint-900</p>
</figure>
</section>
<h2 class="text-gray-800 text-2xl pb-10 mt-10">Green</h2>
<section class="grid grid-cols-3 md:grid-cols-5 gap-4 border-b last-of-type:border-0 pb-5">
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-green-100"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-green-100</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-green-200"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-green-200</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-green-300"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-green-300</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-green-400"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-green-400</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-green-500"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-green-500</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-green-600"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-green-600</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-green-700"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-green-700</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-green-800"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-green-800</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-green-900"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-green-900</p>
</figure>
</section>
<h2 class="text-gray-800 text-2xl pb-10 mt-10">Emerald</h2>
<section class="grid grid-cols-3 md:grid-cols-5 gap-4 border-b last-of-type:border-0 pb-5">
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-emerald-100"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-emerald-100</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-emerald-200"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-emerald-200</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-emerald-300"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-emerald-300</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-emerald-400"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-emerald-400</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-emerald-500"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-emerald-500</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-emerald-600"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-emerald-600</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-emerald-700"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-emerald-700</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-emerald-800"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-emerald-800</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-emerald-900"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-emerald-900</p>
</figure>
</section>
<h2 class="text-gray-800 text-2xl pb-10 mt-10">Teal</h2>
<section class="grid grid-cols-3 md:grid-cols-5 gap-4 border-b last-of-type:border-0 pb-5">
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-teal-100"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-teal-100</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-teal-200"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-teal-200</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-teal-300"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-teal-300</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-teal-400"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-teal-400</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-teal-500"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-teal-500</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-teal-600"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-teal-600</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-teal-700"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-teal-700</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-teal-800"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-teal-800</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-teal-900"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-teal-900</p>
</figure>
</section>
<h2 class="text-gray-800 text-2xl pb-10 mt-10">Cyan</h2>
<section class="grid grid-cols-3 md:grid-cols-5 gap-4 border-b last-of-type:border-0 pb-5">
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-cyan-100"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-cyan-100</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-cyan-200"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-cyan-200</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-cyan-300"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-cyan-300</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-cyan-400"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-cyan-400</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-cyan-500"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-cyan-500</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-cyan-600"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-cyan-600</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-cyan-700"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-cyan-700</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-cyan-800"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-cyan-800</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-cyan-900"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-cyan-900</p>
</figure>
</section>
<h2 class="text-gray-800 text-2xl pb-10 mt-10">Sky</h2>
<section class="grid grid-cols-3 md:grid-cols-5 gap-4 border-b last-of-type:border-0 pb-5">
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-sky-100"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-sky-100</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-sky-200"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-sky-200</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-sky-300"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-sky-300</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-sky-400"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-sky-400</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-sky-500"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-sky-500</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-sky-600"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-sky-600</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-sky-700"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-sky-700</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-sky-800"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-sky-800</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-sky-900"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-sky-900</p>
</figure>
</section>
<h2 class="text-gray-800 text-2xl pb-10 mt-10">Blue</h2>
<section class="grid grid-cols-3 md:grid-cols-5 gap-4 border-b last-of-type:border-0 pb-5">
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-blue-100"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-blue-100</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-blue-200"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-blue-200</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-blue-300"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-blue-300</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-blue-400"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-blue-400</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-blue-500"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-blue-500</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-blue-600"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-blue-600</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-blue-700"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-blue-700</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-blue-800"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-blue-800</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-blue-900"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-blue-900</p>
</figure>
</section>
<h2 class="text-gray-800 text-2xl pb-10 mt-10">Indigo</h2>
<section class="grid grid-cols-3 md:grid-cols-5 gap-4 border-b last-of-type:border-0 pb-5">
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-indigo-100"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-indigo-100</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-indigo-200"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-indigo-200</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-indigo-300"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-indigo-300</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-indigo-400"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-indigo-400</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-indigo-500"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-indigo-500</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-indigo-600"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-indigo-600</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-indigo-700"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-indigo-700</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-indigo-800"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-indigo-800</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-indigo-900"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-indigo-900</p>
</figure>
</section>
<h2 class="text-gray-800 text-2xl pb-10 mt-10">Violet</h2>
<section class="grid grid-cols-3 md:grid-cols-5 gap-4 border-b last-of-type:border-0 pb-5">
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-violet-100"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-violet-100</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-violet-200"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-violet-200</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-violet-300"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-violet-300</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-violet-400"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-violet-400</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-violet-500"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-violet-500</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-violet-600"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-violet-600</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-violet-700"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-violet-700</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-violet-800"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-violet-800</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-violet-900"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-violet-900</p>
</figure>
</section>
<h2 class="text-gray-800 text-2xl pb-10 mt-10">Purple</h2>
<section class="grid grid-cols-3 md:grid-cols-5 gap-4 border-b last-of-type:border-0 pb-5">
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-purple-100"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-purple-100</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-purple-200"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-purple-200</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-purple-300"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-purple-300</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-purple-400"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-purple-400</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-purple-500"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-purple-500</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-purple-600"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-purple-600</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-purple-700"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-purple-700</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-purple-800"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-purple-800</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-purple-900"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-purple-900</p>
</figure>
</section>
<h2 class="text-gray-800 text-2xl pb-10 mt-10">Fuchsia</h2>
<section class="grid grid-cols-3 md:grid-cols-5 gap-4 border-b last-of-type:border-0 pb-5">
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-fuchsia-100"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-fuchsia-100</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-fuchsia-200"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-fuchsia-200</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-fuchsia-300"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-fuchsia-300</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-fuchsia-400"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-fuchsia-400</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-fuchsia-500"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-fuchsia-500</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-fuchsia-600"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-fuchsia-600</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-fuchsia-700"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-fuchsia-700</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-fuchsia-800"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-fuchsia-800</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-fuchsia-900"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-fuchsia-900</p>
</figure>
</section>
<h2 class="text-gray-800 text-2xl pb-10 mt-10">Pink</h2>
<section class="grid grid-cols-3 md:grid-cols-5 gap-4 border-b last-of-type:border-0 pb-5">
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-pink-100"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-pink-100</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-pink-200"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-pink-200</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-pink-300"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-pink-300</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-pink-400"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-pink-400</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-pink-500"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-pink-500</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-pink-600"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-pink-600</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-pink-700"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-pink-700</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-pink-800"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-pink-800</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-pink-900"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-pink-900</p>
</figure>
</section>
<h2 class="text-gray-800 text-2xl pb-10 mt-10">Slate</h2>
<section class="grid grid-cols-3 md:grid-cols-5 gap-4 border-b last-of-type:border-0 pb-5">
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-slate-100"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-slate-100</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-slate-200"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-slate-200</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-slate-300"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-slate-300</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-slate-400"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-slate-400</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-slate-500"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-slate-500</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-slate-600"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-slate-600</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-slate-700"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-slate-700</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-slate-800"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-slate-800</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-slate-900"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-slate-900</p>
</figure>
</section>
<h2 class="text-gray-800 text-2xl pb-10 mt-10">Gray</h2>
<section class="grid grid-cols-3 md:grid-cols-5 gap-4 border-b last-of-type:border-0 pb-5">
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-gray-100"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-gray-100</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-gray-200"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-gray-200</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-gray-300"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-gray-300</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-gray-400"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-gray-400</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-gray-500"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-gray-500</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-gray-600"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-gray-600</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-gray-700"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-gray-700</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-gray-800"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-gray-800</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-gray-900"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-gray-900</p>
</figure>
</section>
<h2 class="text-gray-800 text-2xl pb-10 mt-10">Zinc</h2>
<section class="grid grid-cols-3 md:grid-cols-5 gap-4 border-b last-of-type:border-0 pb-5">
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-zinc-100"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-zinc-100</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-zinc-200"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-zinc-200</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-zinc-300"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-zinc-300</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-zinc-400"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-zinc-400</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-zinc-500"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-zinc-500</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-zinc-600"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-zinc-600</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-zinc-700"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-zinc-700</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-zinc-800"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-zinc-800</p>
</figure>
<figure class="transition-all transform hover:-translate-y-1 mb-4">
<div class="mx-auto rounded-full w-14 h-14 flex bg-zinc-900"></div>
<p class="block mt-2 font-bold tracking-wider text-center truncate text-xs">*-zinc-900</p>
</figure>
</section>