KDF
Playground
button.json
card.json
Preview
Invalid JSON
Powered by Tailwind CSS. Try changing colors or classes below.
Theme
Emerald
Emerald
Blue
Indigo
Purple
Rose
Orange
{ "$": "button", "className": "inline-flex items-center justify-center rounded-lg px-8 py-4 text-sm font-semibold tracking-wide text-white shadow-lg shadow-emerald-500/30 transition-all duration-300 hover:scale-105 hover:shadow-emerald-500/50 focus:outline-none focus:ring-2 focus:ring-emerald-400 focus:ring-offset-2 active:scale-95", "variants": { "default": "bg-gradient-to-r from-emerald-500 to-emerald-700", "destructive": "bg-gradient-to-r from-red-500 to-rose-600" }, "defaultVariants": { "variant": "default" } }
Live Preview
Live