You need to enable JavaScript to run this app.
PLAYGROUND / Buttons
Wei Kang
Playground
Buttons
Playgrounds
Playground 1
Playground 2
Small Buttons
Click me
red-50
Click me
red-100
Click me
red-200
Click me
red-300
Click me
red-400
Click me
red-500
Click me
red-600
Click me
red-700
Click me
red-800
Click me
red-900
Click me
red-950
Click me
orange-50
Click me
orange-100
Click me
orange-200
Click me
orange-300
Click me
orange-400
Click me
orange-500
Click me
orange-600
Click me
orange-700
Click me
orange-800
Click me
orange-900
Click me
orange-950
Click me
amber-50
Click me
amber-100
Click me
amber-200
Click me
amber-300
Click me
amber-400
Click me
amber-500
Click me
amber-600
Click me
amber-700
Click me
amber-800
Click me
amber-900
Click me
amber-950
Click me
yellow-50
Click me
yellow-100
Click me
yellow-200
Click me
yellow-300
Click me
yellow-400
Click me
yellow-500
Click me
yellow-600
Click me
yellow-700
Click me
yellow-800
Click me
yellow-900
Click me
yellow-950
Click me
lime-50
Click me
lime-100
Click me
lime-200
Click me
lime-300
Click me
lime-400
Click me
lime-500
Click me
lime-600
Click me
lime-700
Click me
lime-800
Click me
lime-900
Click me
lime-950
Click me
green-50
Click me
green-100
Click me
green-200
Click me
green-300
Click me
green-400
Click me
green-500
Click me
green-600
Click me
green-700
Click me
green-800
Click me
green-900
Click me
green-950
Click me
emerald-50
Click me
emerald-100
Click me
emerald-200
Click me
emerald-300
Click me
emerald-400
Click me
emerald-500
Click me
emerald-600
Click me
emerald-700
Click me
emerald-800
Click me
emerald-900
Click me
emerald-950
Click me
teal-50
Click me
teal-100
Click me
teal-200
Click me
teal-300
Click me
teal-400
Click me
teal-500
Click me
teal-600
Click me
teal-700
Click me
teal-800
Click me
teal-900
Click me
teal-950
Click me
cyan-50
Click me
cyan-100
Click me
cyan-200
Click me
cyan-300
Click me
cyan-400
Click me
cyan-500
Click me
cyan-600
Click me
cyan-700
Click me
cyan-800
Click me
cyan-900
Click me
cyan-950
Click me
sky-50
Click me
sky-100
Click me
sky-200
Click me
sky-300
Click me
sky-400
Click me
sky-500
Click me
sky-600
Click me
sky-700
Click me
sky-800
Click me
sky-900
Click me
sky-950
Click me
blue-50
Click me
blue-100
Click me
blue-200
Click me
blue-300
Click me
blue-400
Click me
blue-500
Click me
blue-600
Click me
blue-700
Click me
blue-800
Click me
blue-900
Click me
blue-950
Click me
indigo-50
Click me
indigo-100
Click me
indigo-200
Click me
indigo-300
Click me
indigo-400
Click me
indigo-500
Click me
indigo-600
Click me
indigo-700
Click me
indigo-800
Click me
indigo-900
Click me
indigo-950
Click me
violet-50
Click me
violet-100
Click me
violet-200
Click me
violet-300
Click me
violet-400
Click me
violet-500
Click me
violet-600
Click me
violet-700
Click me
violet-800
Click me
violet-900
Click me
violet-950
Click me
purple-50
Click me
purple-100
Click me
purple-200
Click me
purple-300
Click me
purple-400
Click me
purple-500
Click me
purple-600
Click me
purple-700
Click me
purple-800
Click me
purple-900
Click me
purple-950
Click me
fuchsia-50
Click me
fuchsia-100
Click me
fuchsia-200
Click me
fuchsia-300
Click me
fuchsia-400
Click me
fuchsia-500
Click me
fuchsia-600
Click me
fuchsia-700
Click me
fuchsia-800
Click me
fuchsia-900
Click me
fuchsia-950
Click me
pink-50
Click me
pink-100
Click me
pink-200
Click me
pink-300
Click me
pink-400
Click me
pink-500
Click me
pink-600
Click me
pink-700
Click me
pink-800
Click me
pink-900
Click me
pink-950
Click me
rose-50
Click me
rose-100
Click me
rose-200
Click me
rose-300
Click me
rose-400
Click me
rose-500
Click me
rose-600
Click me
rose-700
Click me
rose-800
Click me
rose-900
Click me
rose-950
Click me
slate-50
Click me
slate-100
Click me
slate-200
Click me
slate-300
Click me
slate-400
Click me
slate-500
Click me
slate-600
Click me
slate-700
Click me
slate-800
Click me
slate-900
Click me
slate-950
Click me
gray-50
Click me
gray-100
Click me
gray-200
Click me
gray-300
Click me
gray-400
Click me
gray-500
Click me
gray-600
Click me
gray-700
Click me
gray-800
Click me
gray-900
Click me
gray-950
Click me
zinc-50
Click me
zinc-100
Click me
zinc-200
Click me
zinc-300
Click me
zinc-400
Click me
zinc-500
Click me
zinc-600
Click me
zinc-700
Click me
zinc-800
Click me
zinc-900
Click me
zinc-950
Click me
neutral-50
Click me
neutral-100
Click me
neutral-200
Click me
neutral-300
Click me
neutral-400
Click me
neutral-500
Click me
neutral-600
Click me
neutral-700
Click me
neutral-800
Click me
neutral-900
Click me
neutral-950
Click me
stone-50
Click me
stone-100
Click me
stone-200
Click me
stone-300
Click me
stone-400
Click me
stone-500
Click me
stone-600
Click me
stone-700
Click me
stone-800
Click me
stone-900
Click me
stone-950
Medium Buttons
Click me
red-50
Click me
red-100
Click me
red-200
Click me
red-300
Click me
red-400
Click me
red-500
Click me
red-600
Click me
red-700
Click me
red-800
Click me
red-900
Click me
red-950
Click me
orange-50
Click me
orange-100
Click me
orange-200
Click me
orange-300
Click me
orange-400
Click me
orange-500
Click me
orange-600
Click me
orange-700
Click me
orange-800
Click me
orange-900
Click me
orange-950
Click me
amber-50
Click me
amber-100
Click me
amber-200
Click me
amber-300
Click me
amber-400
Click me
amber-500
Click me
amber-600
Click me
amber-700
Click me
amber-800
Click me
amber-900
Click me
amber-950
Click me
yellow-50
Click me
yellow-100
Click me
yellow-200
Click me
yellow-300
Click me
yellow-400
Click me
yellow-500
Click me
yellow-600
Click me
yellow-700
Click me
yellow-800
Click me
yellow-900
Click me
yellow-950
Click me
lime-50
Click me
lime-100
Click me
lime-200
Click me
lime-300
Click me
lime-400
Click me
lime-500
Click me
lime-600
Click me
lime-700
Click me
lime-800
Click me
lime-900
Click me
lime-950
Click me
green-50
Click me
green-100
Click me
green-200
Click me
green-300
Click me
green-400
Click me
green-500
Click me
green-600
Click me
green-700
Click me
green-800
Click me
green-900
Click me
green-950
Click me
emerald-50
Click me
emerald-100
Click me
emerald-200
Click me
emerald-300
Click me
emerald-400
Click me
emerald-500
Click me
emerald-600
Click me
emerald-700
Click me
emerald-800
Click me
emerald-900
Click me
emerald-950
Click me
teal-50
Click me
teal-100
Click me
teal-200
Click me
teal-300
Click me
teal-400
Click me
teal-500
Click me
teal-600
Click me
teal-700
Click me
teal-800
Click me
teal-900
Click me
teal-950
Click me
cyan-50
Click me
cyan-100
Click me
cyan-200
Click me
cyan-300
Click me
cyan-400
Click me
cyan-500
Click me
cyan-600
Click me
cyan-700
Click me
cyan-800
Click me
cyan-900
Click me
cyan-950
Click me
sky-50
Click me
sky-100
Click me
sky-200
Click me
sky-300
Click me
sky-400
Click me
sky-500
Click me
sky-600
Click me
sky-700
Click me
sky-800
Click me
sky-900
Click me
sky-950
Click me
blue-50
Click me
blue-100
Click me
blue-200
Click me
blue-300
Click me
blue-400
Click me
blue-500
Click me
blue-600
Click me
blue-700
Click me
blue-800
Click me
blue-900
Click me
blue-950
Click me
indigo-50
Click me
indigo-100
Click me
indigo-200
Click me
indigo-300
Click me
indigo-400
Click me
indigo-500
Click me
indigo-600
Click me
indigo-700
Click me
indigo-800
Click me
indigo-900
Click me
indigo-950
Click me
violet-50
Click me
violet-100
Click me
violet-200
Click me
violet-300
Click me
violet-400
Click me
violet-500
Click me
violet-600
Click me
violet-700
Click me
violet-800
Click me
violet-900
Click me
violet-950
Click me
purple-50
Click me
purple-100
Click me
purple-200
Click me
purple-300
Click me
purple-400
Click me
purple-500
Click me
purple-600
Click me
purple-700
Click me
purple-800
Click me
purple-900
Click me
purple-950
Click me
fuchsia-50
Click me
fuchsia-100
Click me
fuchsia-200
Click me
fuchsia-300
Click me
fuchsia-400
Click me
fuchsia-500
Click me
fuchsia-600
Click me
fuchsia-700
Click me
fuchsia-800
Click me
fuchsia-900
Click me
fuchsia-950
Click me
pink-50
Click me
pink-100
Click me
pink-200
Click me
pink-300
Click me
pink-400
Click me
pink-500
Click me
pink-600
Click me
pink-700
Click me
pink-800
Click me
pink-900
Click me
pink-950
Click me
rose-50
Click me
rose-100
Click me
rose-200
Click me
rose-300
Click me
rose-400
Click me
rose-500
Click me
rose-600
Click me
rose-700
Click me
rose-800
Click me
rose-900
Click me
rose-950
Click me
slate-50
Click me
slate-100
Click me
slate-200
Click me
slate-300
Click me
slate-400
Click me
slate-500
Click me
slate-600
Click me
slate-700
Click me
slate-800
Click me
slate-900
Click me
slate-950
Click me
gray-50
Click me
gray-100
Click me
gray-200
Click me
gray-300
Click me
gray-400
Click me
gray-500
Click me
gray-600
Click me
gray-700
Click me
gray-800
Click me
gray-900
Click me
gray-950
Click me
zinc-50
Click me
zinc-100
Click me
zinc-200
Click me
zinc-300
Click me
zinc-400
Click me
zinc-500
Click me
zinc-600
Click me
zinc-700
Click me
zinc-800
Click me
zinc-900
Click me
zinc-950
Click me
neutral-50
Click me
neutral-100
Click me
neutral-200
Click me
neutral-300
Click me
neutral-400
Click me
neutral-500
Click me
neutral-600
Click me
neutral-700
Click me
neutral-800
Click me
neutral-900
Click me
neutral-950
Click me
stone-50
Click me
stone-100
Click me
stone-200
Click me
stone-300
Click me
stone-400
Click me
stone-500
Click me
stone-600
Click me
stone-700
Click me
stone-800
Click me
stone-900
Click me
stone-950
Large Buttons
Click me
red-50
Click me
red-100
Click me
red-200
Click me
red-300
Click me
red-400
Click me
red-500
Click me
red-600
Click me
red-700
Click me
red-800
Click me
red-900
Click me
red-950
Click me
orange-50
Click me
orange-100
Click me
orange-200
Click me
orange-300
Click me
orange-400
Click me
orange-500
Click me
orange-600
Click me
orange-700
Click me
orange-800
Click me
orange-900
Click me
orange-950
Click me
amber-50
Click me
amber-100
Click me
amber-200
Click me
amber-300
Click me
amber-400
Click me
amber-500
Click me
amber-600
Click me
amber-700
Click me
amber-800
Click me
amber-900
Click me
amber-950
Click me
yellow-50
Click me
yellow-100
Click me
yellow-200
Click me
yellow-300
Click me
yellow-400
Click me
yellow-500
Click me
yellow-600
Click me
yellow-700
Click me
yellow-800
Click me
yellow-900
Click me
yellow-950
Click me
lime-50
Click me
lime-100
Click me
lime-200
Click me
lime-300
Click me
lime-400
Click me
lime-500
Click me
lime-600
Click me
lime-700
Click me
lime-800
Click me
lime-900
Click me
lime-950
Click me
green-50
Click me
green-100
Click me
green-200
Click me
green-300
Click me
green-400
Click me
green-500
Click me
green-600
Click me
green-700
Click me
green-800
Click me
green-900
Click me
green-950
Click me
emerald-50
Click me
emerald-100
Click me
emerald-200
Click me
emerald-300
Click me
emerald-400
Click me
emerald-500
Click me
emerald-600
Click me
emerald-700
Click me
emerald-800
Click me
emerald-900
Click me
emerald-950
Click me
teal-50
Click me
teal-100
Click me
teal-200
Click me
teal-300
Click me
teal-400
Click me
teal-500
Click me
teal-600
Click me
teal-700
Click me
teal-800
Click me
teal-900
Click me
teal-950
Click me
cyan-50
Click me
cyan-100
Click me
cyan-200
Click me
cyan-300
Click me
cyan-400
Click me
cyan-500
Click me
cyan-600
Click me
cyan-700
Click me
cyan-800
Click me
cyan-900
Click me
cyan-950
Click me
sky-50
Click me
sky-100
Click me
sky-200
Click me
sky-300
Click me
sky-400
Click me
sky-500
Click me
sky-600
Click me
sky-700
Click me
sky-800
Click me
sky-900
Click me
sky-950
Click me
blue-50
Click me
blue-100
Click me
blue-200
Click me
blue-300
Click me
blue-400
Click me
blue-500
Click me
blue-600
Click me
blue-700
Click me
blue-800
Click me
blue-900
Click me
blue-950
Click me
indigo-50
Click me
indigo-100
Click me
indigo-200
Click me
indigo-300
Click me
indigo-400
Click me
indigo-500
Click me
indigo-600
Click me
indigo-700
Click me
indigo-800
Click me
indigo-900
Click me
indigo-950
Click me
violet-50
Click me
violet-100
Click me
violet-200
Click me
violet-300
Click me
violet-400
Click me
violet-500
Click me
violet-600
Click me
violet-700
Click me
violet-800
Click me
violet-900
Click me
violet-950
Click me
purple-50
Click me
purple-100
Click me
purple-200
Click me
purple-300
Click me
purple-400
Click me
purple-500
Click me
purple-600
Click me
purple-700
Click me
purple-800
Click me
purple-900
Click me
purple-950
Click me
fuchsia-50
Click me
fuchsia-100
Click me
fuchsia-200
Click me
fuchsia-300
Click me
fuchsia-400
Click me
fuchsia-500
Click me
fuchsia-600
Click me
fuchsia-700
Click me
fuchsia-800
Click me
fuchsia-900
Click me
fuchsia-950
Click me
pink-50
Click me
pink-100
Click me
pink-200
Click me
pink-300
Click me
pink-400
Click me
pink-500
Click me
pink-600
Click me
pink-700
Click me
pink-800
Click me
pink-900
Click me
pink-950
Click me
rose-50
Click me
rose-100
Click me
rose-200
Click me
rose-300
Click me
rose-400
Click me
rose-500
Click me
rose-600
Click me
rose-700
Click me
rose-800
Click me
rose-900
Click me
rose-950
Click me
slate-50
Click me
slate-100
Click me
slate-200
Click me
slate-300
Click me
slate-400
Click me
slate-500
Click me
slate-600
Click me
slate-700
Click me
slate-800
Click me
slate-900
Click me
slate-950
Click me
gray-50
Click me
gray-100
Click me
gray-200
Click me
gray-300
Click me
gray-400
Click me
gray-500
Click me
gray-600
Click me
gray-700
Click me
gray-800
Click me
gray-900
Click me
gray-950
Click me
zinc-50
Click me
zinc-100
Click me
zinc-200
Click me
zinc-300
Click me
zinc-400
Click me
zinc-500
Click me
zinc-600
Click me
zinc-700
Click me
zinc-800
Click me
zinc-900
Click me
zinc-950
Click me
neutral-50
Click me
neutral-100
Click me
neutral-200
Click me
neutral-300
Click me
neutral-400
Click me
neutral-500
Click me
neutral-600
Click me
neutral-700
Click me
neutral-800
Click me
neutral-900
Click me
neutral-950
Click me
stone-50
Click me
stone-100
Click me
stone-200
Click me
stone-300
Click me
stone-400
Click me
stone-500
Click me
stone-600
Click me
stone-700
Click me
stone-800
Click me
stone-900
Click me
stone-950
Custom Button
Build the button with color pallete
White Text
Click Me
Click Me
Click Me
HEX
RGB
HSV
Special Button
Click me
red-50
Click me
red-100
Click me
red-200
Click me
red-300
Click me
red-400
Click me
red-500
Click me
red-600
Click me
red-700
Click me
red-800
Click me
red-900
Click me
red-950
Click me
orange-50
Click me
orange-100
Click me
orange-200
Click me
orange-300
Click me
orange-400
Click me
orange-500
Click me
orange-600
Click me
orange-700
Click me
orange-800
Click me
orange-900
Click me
orange-950
Click me
amber-50
Click me
amber-100
Click me
amber-200
Click me
amber-300
Click me
amber-400
Click me
amber-500
Click me
amber-600
Click me
amber-700
Click me
amber-800
Click me
amber-900
Click me
amber-950
Click me
yellow-50
Click me
yellow-100
Click me
yellow-200
Click me
yellow-300
Click me
yellow-400
Click me
yellow-500
Click me
yellow-600
Click me
yellow-700
Click me
yellow-800
Click me
yellow-900
Click me
yellow-950
Click me
lime-50
Click me
lime-100
Click me
lime-200
Click me
lime-300
Click me
lime-400
Click me
lime-500
Click me
lime-600
Click me
lime-700
Click me
lime-800
Click me
lime-900
Click me
lime-950
Click me
green-50
Click me
green-100
Click me
green-200
Click me
green-300
Click me
green-400
Click me
green-500
Click me
green-600
Click me
green-700
Click me
green-800
Click me
green-900
Click me
green-950
Click me
emerald-50
Click me
emerald-100
Click me
emerald-200
Click me
emerald-300
Click me
emerald-400
Click me
emerald-500
Click me
emerald-600
Click me
emerald-700
Click me
emerald-800
Click me
emerald-900
Click me
emerald-950
Click me
teal-50
Click me
teal-100
Click me
teal-200
Click me
teal-300
Click me
teal-400
Click me
teal-500
Click me
teal-600
Click me
teal-700
Click me
teal-800
Click me
teal-900
Click me
teal-950
Click me
cyan-50
Click me
cyan-100
Click me
cyan-200
Click me
cyan-300
Click me
cyan-400
Click me
cyan-500
Click me
cyan-600
Click me
cyan-700
Click me
cyan-800
Click me
cyan-900
Click me
cyan-950
Click me
sky-50
Click me
sky-100
Click me
sky-200
Click me
sky-300
Click me
sky-400
Click me
sky-500
Click me
sky-600
Click me
sky-700
Click me
sky-800
Click me
sky-900
Click me
sky-950
Click me
blue-50
Click me
blue-100
Click me
blue-200
Click me
blue-300
Click me
blue-400
Click me
blue-500
Click me
blue-600
Click me
blue-700
Click me
blue-800
Click me
blue-900
Click me
blue-950
Click me
indigo-50
Click me
indigo-100
Click me
indigo-200
Click me
indigo-300
Click me
indigo-400
Click me
indigo-500
Click me
indigo-600
Click me
indigo-700
Click me
indigo-800
Click me
indigo-900
Click me
indigo-950
Click me
violet-50
Click me
violet-100
Click me
violet-200
Click me
violet-300
Click me
violet-400
Click me
violet-500
Click me
violet-600
Click me
violet-700
Click me
violet-800
Click me
violet-900
Click me
violet-950
Click me
purple-50
Click me
purple-100
Click me
purple-200
Click me
purple-300
Click me
purple-400
Click me
purple-500
Click me
purple-600
Click me
purple-700
Click me
purple-800
Click me
purple-900
Click me
purple-950
Click me
fuchsia-50
Click me
fuchsia-100
Click me
fuchsia-200
Click me
fuchsia-300
Click me
fuchsia-400
Click me
fuchsia-500
Click me
fuchsia-600
Click me
fuchsia-700
Click me
fuchsia-800
Click me
fuchsia-900
Click me
fuchsia-950
Click me
pink-50
Click me
pink-100
Click me
pink-200
Click me
pink-300
Click me
pink-400
Click me
pink-500
Click me
pink-600
Click me
pink-700
Click me
pink-800
Click me
pink-900
Click me
pink-950
Click me
rose-50
Click me
rose-100
Click me
rose-200
Click me
rose-300
Click me
rose-400
Click me
rose-500
Click me
rose-600
Click me
rose-700
Click me
rose-800
Click me
rose-900
Click me
rose-950
Click me
slate-50
Click me
slate-100
Click me
slate-200
Click me
slate-300
Click me
slate-400
Click me
slate-500
Click me
slate-600
Click me
slate-700
Click me
slate-800
Click me
slate-900
Click me
slate-950
Click me
gray-50
Click me
gray-100
Click me
gray-200
Click me
gray-300
Click me
gray-400
Click me
gray-500
Click me
gray-600
Click me
gray-700
Click me
gray-800
Click me
gray-900
Click me
gray-950
Click me
zinc-50
Click me
zinc-100
Click me
zinc-200
Click me
zinc-300
Click me
zinc-400
Click me
zinc-500
Click me
zinc-600
Click me
zinc-700
Click me
zinc-800
Click me
zinc-900
Click me
zinc-950
Click me
neutral-50
Click me
neutral-100
Click me
neutral-200
Click me
neutral-300
Click me
neutral-400
Click me
neutral-500
Click me
neutral-600
Click me
neutral-700
Click me
neutral-800
Click me
neutral-900
Click me
neutral-950
Click me
stone-50
Click me
stone-100
Click me
stone-200
Click me
stone-300
Click me
stone-400
Click me
stone-500
Click me
stone-600
Click me
stone-700
Click me
stone-800
Click me
stone-900
Click me
stone-950
On this page
Tailwind Buttons
Small buttons
Medium buttons
Large buttons
Custom Buttons
Build with color pallete
Special Buttons
Special Buttons