Back

Alternating Experiences App Screenshot Previews Award Showcase Grid Bonus Content Grid Course Card Grid Course Offer Cards Custom Section Benefits Dual Product Cards Filterable Portfolio Offer Image Grid Partners & Clients Portfolio Reveal Grid Quality Asym Images Service Icon Grid Specialty Icon Grid STEM Learning Previews Template Showcase Grid Webinar Grid

App Download CTA CTA Profile Card CTA Stats & Image Newsletter CTA Logos Plan CTA Testimonial Product CTA Interactive Profile CTA Background

App Features Centered App Features Mobile Feature Image Toggle Feature Large Image

App Onboarding Steps Event Timeline Step Image Cards Story Mission Banners

Basic Testimonial Grid Simple Testimonial Testimonial Cards Stats Testimonial Slider

Centered Video Show Video Feature Highlights Video Fullwidth Overlay Video Gallery Video Testimonial Video with Sidebar

Challenge Icon Cards Dual Problem Cards Multi-Format Problems Problem Before/After Problem Image Stack Tabbed Problem Explore

Classic Accordion Colored Block FAQ Formal List FAQ Grid Toggle FAQ Interactive List FAQ Sidebar Intro FAQ

Course Product Page Webinar Product Booking

Footer Sitemap Simple Footer Social

Founder's Perspective Guiding Core Values Our Journey Timeline Our Working Philosophy The Evolution Story

Global Scale Stats Impact Highlights Key Metrics Showcase Milestone Cards Progress Report List Statistic Box Grid

Hero BG Pattern Card Hero Centered Media Hero Feature Cards Hero Full BG Image Hero Split BG Image Hero Split Overlay

Medical Team Grid Team Leadership Grid

Navbar Announce User Navbar Mega Menu Navbar Prev/Next Nav Navbar Top Bar Links Navbar with Search Standard Navbar

Pricing Compare Table Pricing Toggle Cards

#Multi-Format Problems

problem

Highlights various challenges or problems using a mix of card sizes and formats for dynamic visual storytelling.

Problem

External Struggle

Our latest updates and what is happening in the organisation

Tag

Content can be used to explain the glimpse idea or to catch in seconds viewer eye.

Tag

Content can be used to explain the glimpse idea or to catch in seconds viewer eye.

Tag

Content can be used to explain the glimpse idea or to catch in seconds viewer eye.

Headline Description

Content can be used to explain the glimpse idea or to catch in seconds viewer eye.

<section class="container mx-auto my-8 px-6 lg:my-16 lg:px-16">
  <div class="mb-4 grid grid-cols-1 lg:mb-8 lg:grid-cols-2">
    <div class="col-span-1 lg:col-span-2">
      <div class="mb-2 max-w-max rounded-md border-2 border-blue-600 px-2 font-bold text-blue-600 lg:mb-4">Problem</div>
    </div>
    <div>
      <h1 class="mb-2 text-2xl font-bold capitalize lg:mb-0 lg:text-6xl">External Struggle</h1>
    </div>
    <div class="flex items-center">
      <p class="w-full text-left text-base font-semibold lg:text-right lg:text-2xl">Our latest updates and what is happening in the organisation</p>
    </div>
  </div>
  <div class="grid grid-cols-1 gap-4 lg:grid-cols-3">
    <div class="relative overflow-hidden rounded-lg bg-gray-200" style="padding-top: 100%">
      <img src="https://placehold.co/400x400" class="absolute top-0 w-full" />
      <div class="absolute left-0 top-0 w-full p-4">
        <div class="mb-2 max-w-max rounded-md border-2 border-black px-2 font-bold lg:mb-4">Tag</div>
        <div class="text-base lg:text-xl">Content can be used to explain the glimpse idea or to catch in seconds viewer eye.</div>
      </div>
    </div>
    <div class="relative overflow-hidden rounded-lg bg-gray-200" style="padding-top: 100%">
      <img src="https://placehold.co/400x400" class="absolute top-0 w-full" />
      <div class="absolute left-0 top-0 w-full p-4">
        <div class="mb-2 max-w-max rounded-md border-2 border-black px-2 font-bold lg:mb-4">Tag</div>
        <div class="text-base lg:text-xl">Content can be used to explain the glimpse idea or to catch in seconds viewer eye.</div>
      </div>
    </div>
    <div class="relative overflow-hidden rounded-lg bg-gray-200" style="padding-top: 100%">
      <img src="https://placehold.co/400x400" class="absolute top-0 w-full" />
      <div class="absolute left-0 top-0 w-full p-4">
        <div class="mb-2 max-w-max rounded-md border-2 border-black px-2 font-bold lg:mb-4">Tag</div>
        <div class="text-base lg:text-xl">Content can be used to explain the glimpse idea or to catch in seconds viewer eye.</div>
      </div>
    </div>
    <div class="relative col-span-1 overflow-hidden rounded-lg bg-gray-200 lg:col-span-3" style="padding-top: 60%">
      <img src="https://placehold.co/800x500" class="absolute top-0 w-full" />
      <div class="absolute left-0 top-0 w-full p-4 lg:p-8">
        <h1 class="mb-2 text-2xl font-bold capitalize lg:mb-4 lg:text-6xl">Headline Description</h1>
        <div class="text-base lg:text-xl">Content can be used to explain the glimpse idea or to catch in seconds viewer eye.</div>
      </div>
    </div>
  </div>
