Features / Bento

Alternating showcase

Text and media rows that flip sides

Live preview

The prompt

Build an alternating feature showcase with Tailwind CSS: two rows where the text and the media panel swap sides. Each row is a two-column grid on lg with a text block (eyebrow, heading, paragraph, bullet list, link) and a rounded media placeholder. Use order utilities to flip the second row. Stack vertically on mobile with the media on top.

Paste it into Claude, Cursor, v0 or any AI coding tool. Prefer the finished markup? .

Build an alternating feature showcase with Tailwind CSS: two rows where the text and the media panel swap sides. Each row is a two-column grid on lg with a text block (eyebrow, heading, paragraph, bullet list, link) and a rounded media placeholder. Use order utilities to flip the second row. Stack vertically on mobile with the media on top.

<section class="mx-auto max-w-6xl space-y-20 px-6 py-16">  <div class="grid items-center gap-10 lg:grid-cols-2"> <div> <p class="text-sm font-medium uppercase tracking-wide text-neutral-400">Automation</p> <h3 class="mt-2 text-2xl font-semibold text-neutral-900">Put the busywork on autopilot</h3> <p class="mt-3 text-neutral-500">Trigger actions from any event and let rules do the rest.</p> <ul class="mt-4 space-y-2 text-sm text-neutral-600"> <li class="flex gap-2"><span class="text-neutral-900"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m5 12.5 4.25 4.25L19 7"/></svg></span> Visual rule builder</li> <li class="flex gap-2"><span class="text-neutral-900"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m5 12.5 4.25 4.25L19 7"/></svg></span> 200+ triggers</li> </ul> <a href="#" class="mt-5 inline-block text-sm font-medium text-neutral-900 hover:underline">Learn more →</a> </div> <div class="aspect-video rounded-2xl bg-neutral-100"></div> </div>  <div class="grid items-center gap-10 lg:grid-cols-2"> <div class="aspect-video rounded-2xl bg-neutral-100 lg:order-1"></div> <div class="lg:order-2"> <p class="text-sm font-medium uppercase tracking-wide text-neutral-400">Insights</p> <h3 class="mt-2 text-2xl font-semibold text-neutral-900">See what actually moves the needle</h3> <p class="mt-3 text-neutral-500">Dashboards that update in real time, no setup required.</p> <a href="#" class="mt-5 inline-block text-sm font-medium text-neutral-900 hover:underline">Learn more →</a> </div> </div> </section>

The prompt

More features / bento prompts