1. Components
  2. Layout Splitter

Overlays

Tailwind CSS Layout Splitter

Customize block sizes and create responsive layouts with Tailwind CSS Layout Splitters for better design flexibility in your web projects.

Requires JS

Note that this component requires the use of our Layout Splitter plugin, else you can skip this message if you are already using Preline UI as a package.

Learn more

Horizontal direction

Demo with horizontal blocks.

Left
Center
Right

Vertical direction

Demo with vertical blocks.

Top
Center
Bottom

Mixed direction

Demo with horizontal and vertical blocks.

Top
Left
Center
Right
Bottom

Manually added splitters

Demo with manually added splitters.

Top
Left
Center
Right
Bottom

Limit size

Demo with limited size.

Top
Left
Center
Right
Bottom

Destroy and Reinitialize

Provides destroy method that helps to destroy a layout splitter.

Top
Left
Center
Right
Bottom