-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
1 lines (1 loc) · 10.7 KB
/
index.html
1
<!DOCTYPE html><html lang="en" class="dark"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="stylesheet" href="./css/stye.css"><title>Tailwind Colors</title></head><body class="font-sans text-gray-800"><main><div class="message-box-container"></div><div class="w-screen bg-gray-900 h-[4vh] text-slate-100" id="setting-bar"><div class="color-type"><label class="label"><span>HEX</span><input type="radio" name="colorType" id="radio-hex" class="hidden inps"></label><label class="label"><span>#HEX</span><input type="radio" name="colorType" id="radio-hashtagHex" class="hidden inps" checked="checked"></label><label class="label"><span>RGB</span><input type="radio" name="colorType" id="radio-rgb" class="hidden inps"></label></div></div><div class="w-full h-[96vh] grid xs:grid-cols-1 sm:grid-cols-2 lg:grid-cols-11 grid-rows-2" id="box-parent"><div class="grid"><div class="bg-red-50 boxes">red</div><div class="bg-red-100 boxes">red</div><div class="bg-red-200 boxes">red</div><div class="bg-red-300 boxes">red</div><div class="bg-red-400 boxes">red</div><div class="bg-red-500 boxes">red</div><div class="bg-red-600 boxes">red</div><div class="bg-red-700 boxes">red</div><div class="bg-red-800 boxes">red</div><div class="bg-red-900 boxes">red</div></div><div class="grid"><div class="bg-orange-50 boxes">orange</div><div class="bg-orange-100 boxes">orange</div><div class="bg-orange-200 boxes">orange</div><div class="bg-orange-300 boxes">orange</div><div class="bg-orange-400 boxes">orange</div><div class="bg-orange-500 boxes">orange</div><div class="bg-orange-600 boxes">orange</div><div class="bg-orange-700 boxes">orange</div><div class="bg-orange-800 boxes">orange</div><div class="bg-orange-900 boxes">orange</div></div><div class="grid"><div class="bg-amber-50 boxes">amber</div><div class="bg-amber-100 boxes">amber</div><div class="bg-amber-200 boxes">amber</div><div class="bg-amber-300 boxes">amber</div><div class="bg-amber-400 boxes">amber</div><div class="bg-amber-500 boxes">amber</div><div class="bg-amber-600 boxes">amber</div><div class="bg-amber-700 boxes">amber</div><div class="bg-amber-800 boxes">amber</div><div class="bg-amber-900 boxes">amber</div></div><div class="grid"><div class="bg-yellow-50 boxes">yellow</div><div class="bg-yellow-100 boxes">yellow</div><div class="bg-yellow-200 boxes">yellow</div><div class="bg-yellow-300 boxes">yellow</div><div class="bg-yellow-400 boxes">yellow</div><div class="bg-yellow-500 boxes">yellow</div><div class="bg-yellow-600 boxes">yellow</div><div class="bg-yellow-700 boxes">yellow</div><div class="bg-yellow-800 boxes">yellow</div><div class="bg-yellow-900 boxes">yellow</div></div><div class="grid"><div class="bg-lime-50 boxes">lime</div><div class="bg-lime-100 boxes">lime</div><div class="bg-lime-200 boxes">lime</div><div class="bg-lime-300 boxes">lime</div><div class="bg-lime-400 boxes">lime</div><div class="bg-lime-500 boxes">lime</div><div class="bg-lime-600 boxes">lime</div><div class="bg-lime-700 boxes">lime</div><div class="bg-lime-800 boxes">lime</div><div class="bg-lime-900 boxes">lime</div></div><div class="grid"><div class="bg-green-50 boxes">green</div><div class="bg-green-100 boxes">green</div><div class="bg-green-200 boxes">green</div><div class="bg-green-300 boxes">green</div><div class="bg-green-400 boxes">green</div><div class="bg-green-500 boxes">green</div><div class="bg-green-600 boxes">green</div><div class="bg-green-700 boxes">green</div><div class="bg-green-800 boxes">green</div><div class="bg-green-900 boxes">green</div></div><div class="grid"><div class="bg-emerald-50 boxes">emerald</div><div class="bg-emerald-100 boxes">emerald</div><div class="bg-emerald-200 boxes">emerald</div><div class="bg-emerald-300 boxes">emerald</div><div class="bg-emerald-400 boxes">emerald</div><div class="bg-emerald-500 boxes">emerald</div><div class="bg-emerald-600 boxes">emerald</div><div class="bg-emerald-700 boxes">emerald</div><div class="bg-emerald-800 boxes">emerald</div><div class="bg-emerald-900 boxes">emerald</div></div><div class="grid"><div class="bg-teal-50 boxes">teal</div><div class="bg-teal-100 boxes">teal</div><div class="bg-teal-200 boxes">teal</div><div class="bg-teal-300 boxes">teal</div><div class="bg-teal-400 boxes">teal</div><div class="bg-teal-500 boxes">teal</div><div class="bg-teal-600 boxes">teal</div><div class="bg-teal-700 boxes">teal</div><div class="bg-teal-800 boxes">teal</div><div class="bg-teal-900 boxes">teal</div></div><div class="grid"><div class="bg-cyan-50 boxes">cyan</div><div class="bg-cyan-100 boxes">cyan</div><div class="bg-cyan-200 boxes">cyan</div><div class="bg-cyan-300 boxes">cyan</div><div class="bg-cyan-400 boxes">cyan</div><div class="bg-cyan-500 boxes">cyan</div><div class="bg-cyan-600 boxes">cyan</div><div class="bg-cyan-700 boxes">cyan</div><div class="bg-cyan-800 boxes">cyan</div><div class="bg-cyan-900 boxes">cyan</div></div><div class="grid"><div class="bg-sky-50 boxes">sky</div><div class="bg-sky-100 boxes">sky</div><div class="bg-sky-200 boxes">sky</div><div class="bg-sky-300 boxes">sky</div><div class="bg-sky-400 boxes">sky</div><div class="bg-sky-500 boxes">sky</div><div class="bg-sky-600 boxes">sky</div><div class="bg-sky-700 boxes">sky</div><div class="bg-sky-800 boxes">sky</div><div class="bg-sky-900 boxes">sky</div></div><div class="grid"><div class="bg-blue-50 boxes">blue</div><div class="bg-blue-100 boxes">blue</div><div class="bg-blue-200 boxes">blue</div><div class="bg-blue-300 boxes">blue</div><div class="bg-blue-400 boxes">blue</div><div class="bg-blue-500 boxes">blue</div><div class="bg-blue-600 boxes">blue</div><div class="bg-blue-700 boxes">blue</div><div class="bg-blue-800 boxes">blue</div><div class="bg-blue-900 boxes">blue</div></div><div class="grid"><div class="bg-indigo-50 boxes">indigo</div><div class="bg-indigo-100 boxes">indigo</div><div class="bg-indigo-200 boxes">indigo</div><div class="bg-indigo-300 boxes">indigo</div><div class="bg-indigo-400 boxes">indigo</div><div class="bg-indigo-500 boxes">indigo</div><div class="bg-indigo-600 boxes">indigo</div><div class="bg-indigo-700 boxes">indigo</div><div class="bg-indigo-800 boxes">indigo</div><div class="bg-indigo-900 boxes">indigo</div></div><div class="grid"><div class="bg-violet-50 boxes">violet</div><div class="bg-violet-100 boxes">violet</div><div class="bg-violet-200 boxes">violet</div><div class="bg-violet-300 boxes">violet</div><div class="bg-violet-400 boxes">violet</div><div class="bg-violet-500 boxes">violet</div><div class="bg-violet-600 boxes">violet</div><div class="bg-violet-700 boxes">violet</div><div class="bg-violet-800 boxes">violet</div><div class="bg-violet-900 boxes">violet</div></div><div class="grid"><div class="bg-purple-50 boxes">purple</div><div class="bg-purple-100 boxes">purple</div><div class="bg-purple-200 boxes">purple</div><div class="bg-purple-300 boxes">purple</div><div class="bg-purple-400 boxes">purple</div><div class="bg-purple-500 boxes">purple</div><div class="bg-purple-600 boxes">purple</div><div class="bg-purple-700 boxes">purple</div><div class="bg-purple-800 boxes">purple</div><div class="bg-purple-900 boxes">purple</div></div><div class="grid"><div class="bg-fuchsia-50 boxes">fuchsia</div><div class="bg-fuchsia-100 boxes">fuchsia</div><div class="bg-fuchsia-200 boxes">fuchsia</div><div class="bg-fuchsia-300 boxes">fuchsia</div><div class="bg-fuchsia-400 boxes">fuchsia</div><div class="bg-fuchsia-500 boxes">fuchsia</div><div class="bg-fuchsia-600 boxes">fuchsia</div><div class="bg-fuchsia-700 boxes">fuchsia</div><div class="bg-fuchsia-800 boxes">fuchsia</div><div class="bg-fuchsia-900 boxes">fuchsia</div></div><div class="grid"><div class="bg-pink-50 boxes">pink</div><div class="bg-pink-100 boxes">pink</div><div class="bg-pink-200 boxes">pink</div><div class="bg-pink-300 boxes">pink</div><div class="bg-pink-400 boxes">pink</div><div class="bg-pink-500 boxes">pink</div><div class="bg-pink-600 boxes">pink</div><div class="bg-pink-700 boxes">pink</div><div class="bg-pink-800 boxes">pink</div><div class="bg-pink-900 boxes">pink</div></div><div class="grid"><div class="bg-rose-50 boxes">rose</div><div class="bg-rose-100 boxes">rose</div><div class="bg-rose-200 boxes">rose</div><div class="bg-rose-300 boxes">rose</div><div class="bg-rose-400 boxes">rose</div><div class="bg-rose-500 boxes">rose</div><div class="bg-rose-600 boxes">rose</div><div class="bg-rose-700 boxes">rose</div><div class="bg-rose-800 boxes">rose</div><div class="bg-rose-900 boxes">rose</div></div><div class="grid"><div class="bg-stone-50 boxes">stone</div><div class="bg-stone-100 boxes">stone</div><div class="bg-stone-200 boxes">stone</div><div class="bg-stone-300 boxes">stone</div><div class="bg-stone-400 boxes">stone</div><div class="bg-stone-500 boxes">stone</div><div class="bg-stone-600 boxes">stone</div><div class="bg-stone-700 boxes">stone</div><div class="bg-stone-800 boxes">stone</div><div class="bg-stone-900 boxes">stone</div></div><div class="grid"><div class="bg-neutral-50 boxes">neutral</div><div class="bg-neutral-100 boxes">neutral</div><div class="bg-neutral-200 boxes">neutral</div><div class="bg-neutral-300 boxes">neutral</div><div class="bg-neutral-400 boxes">neutral</div><div class="bg-neutral-500 boxes">neutral</div><div class="bg-neutral-600 boxes">neutral</div><div class="bg-neutral-700 boxes">neutral</div><div class="bg-neutral-800 boxes">neutral</div><div class="bg-neutral-900 boxes">neutral</div></div><div class="grid"><div class="bg-zinc-50 boxes">zinc</div><div class="bg-zinc-100 boxes">zinc</div><div class="bg-zinc-200 boxes">zinc</div><div class="bg-zinc-300 boxes">zinc</div><div class="bg-zinc-400 boxes">zinc</div><div class="bg-zinc-500 boxes">zinc</div><div class="bg-zinc-600 boxes">zinc</div><div class="bg-zinc-700 boxes">zinc</div><div class="bg-zinc-800 boxes">zinc</div><div class="bg-zinc-900 boxes">zinc</div></div><div class="grid"><div class="bg-gray-50 boxes">gray</div><div class="bg-gray-100 boxes">gray</div><div class="bg-gray-200 boxes">gray</div><div class="bg-gray-300 boxes">gray</div><div class="bg-gray-400 boxes">gray</div><div class="bg-gray-500 boxes">gray</div><div class="bg-gray-600 boxes">gray</div><div class="bg-gray-700 boxes">gray</div><div class="bg-gray-800 boxes">gray</div><div class="bg-gray-900 boxes">gray</div></div><div class="grid"><div class="bg-slate-50 boxes">slate</div><div class="bg-slate-100 boxes">slate</div><div class="bg-slate-200 boxes">slate</div><div class="bg-slate-300 boxes">slate</div><div class="bg-slate-400 boxes">slate</div><div class="bg-slate-500 boxes">slate</div><div class="bg-slate-600 boxes">slate</div><div class="bg-slate-700 boxes">slate</div><div class="bg-slate-800 boxes">slate</div><div class="bg-slate-900 boxes">slate</div></div></div></main><script src="./js/script.js"></script></body></html>