Create a custom multi-tab widget that works as a flexible container system.
The widget should allow me to create multiple tabs, and each tab should have its own content area. The content area must work like a container where I can drag and drop other widgets inside, such as text, images, buttons, forms, videos, shortcodes, or any other widget. This should make the tab widget multi-purpose, not limited to one type of content.
The tab layout should be standard horizontal tabs across the top.
On desktop, the tabs should appear in one horizontal row. On mobile, the tabs should also stay horizontal, but the tab row should become scrollable sideways if the tabs do not fit the screen. The tab width should be automatic based on the tab text, not forced to equal width.
Visitors should switch between tabs by hovering over a tab on desktop. When a visitor hovers over a tab, the matching content area should appear instantly or with a smooth fade effect.
Since mobile devices do not support real hover, mobile users should be able to tap a tab to open its content.
The widget should include these controls:
- Add, remove, and reorder tabs
- Edit each tab title
- Set a default active tab
- Drag and drop widgets inside each tab content area
- Control tab alignment
- Control spacing between tabs
- Control tab padding
- Control active tab style
- Control hover tab style
- Control inactive tab style
- Control content container padding
- Control content background, border, radius, and shadow
- Enable or disable animation when switching tabs
- Set animation speed
The widget must be responsive and easy to use. It should not break when different widgets are added inside the tab content area. Each tab content section should behave like a normal container, so I can build different layouts inside each tab.
The final result should feel clean, lightweight, and easy to manage from the editor.