Visualize the box model.
Master Tailwind CSS spacing.
A simple interactive site in appreciation to Tailwind CSS.
Control Panel
Configure margins, padding, gaps, and borders to see precise guidelines, overlays, and layout behaviors in real-time.
Light & Dark Mode
Compare light and dark theme configurations side-by-side. Drag the interactive vertical divider to preview how components adapt to dark mode in real-time.
Backdrop Filters
Interact with various backdrop filter effects. Swipe the card slider or select a preset option below to test Tailwind CSS blur, grayscale, and saturation utilities.
Photo credits to mr bituin
Responsive Design
Use container queries to style elements based on the size of their parent container. Drag the handle on the right or select a preset to resize the card.
Beach House on Lake Huron
4.86 (128 reviews) · Bayfield, ONThis sunny and spacious beach house is for those seeking a premium lakeside getaway. Experience modern architecture on the beautiful shores of Lake Huron. Show more
Show more 
Animation
Design custom cubic-bezier transition curves. Drag the control anchors to define acceleration rates (including overshoots and bounces) and preview their behavior.