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

<div data-type="container" class="flex items-center justify-center w-full h-full">
  <div data-type="text" class="text-2xl">Content inside container</div>
</div>

Attributes

Attribute	Type	Default	Description
data-type	string	-	Must be "container"

Supported Tags

HTML Elements

• div

• span

• p

SVG Elements

• svg

• g

Examples

Basic HTML Container

<div data-type="container" class="relative w-full h-full bg-blue-500">
  <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center">
    <div class="text-white text-4xl font-bold" 
         data-type="text" 
         data-animate="fade" 
         data-start="0" 
         data-duration-animation="2">
      Welcome
    </div>
    <div class="text-blue-100 text-xl mt-4" 
         data-type="text" 
         data-animate="fade" 
         data-start="2" 
         data-duration-animation="2">
      To our platform
    </div>
  </div>
</div>

SVG Container

<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">
  <circle cx="100" cy="100" r="80" fill="blue" />
  <text x="100" y="110" text-anchor="middle" fill="white" font-size="24" font-weight="bold">
    SVG Content
  </text>
</svg>

Nested Containers

<div data-type="container" class="relative w-full h-full bg-gray-900">
  <!-- Header container -->
  <div class="absolute top-0 left-0 w-full h-1/4 bg-blue-600 flex items-center justify-center">
    <div class="text-white text-3xl font-bold" 
         data-type="text" 
         data-animate="fade" 
         data-start="0" 
         data-duration-animation="2">
      Header
    </div>
  </div>
  
  <!-- Main content container -->
  <div class="absolute top-1/4 left-0 w-full h-1/2 bg-gray-800 flex items-center justify-center">
    <div class="text-white text-5xl font-bold" 
         data-type="text" 
         data-animate="fade" 
         data-start="2" 
         data-duration-animation="2">
      Main Content
    </div>
  </div>
  
  <!-- Footer container -->
  <div class="absolute bottom-0 left-0 w-full h-1/4 bg-green-600 flex items-center justify-center">
    <div class="text-white text-2xl font-semibold" 
         data-type="text" 
         data-animate="fade" 
         data-start="4" 
         data-duration-animation="2">
      Footer
    </div>
  </div>
</div>

Layout Patterns

Centered Layout

<div data-type="container" class="relative w-full h-full bg-purple-500">
  <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center">
    <div class="text-white text-6xl font-bold mb-4" 
         data-type="text" 
         data-animate="fade" 
         data-start="0" 
         data-duration-animation="2">
      Centered Content
    </div>
    <div class="text-purple-100 text-2xl" 
         data-type="text" 
         data-animate="fade" 
         data-start="2" 
         data-duration-animation="2">
      Perfectly aligned
    </div>
  </div>
</div>

Grid Layout

<div data-type="container" class="relative w-full h-full bg-gray-100">
  <!-- Top row -->
  <div class="absolute top-0 left-0 w-full h-1/2 flex">
    <div class="w-1/2 h-full bg-red-500 flex items-center justify-center">
      <div class="text-white text-3xl font-bold" 
           data-type="text" 
           data-animate="fade" 
           data-start="0" 
           data-duration-animation="2">
        Top Left
      </div>
    </div>
    <div class="w-1/2 h-full bg-blue-500 flex items-center justify-center">
      <div class="text-white text-3xl font-bold" 
           data-type="text" 
           data-animate="fade" 
           data-start="1" 
           data-duration-animation="2">
        Top Right
      </div>
    </div>
  </div>
  
  <!-- Bottom row -->
  <div class="absolute bottom-0 left-0 w-full h-1/2 flex">
    <div class="w-1/2 h-full bg-green-500 flex items-center justify-center">
      <div class="text-white text-3xl font-bold" 
           data-type="text" 
           data-animate="fade" 
           data-start="2" 
           data-duration-animation="2">
        Bottom Left
      </div>
    </div>
    <div class="w-1/2 h-full bg-yellow-500 flex items-center justify-center">
      <div class="text-white text-3xl font-bold" 
           data-type="text" 
           data-animate="fade" 
           data-start="3" 
           data-duration-animation="2">
        Bottom Right
      </div>
    </div>
  </div>
</div>

Sidebar Layout

<div data-type="container" class="relative w-full h-full bg-white">
  <!-- Sidebar -->
  <div class="absolute top-0 left-0 w-1/4 h-full bg-gray-800 flex items-center justify-center">
    <div class="text-white text-2xl font-bold" 
         data-type="text" 
         data-animate="fade" 
         data-start="0" 
         data-duration-animation="2">
      Sidebar
    </div>
  </div>
  
  <!-- Main content -->
  <div class="absolute top-0 right-0 w-3/4 h-full bg-gray-100 flex items-center justify-center">
    <div class="text-gray-800 text-4xl font-bold" 
         data-type="text" 
         data-animate="fade" 
         data-start="2" 
         data-duration-animation="2">
      Main Content Area
    </div>
  </div>
