Container Widget
The Container Widget groups elements together and provides layout structure. It supports both HTML and SVG elements, making it the foundation for organizing your template content.
Basic Usage
1<div data-type="container" class="flex items-center justify-center w-full h-full">
2 <div data-type="text" class="text-2xl">Content inside container</div>
3</div>
4Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
| data-type | string | - | Must be "container" |
Supported Tags
HTML Elements
divspanp
SVG Elements
svgg
Examples
Basic HTML Container
1<div data-type="container" class="relative w-full h-full bg-blue-500">
2 <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center">
3 <div class="text-white text-4xl font-bold"
4 data-type="text"
5 data-animate="fade"
6 data-start="0"
7 data-duration-animation="2">
8 Welcome
9 </div>
10 <div class="text-blue-100 text-xl mt-4"
11 data-type="text"
12 data-animate="fade"
13 data-start="2"
14 data-duration-animation="2">
15 To our platform
16 </div>
17 </div>
18</div>
19SVG Container
1<svg data-type="container" viewBox="0 0 200 200" width="200" height="200" class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
2 <circle cx="100" cy="100" r="80" fill="blue" />
3 <text x="100" y="110" text-anchor="middle" fill="white" font-size="24" font-weight="bold">
4 SVG Content
5 </text>
6</svg>
7Nested Containers
1<div data-type="container" class="relative w-full h-full bg-gray-900">
2 <!-- Header container -->
3 <div class="absolute top-0 left-0 w-full h-1/4 bg-blue-600 flex items-center justify-center">
4 <div class="text-white text-3xl font-bold"
5 data-type="text"
6 data-animate="fade"
7 data-start="0"
8 data-duration-animation="2">
9 Header
10 </div>
11 </div>
12
13 <!-- Main content container -->
14 <div class="absolute top-1/4 left-0 w-full h-1/2 bg-gray-800 flex items-center justify-center">
15 <div class="text-white text-5xl font-bold"
16 data-type="text"
17 data-animate="fade"
18 data-start="2"
19 data-duration-animation="2">
20 Main Content
21 </div>
22 </div>
23
24 <!-- Footer container -->
25 <div class="absolute bottom-0 left-0 w-full h-1/4 bg-green-600 flex items-center justify-center">
26 <div class="text-white text-2xl font-semibold"
27 data-type="text"
28 data-animate="fade"
29 data-start="4"
30 data-duration-animation="2">
31 Footer
32 </div>
33 </div>
34</div>
35Layout Patterns
Centered Layout
1<div data-type="container" class="relative w-full h-full bg-purple-500">
2 <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center">
3 <div class="text-white text-6xl font-bold mb-4"
4 data-type="text"
5 data-animate="fade"
6 data-start="0"
7 data-duration-animation="2">
8 Centered Content
9 </div>
10 <div class="text-purple-100 text-2xl"
11 data-type="text"
12 data-animate="fade"
13 data-start="2"
14 data-duration-animation="2">
15 Perfectly aligned
16 </div>
17 </div>
18</div>
19Grid Layout
1<div data-type="container" class="relative w-full h-full bg-gray-100">
2 <!-- Top row -->
3 <div class="absolute top-0 left-0 w-full h-1/2 flex">
4 <div class="w-1/2 h-full bg-red-500 flex items-center justify-center">
5 <div class="text-white text-3xl font-bold"
6 data-type="text"
7 data-animate="fade"
8 data-start="0"
9 data-duration-animation="2">
10 Top Left
11 </div>
12 </div>
13 <div class="w-1/2 h-full bg-blue-500 flex items-center justify-center">
14 <div class="text-white text-3xl font-bold"
15 data-type="text"
16 data-animate="fade"
17 data-start="1"
18 data-duration-animation="2">
19 Top Right
20 </div>
21 </div>
22 </div>
23
24 <!-- Bottom row -->
25 <div class="absolute bottom-0 left-0 w-full h-1/2 flex">
26 <div class="w-1/2 h-full bg-green-500 flex items-center justify-center">
27 <div class="text-white text-3xl font-bold"
28 data-type="text"
29 data-animate="fade"
30 data-start="2"
31 data-duration-animation="2">
32 Bottom Left
33 </div>
34 </div>
35 <div class="w-1/2 h-full bg-yellow-500 flex items-center justify-center">
36 <div class="text-white text-3xl font-bold"
37 data-type="text"
38 data-animate="fade"
39 data-start="3"
40 data-duration-animation="2">
41 Bottom Right
42 </div>
43 </div>
44 </div>
45</div>
46Sidebar Layout
1<div data-type="container" class="relative w-full h-full bg-white">
2 <!-- Sidebar -->
3 <div class="absolute top-0 left-0 w-1/4 h-full bg-gray-800 flex items-center justify-center">
4 <div class="text-white text-2xl font-bold"
5 data-type="text"
6 data-animate="fade"
7 data-start="0"
8 data-duration-animation="2">
9 Sidebar
10 </div>
11 </div>
12
13 <!-- Main content -->
14 <div class="absolute top-0 right-0 w-3/4 h-full bg-gray-100 flex items-center justify-center">
15 <div class="text-gray-800 text-4xl font-bold"
16 data-type="text"
17 data-animate="fade"
18 data-start="2"
19 data-duration-animation="2">
20 Main Content Area
21 </div>
22 </div>
23</div>
24SVG Container Examples
Simple SVG
1<div data-type="container" class="relative w-full h-full bg-black">
2 <svg data-type="container" viewBox="0 0 400 400" width="400" height="400" class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
3 <circle cx="200" cy="200" r="150" fill="blue" />
4 <text x="200" y="210" text-anchor="middle" fill="white" font-size="32" font-weight="bold">
5 SVG Circle
6 </text>
7 </svg>
8</div>
9Complex SVG Layout
1<div data-type="container" class="relative w-full h-full bg-gray-900">
2 <svg data-type="container" viewBox="0 0 600 400" width="600" height="400" class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
3 <!-- Background -->
4 <rect x="0" y="0" width="600" height="400" fill="darkblue" />
5
6 <!-- Header -->
7 <rect x="0" y="0" width="600" height="100" fill="blue" />
8 <text x="300" y="60" text-anchor="middle" fill="white" font-size="24" font-weight="bold">
9 SVG Header
10 </text>
11
12 <!-- Main content -->
13 <rect x="0" y="100" width="600" height="200" fill="lightblue" />
14 <text x="300" y="210" text-anchor="middle" fill="darkblue" font-size="32" font-weight="bold">
15 Main Content
16 </text>
17
18 <!-- Footer -->
19 <rect x="0" y="300" width="600" height="100" fill="blue" />
20 <text x="300" y="360" text-anchor="middle" fill="white" font-size="20">
21 SVG Footer
22 </text>
23 </svg>
24</div>
25Styling Options
Background Colors
1<!-- Solid color -->
2<div data-type="container" class="bg-blue-500">Content</div>
3
4<!-- Gradient -->
5<div data-type="container" class="bg-gradient-to-br from-blue-500 to-purple-600">Content</div>
6
7<!-- Pattern -->
8<div data-type="container" class="bg-gray-100">Content</div>
9Layout Classes
1<!-- Flexbox -->
2<div data-type="container" class="flex items-center justify-center">Content</div>
3
4<!-- Grid -->
5<div data-type="container" class="grid grid-cols-2 gap-4">Content</div>
6
7<!-- Absolute positioning -->
8<div data-type="container" class="relative">Content</div>
9Spacing
1<!-- Padding -->
2<div data-type="container" class="p-8">Content</div>
3
4<!-- Margins -->
5<div data-type="container" class="m-4">Content</div>
6
7<!-- Custom spacing -->
8<div data-type="container" class="px-6 py-4">Content</div>
9Common Use Cases
Dashboard Layout
1<div data-type="container" class="relative w-full h-full bg-gray-100">
2 <!-- Header -->
3 <div class="absolute top-0 left-0 w-full h-16 bg-blue-600 flex items-center justify-center">
4 <div class="text-white text-2xl font-bold"
5 data-type="text"
6 data-animate="fade"
7 data-start="0"
8 data-duration-animation="2">
9 Dashboard
10 </div>
11 </div>
12
13 <!-- Sidebar -->
14 <div class="absolute top-16 left-0 w-64 h-full bg-gray-800 flex items-center justify-center">
15 <div class="text-white text-xl"
16 data-type="text"
17 data-animate="fade"
18 data-start="1"
19 data-duration-animation="2">
20 Navigation
21 </div>
22 </div>
23
24 <!-- Main content -->
25 <div class="absolute top-16 left-64 w-full h-full bg-white flex items-center justify-center">
26 <div class="text-gray-800 text-3xl font-bold"
27 data-type="text"
28 data-animate="fade"
29 data-start="2"
30 data-duration-animation="2">
31 Main Content
32 </div>
33 </div>
34</div>
35Card Layout
1<div data-type="container" class="relative w-full h-full bg-gray-200">
2 <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-96 h-64 bg-white rounded-lg shadow-lg p-8">
3 <div class="text-gray-800 text-3xl font-bold mb-4"
4 data-type="text"
5 data-animate="fade"
6 data-start="0"
7 data-duration-animation="2">
8 Card Title
9 </div>
10 <div class="text-gray-600 text-lg"
11 data-type="text"
12 data-animate="fade"
13 data-start="2"
14 data-duration-animation="2">
15 This is a card layout with proper spacing and styling.
16 </div>
17 </div>
18</div>
19Hero Section
1<div data-type="container" class="relative w-full h-full bg-gradient-to-br from-purple-600 to-blue-600">
2 <!-- Background elements -->
3 <div class="absolute top-0 left-0 w-full h-full opacity-20">
4 <div class="absolute top-1/4 left-1/4 w-32 h-32 bg-white rounded-full"></div>
5 <div class="absolute bottom-1/4 right-1/4 w-24 h-24 bg-white rounded-full"></div>
6 </div>
7
8 <!-- Main content -->
9 <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center">
10 <div class="text-white text-6xl font-bold mb-6"
11 data-type="text"
12 data-animate="fade"
13 data-start="0"
14 data-duration-animation="3">
15 Hero Title
16 </div>
17 <div class="text-purple-100 text-2xl mb-8"
18 data-type="text"
19 data-animate="fade"
20 data-start="3"
21 data-duration-animation="2">
22 Subtitle text goes here
23 </div>
24 <div class="text-white text-lg"
25 data-type="text"
26 data-animate="fade"
27 data-start="5"
28 data-duration-animation="2">
29 Additional information
30 </div>
31 </div>
32</div>
33Best Practices
Structure
- Use containers for grouping: Group related elements together
- Nest appropriately: Don't over-nest containers
- Clear hierarchy: Maintain a clear visual hierarchy
- Consistent spacing: Use consistent margins and padding
Performance
- Minimize nesting: Avoid unnecessary container nesting
- Efficient layouts: Use appropriate layout methods
- Clean markup: Keep HTML structure clean and semantic
Accessibility
- Semantic structure: Use appropriate HTML elements
- Clear organization: Organize content logically
- Proper contrast: Ensure good color contrast
- Readable text: Use appropriate font sizes and weights
Troubleshooting
Container Not Displaying
Problem: Container doesn't appear or content is missing
Solutions:
- Check that
data-type="container"is set correctly - Verify the container has proper dimensions (w-full h-full)
- Ensure child elements are properly positioned
- Check for CSS conflicts
Layout Issues
Problem: Elements not positioning correctly
Solutions:
- Use appropriate positioning classes (absolute, relative)
- Check that parent container has proper dimensions
- Verify flexbox or grid classes are correct
- Test different layout approaches
SVG Not Rendering
Problem: SVG elements don't display
Solutions:
- Ensure SVG has proper viewBox attribute
- Check that SVG dimensions are set
- Verify SVG content is valid
- Use appropriate SVG positioning
Styling Problems
Problem: CSS styles not applying correctly
Solutions:
- Check that Tailwind classes are correct
- Verify CSS specificity
- Test with inline styles
- Ensure proper class ordering
Related Widgets
- Text Widget - For text content inside containers
- Image Widget - For images inside containers
- Counter Widget - For animated numbers inside containers
Last updated: 2026-01-05