careers jobs hiring positions team recruitment company careers jobs hiring positions openings recruitment apply job listings careers page open positions section
Careers Base
Fetch pattern JSON:
curl https://webspire.de/patterns/careers/base.json base.html
<section class="ws-careers bg-[var(--ws-color-surface)] py-16">
<div class="mx-auto max-w-3xl px-6">
<div class="text-center">
<p class="text-sm font-semibold uppercase tracking-wider text-blue-600">Careers</p>
<h2 class="mt-2 text-3xl font-bold text-slate-900">Join our team</h2>
<p class="mt-3 text-lg text-slate-500">We're always looking for talented people to help us build the future.</p>
</div>
<div class="mt-10 space-y-3">
<!-- Job listing -->
<a href="#" class="group flex items-center justify-between rounded-xl border border-transparent bg-slate-50 px-5 py-4 transition hover:border-slate-200 hover:bg-white hover:shadow-sm dark:hover:border-slate-700 dark:hover:bg-slate-800">
<div class="flex flex-wrap items-center gap-3">
<h3 class="text-base font-semibold text-slate-900">Senior Frontend Engineer</h3>
<span class="rounded-full bg-blue-100 px-2.5 py-0.5 text-xs font-medium text-blue-700">Full-Time</span>
</div>
<div class="flex items-center gap-4">
<div class="hidden items-center gap-4 text-sm text-slate-500 sm:flex">
<span>Engineering</span>
<span>·</span>
<span>Remote</span>
</div>
<svg class="h-5 w-5 text-slate-300 transition-transform group-hover:translate-x-1" 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>
</div>
</a>
<a href="#" class="group flex items-center justify-between rounded-xl border border-transparent bg-slate-50 px-5 py-4 transition hover:border-slate-200 hover:bg-white hover:shadow-sm dark:hover:border-slate-700 dark:hover:bg-slate-800">
<div class="flex flex-wrap items-center gap-3">
<h3 class="text-base font-semibold text-slate-900">Product Designer</h3>
<span class="rounded-full bg-emerald-100 px-2.5 py-0.5 text-xs font-medium text-emerald-700">Full-Time</span>
</div>
<div class="flex items-center gap-4">
<div class="hidden items-center gap-4 text-sm text-slate-500 sm:flex">
<span>Design</span>
<span>·</span>
<span>Berlin</span>
</div>
<svg class="h-5 w-5 text-slate-300 transition-transform group-hover:translate-x-1" 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>
</div>
</a>
<a href="#" class="group flex items-center justify-between rounded-xl border border-transparent bg-slate-50 px-5 py-4 transition hover:border-slate-200 hover:bg-white hover:shadow-sm dark:hover:border-slate-700 dark:hover:bg-slate-800">
<div class="flex flex-wrap items-center gap-3">
<h3 class="text-base font-semibold text-slate-900">Developer Advocate</h3>
<span class="rounded-full bg-amber-100 px-2.5 py-0.5 text-xs font-medium text-amber-700">Part-Time</span>
</div>
<div class="flex items-center gap-4">
<div class="hidden items-center gap-4 text-sm text-slate-500 sm:flex">
<span>Marketing</span>
<span>·</span>
<span>Remote</span>
</div>
<svg class="h-5 w-5 text-slate-300 transition-transform group-hover:translate-x-1" 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>
</div>
</a>
<a href="#" class="group flex items-center justify-between rounded-xl border border-transparent bg-slate-50 px-5 py-4 transition hover:border-slate-200 hover:bg-white hover:shadow-sm dark:hover:border-slate-700 dark:hover:bg-slate-800">
<div class="flex flex-wrap items-center gap-3">
<h3 class="text-base font-semibold text-slate-900">Backend Engineer</h3>
<span class="rounded-full bg-blue-100 px-2.5 py-0.5 text-xs font-medium text-blue-700">Full-Time</span>
</div>
<div class="flex items-center gap-4">
<div class="hidden items-center gap-4 text-sm text-slate-500 sm:flex">
<span>Engineering</span>
<span>·</span>
<span>Berlin</span>
</div>
<svg class="h-5 w-5 text-slate-300 transition-transform group-hover:translate-x-1" 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>
</div>
</a>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Experimental Draft
careersjobshiringpositionsteamrecruitmentcompany
Slots
| Name | Required | Description |
|---|---|---|
| heading | Yes | Section title and subtitle. |
| listings | Yes | Job listing rows with title, badge, department, location, arrow. |