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
#Feature Image Toggle
featureInteractively displays features where selecting a feature description updates a corresponding image showcase.
FEATURES
Discover Our Platform
<section
class="container mx-auto mb-16 px-6 lg:px-16"
x-data="{ activeFeature: 1 }"
>
<div class="grid gap-8 lg:grid-cols-2">
<div class="order-2 lg:order-1">
<div
class="relative aspect-square overflow-hidden rounded-2xl bg-neutral-100 lg:aspect-auto"
>
<img
x-show="activeFeature === 1"
src="https://placehold.co/600x600"
class="h-full w-full object-cover"
x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="opacity-0 transform translate-x-4"
x-transition:enter-end="opacity-100 transform translate-x-0"
/>
<img
x-show="activeFeature === 2"
src="https://placehold.co/600x600"
class="h-full w-full object-cover"
x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="opacity-0 transform translate-x-4"
x-transition:enter-end="opacity-100 transform translate-x-0"
/>
<img
x-show="activeFeature === 3"
src="https://placehold.co/600x600"
class="h-full w-full object-cover"
x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="opacity-0 transform translate-x-4"
x-transition:enter-end="opacity-100 transform translate-x-0"
/>
</div>
</div>
<div class="order-1 flex flex-col justify-center lg:order-2">
<div
class="mb-2 max-w-max rounded-lg bg-blue-100 px-3 py-1 text-blue-600"
>
<p class="text-sm font-bold">FEATURES</p>
</div>
<h1 class="mb-8 text-4xl font-bold lg:text-6xl">
Discover Our Platform
</h1>
<div class="space-y-6">
<button
@click="activeFeature = 1"
class="w-full rounded-xl p-4 text-left transition-colors"
:class="{ 'bg-blue-600 text-white': activeFeature === 1, 'bg-neutral-100': activeFeature !== 1 }"
>
<h3 class="text-xl font-bold">Intuitive Interface</h3>
<p class="mt-2">
User-friendly design that makes navigation a breeze
</p>
</button>
<button
@click="activeFeature = 2"
class="w-full rounded-xl p-4 text-left transition-colors"
:class="{ 'bg-blue-600 text-white': activeFeature === 2, 'bg-neutral-100': activeFeature !== 2 }"
>
<h3 class="text-xl font-bold">Real-time Collaboration</h3>
<p class="mt-2">Work together seamlessly with your team</p>
</button>
<button
@click="activeFeature = 3"
class="w-full rounded-xl p-4 text-left transition-colors"
:class="{ 'bg-blue-600 text-white': activeFeature === 3, 'bg-neutral-100': activeFeature !== 3 }"
>
<h3 class="text-xl font-bold">Advanced Analytics</h3>
<p class="mt-2">Get insights that drive better decisions</p>
</button>
</div>
</div>
</div>
</section>FEATURES
Discover Our Platform
<section
layout="container" space="m-x:auto m-b:big-3x p-x:medium-3x tw-lg:p-x:big-3x"
x-data="{ activeFeature: 1 }"
>
<div layout="grid tw-lg:grid-cols:2" space="g:large">
<div layout="order:2 tw-lg:order:1">
<div
layout="relative overflow:hidden" visual="rounded:big bg:neutral-100" class="aspect-square lg:aspect-auto"
>
<img
x-show="activeFeature === 1"
src="https://placehold.co/600x600"
layout="object:cover" space="h:[100%] w:[100%]"
x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="opacity-0 transform translate-x-4"
x-transition:enter-end="opacity-100 transform translate-x-0"
/>
<img
x-show="activeFeature === 2"
src="https://placehold.co/600x600"
layout="object:cover" space="h:[100%] w:[100%]"
x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="opacity-0 transform translate-x-4"
x-transition:enter-end="opacity-100 transform translate-x-0"
/>
<img
x-show="activeFeature === 3"
src="https://placehold.co/600x600"
layout="object:cover" space="h:[100%] w:[100%]"
x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="opacity-0 transform translate-x-4"
x-transition:enter-end="opacity-100 transform translate-x-0"
/>
</div>
</div>
<div layout="order:1 flex col justify:center tw-lg:order:2">
<div
space="m-b:small max-w:[max-content] p-x:small-3x p-y:tiny" visual="rounded:medium bg:blue-100 text:blue-600"
>
<p visual="text-size:small font:tw-bold">FEATURES</p>
</div>
<h1 space="m-b:large" visual="text-size:giant font:tw-bold tw-lg:text-size:mega">
Discover Our Platform
</h1>
<div class="space-y-6">
<button
@click="activeFeature = 1"
space="w:[100%] p:medium" visual="rounded:medium text:left transition:colors"
:class="{ 'bg-blue-600 text-white': activeFeature === 1, 'bg-neutral-100': activeFeature !== 1 }"
>
<h3 visual="text-size:big font:tw-bold">Intuitive Interface</h3>
<p space="m-t:small">
User-friendly design that makes navigation a breeze
</p>
</button>
<button
@click="activeFeature = 2"
space="w:[100%] p:medium" visual="rounded:medium text:left transition:colors"
:class="{ 'bg-blue-600 text-white': activeFeature === 2, 'bg-neutral-100': activeFeature !== 2 }"
>
<h3 visual="text-size:big font:tw-bold">Real-time Collaboration</h3>
<p space="m-t:small">Work together seamlessly with your team</p>
</button>
<button
@click="activeFeature = 3"
space="w:[100%] p:medium" visual="rounded:medium text:left transition:colors"
:class="{ 'bg-blue-600 text-white': activeFeature === 3, 'bg-neutral-100': activeFeature !== 3 }"
>
<h3 visual="text-size:big font:tw-bold">Advanced Analytics</h3>
<p space="m-t:small">Get insights that drive better decisions</p>
</button>
</div>
</div>
</div>
</section>