Wireframe Playground

Use the "Layout Controls" button in the top-right corner to customize the wireframe layout.

Card 1

This is a sample card with some content to demonstrate the layout.

Card 2

This is a sample card with some content to demonstrate the layout.

Card 3

This is a sample card with some content to demonstrate the layout.

Card 4

This is a sample card with some content to demonstrate the layout.

Card 5

This is a sample card with some content to demonstrate the layout.

Card 6

This is a sample card with some content to demonstrate the layout.

Card 7

This is a sample card with some content to demonstrate the layout.

Card 8

This is a sample card with some content to demonstrate the layout.

Card 9

This is a sample card with some content to demonstrate the layout.

Controls Available

Navigation Type: Choose between Normal (top + bottom nav), Sticky (sticky top nav), or Responsive (mobile bottom, desktop top)
Sidebar: Show/hide sidebar and set position (left or right)
Nav Corners: Control how nav and sidebar interact at corners (navbar or sidebar takes priority)
CSS Variables: Fine-tune spacing for all nav and sidebar elements using Tailwind spacing scale

Additional Content

Section 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Wireframe Playground

Card 1

Card 2

Card 3

Card 4

Card 5

Card 6

Card 7

Card 8

Card 9

Controls Available

Additional Content

Section 1

Section 2

Section 3

Section 4

Section 5