</section>

<section class="container mx-auto my-8 px-6 lg:my-16 lg:px-16">
  <div class="mb-4 grid grid-cols-1 lg:mb-8 lg:grid-cols-2">
    <div class="col-span-1 lg:col-span-2">
      <div class="mb-2 max-w-max rounded-md border-2 border-blue-600 px-2 font-bold text-blue-600 lg:mb-4">Problem</div>
    </div>
    <div>
      <h1 class="mb-2 text-2xl font-bold capitalize lg:mb-0 lg:text-6xl">External Struggle</h1>
    </div>
    <div class="flex items-center">
      <p class="w-full text-left text-base font-semibold lg:text-right lg:text-2xl">Our latest updates and what is happening in the organisation</p>
    </div>
  </div>
  <div class="grid grid-cols-1 gap-4 lg:grid-cols-3">
    <div class="relative overflow-hidden rounded-lg bg-gray-200" style="padding-top: 100%">
      <img src="https://placehold.co/400x400" class="absolute top-0 w-full" />
      <div class="absolute left-0 top-0 w-full p-4">
        <div class="mb-2 max-w-max rounded-md border-2 border-black px-2 font-bold lg:mb-4">Tag</div>
        <div class="text-base lg:text-xl">Content can be used to explain the glimpse idea or to catch in seconds viewer eye.</div>
      </div>
    </div>
    <div class="relative overflow-hidden rounded-lg bg-gray-200" style="padding-top: 100%">
      <img src="https://placehold.co/400x400" class="absolute top-0 w-full" />
      <div class="absolute left-0 top-0 w-full p-4">
        <div class="mb-2 max-w-max rounded-md border-2 border-black px-2 font-bold lg:mb-4">Tag</div>
        <div class="text-base lg:text-xl">Content can be used to explain the glimpse idea or to catch in seconds viewer eye.</div>
      </div>
    </div>
    <div class="relative overflow-hidden rounded-lg bg-gray-200" style="padding-top: 100%">
      <img src="https://placehold.co/400x400" class="absolute top-0 w-full" />
      <div class="absolute left-0 top-0 w-full p-4">
        <div class="mb-2 max-w-max rounded-md border-2 border-black px-2 font-bold lg:mb-4">Tag</div>
        <div class="text-base lg:text-xl">Content can be used to explain the glimpse idea or to catch in seconds viewer eye.</div>
      </div>
    </div>
    <div class="relative col-span-1 overflow-hidden rounded-lg bg-gray-200 lg:col-span-3" style="padding-top: 60%">
      <img src="https://placehold.co/800x500" class="absolute top-0 w-full" />
      <div class="absolute left-0 top-0 w-full p-4 lg:p-8">
        <h1 class="mb-2 text-2xl font-bold capitalize lg:mb-4 lg:text-6xl">Headline Description</h1>
        <div class="text-base lg:text-xl">Content can be used to explain the glimpse idea or to catch in seconds viewer eye.</div>
      </div>
    </div>
  </div>
