Widgets/Container Widget

Container Widget

Group elements and provide layout structure for HTML and SVG content.

View as MarkdownOpen in ChatGPT Open in Claude

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>

<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

Last updated on January 5, 2026