</div>

SVG Container Examples

Simple SVG

<div data-type="container" class="relative w-full h-full bg-black">
  <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">
    <circle cx="200" cy="200" r="150" fill="blue" />
    <text x="200" y="210" text-anchor="middle" fill="white" font-size="32" font-weight="bold">
      SVG Circle
    </text>
  </svg>
</div>

Complex SVG Layout

<div data-type="container" class="relative w-full h-full bg-gray-900">
  <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">
    <!-- Background -->
    <rect x="0" y="0" width="600" height="400" fill="darkblue" />
    
    <!-- Header -->
    <rect x="0" y="0" width="600" height="100" fill="blue" />
    <text x="300" y="60" text-anchor="middle" fill="white" font-size="24" font-weight="bold">
      SVG Header
    </text>
    
    <!-- Main content -->
    <rect x="0" y="100" width="600" height="200" fill="lightblue" />
    <text x="300" y="210" text-anchor="middle" fill="darkblue" font-size="32" font-weight="bold">
      Main Content
    </text>
    
    <!-- Footer -->
    <rect x="0" y="300" width="600" height="100" fill="blue" />
    <text x="300" y="360" text-anchor="middle" fill="white" font-size="20">
      SVG Footer
    </text>
  </svg>
</div>

Styling Options

Background Colors

<!-- Solid color -->
<div data-type="container" class="bg-blue-500">Content</div>

<!-- Gradient -->
<div data-type="container" class="bg-gradient-to-br from-blue-500 to-purple-600">Content</div>

<!-- Pattern -->
<div data-type="container" class="bg-gray-100">Content</div>

Layout Classes

<!-- Flexbox -->
<div data-type="container" class="flex items-center justify-center">Content</div>

<!-- Grid -->
<div data-type="container" class="grid grid-cols-2 gap-4">Content</div>

<!-- Absolute positioning -->
<div data-type="container" class="relative">Content</div>

Spacing

<!-- Padding -->
<div data-type="container" class="p-8">Content</div>

<!-- Margins -->
<div data-type="container" class="m-4">Content</div>

<!-- Custom spacing -->
<div data-type="container" class="px-6 py-4">Content</div>

Common Use Cases

Dashboard Layout

<div data-type="container" class="relative w-full h-full bg-gray-100">
  <!-- Header -->
  <div class="absolute top-0 left-0 w-full h-16 bg-blue-600 flex items-center justify-center">
    <div class="text-white text-2xl font-bold" 
         data-type="text" 
         data-animate="fade" 
         data-start="0" 
         data-duration-animation="2">
      Dashboard
    </div>
  </div>
  
  <!-- Sidebar -->
  <div class="absolute top-16 left-0 w-64 h-full bg-gray-800 flex items-center justify-center">
    <div class="text-white text-xl" 
         data-type="text" 
         data-animate="fade" 
         data-start="1" 
         data-duration-animation="2">
      Navigation
    </div>
  </div>
  
  <!-- Main content -->
  <div class="absolute top-16 left-64 w-full h-full bg-white flex items-center justify-center">
    <div class="text-gray-800 text-3xl font-bold" 
         data-type="text" 
         data-animate="fade" 
         data-start="2" 
         data-duration-animation="2">
      Main Content
    </div>
  </div>
</div>

Card Layout

<div data-type="container" class="relative w-full h-full bg-gray-200">
  <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">
    <div class="text-gray-800 text-3xl font-bold mb-4" 
         data-type="text" 
         data-animate="fade" 
         data-start="0" 
         data-duration-animation="2">
      Card Title
    </div>
    <div class="text-gray-600 text-lg" 
         data-type="text" 
         data-animate="fade" 
         data-start="2" 
         data-duration-animation="2">
      This is a card layout with proper spacing and styling.
    </div>
  </div>
</div>

Hero Section

<div data-type="container" class="relative w-full h-full bg-gradient-to-br from-purple-600 to-blue-600">
  <!-- Background elements -->
  <div class="absolute top-0 left-0 w-full h-full opacity-20">
    <div class="absolute top-1/4 left-1/4 w-32 h-32 bg-white rounded-full"></div>
    <div class="absolute bottom-1/4 right-1/4 w-24 h-24 bg-white rounded-full"></div>
  </div>
  
  <!-- Main content -->
  <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center">
    <div class="text-white text-6xl font-bold mb-6" 
         data-type="text" 
         data-animate="fade" 
         data-start="0" 
         data-duration-animation="3">
      Hero Title
    </div>
    <div class="text-purple-100 text-2xl mb-8" 
         data-type="text" 
         data-animate="fade" 
         data-start="3" 
         data-duration-animation="2">
      Subtitle text goes here
    </div>
    <div class="text-white text-lg" 
         data-type="text" 
         data-animate="fade" 
         data-start="5" 
         data-duration-animation="2">
      Additional information
    </div>
  </div>
</div>

Best 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

---