</section>

Problem

External Struggle

Our latest updates and what is happening in the organisation

Tag

Content can be used to explain the glimpse idea or to catch in seconds viewer eye.

Tag

Content can be used to explain the glimpse idea or to catch in seconds viewer eye.

Tag

Content can be used to explain the glimpse idea or to catch in seconds viewer eye.

Headline Description

Content can be used to explain the glimpse idea or to catch in seconds viewer eye.

<section layout="container" space="m-x:auto m-y:large p-x:medium-3x tw-lg:m-y:big-3x tw-lg:p-x:big-3x">
  <div layout="grid grid-cols:1 tw-lg:grid-cols:2" space="m-b:medium tw-lg:m-b:large">
    <div layout="col-span:1 tw-lg:col-span:2">
      <div space="m-b:small max-w:[max-content] p-x:small tw-lg:m-b:medium" visual="rounded:small border-w:regular border:blue-600 font:tw-bold text:blue-600">Problem</div>
    </div>
    <div>
      <h1 space="m-b:small tw-lg:m-b:none" visual="text-size:huge font:tw-bold capitalize tw-lg:text-size:mega">External Struggle</h1>
    </div>
    <div layout="flex items:center">
      <p space="w:[100%]" visual="text:left text-size:base font:tw-semibold tw-lg:text:right tw-lg:text-size:huge">Our latest updates and what is happening in the organisation</p>
    </div>
  </div>
  <div layout="grid grid-cols:1 tw-lg:grid-cols:3" space="g:medium">
    <div layout="relative overflow:hidden" visual="rounded:medium bg:gray-200" style="padding-top: 100%">
      <img src="https://placehold.co/400x400" layout="absolute top:none" space="w:[100%]" />
      <div layout="absolute left:none top:none" space="w:[100%] p:medium">
        <div space="m-b:small max-w:[max-content] p-x:small tw-lg:m-b:medium" visual="rounded:small border-w:regular border:black font:tw-bold">Tag</div>
        <div visual="text-size:base tw-lg:text-size:big">Content can be used to explain the glimpse idea or to catch in seconds viewer eye.</div>
      </div>
    </div>
    <div layout="relative overflow:hidden" visual="rounded:medium bg:gray-200" style="padding-top: 100%">
      <img src="https://placehold.co/400x400" layout="absolute top:none" space="w:[100%]" />
      <div layout="absolute left:none top:none" space="w:[100%] p:medium">
        <div space="m-b:small max-w:[max-content] p-x:small tw-lg:m-b:medium" visual="rounded:small border-w:regular border:black font:tw-bold">Tag</div>
        <div visual="text-size:base tw-lg:text-size:big">Content can be used to explain the glimpse idea or to catch in seconds viewer eye.</div>
      </div>
    </div>
    <div layout="relative overflow:hidden" visual="rounded:medium bg:gray-200" style="padding-top: 100%">
      <img src="https://placehold.co/400x400" layout="absolute top:none" space="w:[100%]" />
      <div layout="absolute left:none top:none" space="w:[100%] p:medium">
        <div space="m-b:small max-w:[max-content] p-x:small tw-lg:m-b:medium" visual="rounded:small border-w:regular border:black font:tw-bold">Tag</div>
        <div visual="text-size:base tw-lg:text-size:big">Content can be used to explain the glimpse idea or to catch in seconds viewer eye.</div>
      </div>
    </div>
    <div layout="relative col-span:1 overflow:hidden tw-lg:col-span:3" visual="rounded:medium bg:gray-200" style="padding-top: 60%">
      <img src="https://placehold.co/800x500" layout="absolute top:none" space="w:[100%]" />
      <div layout="absolute left:none top:none" space="w:[100%] p:medium tw-lg:p:large">
        <h1 space="m-b:small tw-lg:m-b:medium" visual="text-size:huge font:tw-bold capitalize tw-lg:text-size:mega">Headline Description</h1>
        <div visual="text-size:base tw-lg:text-size:big">Content can be used to explain the glimpse idea or to catch in seconds viewer eye.</div>
      </div>
    </div>
  </div>
