Tailwind CSS Playground

Enter Tailwind classes and preview with inline style simulation

flexitems-centergap-4p-4bg-orange-500text-whiterounded-lgshadow-lg

Preview � Desktop (100px)

This is a sample component. The classes you enter are applied here via inline styles.

Class Library

Flexbox

flexflex-colitems-centerjustify-betweenjustify-centergap-2gap-4flex-1flex-wrapflex-shrink-0

Grid

gridgrid-cols-2grid-cols-3grid-cols-4col-span-2col-span-3

Colors

bg-orange-500text-orange-500border-orange-500bg-blue-500text-blue-500bg-green-500text-green-500bg-red-500text-red-500bg-purple-500text-purple-500

Spacing

p-2p-4p-6px-4py-2m-2m-4mx-automy-4gap-2gap-4space-y-2

Typography

text-xstext-smtext-basetext-lgtext-xltext-2xlfont-boldfont-mediumfont-semiboldtext-centeruppercasetracking-wide

Borders

roundedrounded-mdrounded-lgrounded-fullborderborder-2border-dashedborder-orange-500border-blue-500

Shadows

shadowshadow-mdshadow-lgshadow-xlshadow-smshadow-inner