services tabs split preview agency numbered interactive services tabbed split-panel preview numbered agency tabbed services with preview panel service selector with image
Services Tabbed
Fetch pattern JSON:
curl https://webspire.de/patterns/services/tabbed.json tabbed.html
<section class="ws-services-tabbed bg-[var(--ws-color-surface)] py-16">
<div class="mx-auto max-w-6xl px-6">
<h2 class="mb-10 text-3xl font-bold text-slate-900">Our Services</h2>
<div class="grid gap-8 lg:grid-cols-2">
<!-- Tab list (left) -->
<div class="space-y-2" role="tablist">
<button role="tab" aria-selected="true" class="flex w-full items-center gap-4 rounded-xl bg-[var(--ws-color-surface-alt)] p-5 text-left text-white transition">
<span class="text-2xl font-bold text-white/30">01</span>
<div>
<h3 class="text-base font-semibold">UI/UX Design</h3>
<p class="mt-1 text-sm text-white/70">Research-driven design that puts users first and converts visitors into customers.</p>
</div>
</button>
<button role="tab" aria-selected="false" class="flex w-full items-center gap-4 rounded-xl border border-slate-200 bg-[var(--ws-color-surface)] p-5 text-left transition hover:border-slate-300 dark:hover:border-slate-600">
<span class="text-2xl font-bold text-slate-200">02</span>
<div>
<h3 class="text-base font-semibold text-slate-900">Web Development</h3>
<p class="mt-1 text-sm text-slate-500">Modern, performant web applications built with the latest technologies.</p>
</div>
</button>
<button role="tab" aria-selected="false" class="flex w-full items-center gap-4 rounded-xl border border-slate-200 bg-[var(--ws-color-surface)] p-5 text-left transition hover:border-slate-300 dark:hover:border-slate-600">
<span class="text-2xl font-bold text-slate-200">03</span>
<div>
<h3 class="text-base font-semibold text-slate-900">Brand Strategy</h3>
<p class="mt-1 text-sm text-slate-500">Crafting distinctive brand identities that resonate with your target audience.</p>
</div>
</button>
<button role="tab" aria-selected="false" class="flex w-full items-center gap-4 rounded-xl border border-slate-200 bg-[var(--ws-color-surface)] p-5 text-left transition hover:border-slate-300 dark:hover:border-slate-600">
<span class="text-2xl font-bold text-slate-200">04</span>
<div>
<h3 class="text-base font-semibold text-slate-900">Digital Marketing</h3>
<p class="mt-1 text-sm text-slate-500">Data-driven campaigns that drive growth and maximize ROI.</p>
</div>
</button>
</div>
<!-- Preview panel (right) -->
<div role="tabpanel" class="flex flex-col justify-center">
<div class="aspect-[4/3] rounded-2xl bg-gradient-to-br from-blue-100 to-indigo-200 dark:from-blue-900/30 dark:to-indigo-900/30"></div>
<div class="mt-6">
<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-blue-100">
<svg class="h-6 w-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01"/></svg>
</div>
<h3 class="mt-3 text-xl font-bold text-slate-900">UI/UX Design</h3>
<p class="mt-2 text-sm text-slate-600">We create intuitive, beautiful interfaces backed by user research and testing. From wireframes to high-fidelity prototypes, every pixel serves a purpose.</p>
<a href="#" class="mt-4 inline-flex items-center gap-1 text-sm font-medium text-blue-600 hover:gap-2 transition-all">Learn more <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg></a>
</div>
</div>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Experimental Draft
servicestabssplitpreviewagencynumberedinteractive
Slots
| Name | Required | Description |
|---|---|---|
| tabs | Yes | Numbered service tab buttons with title and description. |
| panel | Yes | Preview panel with image, icon, description, and link. |