</section>

<section layout="container" space="m-x:auto m-y:large p-x:medium-3x tw-lg:m-y:big-3x tw-lg:p-x:big-3x">
  <div layout="grid grid-cols:1 tw-lg:grid-cols:2" space="m-b:medium tw-lg:m-b:large">
    <div layout="col-span:1 tw-lg:col-span:2">
      <div space="m-b:small max-w:[max-content] p-x:small tw-lg:m-b:medium" visual="rounded:small border-w:regular border:blue-600 font:tw-bold text:blue-600">Problem</div>
    </div>
    <div>
      <h1 space="m-b:small tw-lg:m-b:none" visual="text-size:huge font:tw-bold capitalize tw-lg:text-size:mega">External Struggle</h1>
    </div>
    <div layout="flex items:center">
      <p space="w:[100%]" visual="text:left text-size:base font:tw-semibold tw-lg:text:right tw-lg:text-size:huge">Our latest updates and what is happening in the organisation</p>
    </div>
  </div>
  <div layout="grid grid-cols:1 tw-lg:grid-cols:3" space="g:medium">
    <div layout="relative overflow:hidden" visual="rounded:medium bg:gray-200" style="padding-top: 100%">
      <img src="https://placehold.co/400x400" layout="absolute top:none" space="w:[100%]" />
      <div layout="absolute left:none top:none" space="w:[100%] p:medium">
        <div space="m-b:small max-w:[max-content] p-x:small tw-lg:m-b:medium" visual="rounded:small border-w:regular border:black font:tw-bold">Tag</div>
        <div visual="text-size:base tw-lg:text-size:big">Content can be used to explain the glimpse idea or to catch in seconds viewer eye.</div>
      </div>
    </div>
    <div layout="relative overflow:hidden" visual="rounded:medium bg:gray-200" style="padding-top: 100%">
      <img src="https://placehold.co/400x400" layout="absolute top:none" space="w:[100%]" />
      <div layout="absolute left:none top:none" space="w:[100%] p:medium">
        <div space="m-b:small max-w:[max-content] p-x:small tw-lg:m-b:medium" visual="rounded:small border-w:regular border:black font:tw-bold">Tag</div>
        <div visual="text-size:base tw-lg:text-size:big">Content can be used to explain the glimpse idea or to catch in seconds viewer eye.</div>
      </div>
    </div>
    <div layout="relative overflow:hidden" visual="rounded:medium bg:gray-200" style="padding-top: 100%">
      <img src="https://placehold.co/400x400" layout="absolute top:none" space="w:[100%]" />
      <div layout="absolute left:none top:none" space="w:[100%] p:medium">
        <div space="m-b:small max-w:[max-content] p-x:small tw-lg:m-b:medium" visual="rounded:small border-w:regular border:black font:tw-bold">Tag</div>
        <div visual="text-size:base tw-lg:text-size:big">Content can be used to explain the glimpse idea or to catch in seconds viewer eye.</div>
      </div>
    </div>
    <div layout="relative col-span:1 overflow:hidden tw-lg:col-span:3" visual="rounded:medium bg:gray-200" style="padding-top: 60%">
      <img src="https://placehold.co/800x500" layout="absolute top:none" space="w:[100%]" />
      <div layout="absolute left:none top:none" space="w:[100%] p:medium tw-lg:p:large">
        <h1 space="m-b:small tw-lg:m-b:medium" visual="text-size:huge font:tw-bold capitalize tw-lg:text-size:mega">Headline Description</h1>
        <div visual="text-size:base tw-lg:text-size:big">Content can be used to explain the glimpse idea or to catch in seconds viewer eye.</div>
      </div>
    </div>
  </div>
</section>