Link-in-bio profile layout
A single-column mobile-first link page with avatar, bio, social icon row and a stack of large tappable link buttons.
Tailwind CSSLayoutslink-in-bioprofilemobilebuttons
Live preview
Code
<main class="mx-auto flex min-h-screen max-w-md flex-col items-center bg-gradient-to-b from-indigo-50 to-white px-5 py-10">
<img src="/avatars/acme.jpg" alt="Acme Studio logo" width="96" height="96"
class="size-24 rounded-full object-cover ring-4 ring-white shadow-md">
<h1 class="mt-4 text-xl font-bold text-slate-900">Acme Studio</h1>
<p class="mt-1 text-center text-sm text-slate-600">Design tips, tools and weekly drops. New post every Friday.</p>
<!-- Social icons row -->
<ul class="mt-4 flex gap-3" aria-label="Social profiles">
<li><a href="https://example.com/x" aria-label="Acme on X" class="grid size-9 place-items-center rounded-full bg-slate-900 text-xs font-bold text-white hover:bg-slate-700">X</a></li>
<li><a href="https://example.com/ig" aria-label="Acme on Instagram" class="grid size-9 place-items-center rounded-full bg-slate-900 text-xs font-bold text-white hover:bg-slate-700">IG</a></li>
<li><a href="https://example.com/yt" aria-label="Acme on YouTube" class="grid size-9 place-items-center rounded-full bg-slate-900 text-xs font-bold text-white hover:bg-slate-700">YT</a></li>
</ul>
<!-- Link stack: full-width tap targets, first one highlighted -->
<nav class="mt-8 w-full space-y-3" aria-label="Links">
<a href="https://example.com/launch"
class="block rounded-xl bg-indigo-600 px-5 py-4 text-center font-semibold text-white shadow-sm transition hover:-translate-y-0.5 hover:bg-indigo-500">
Get the new template pack
</a>
<a href="https://example.com/blog"
class="block rounded-xl border border-slate-200 bg-white px-5 py-4 text-center font-medium text-slate-800 shadow-sm transition hover:-translate-y-0.5 hover:border-indigo-300">
Read the latest post
</a>
<a href="https://example.com/newsletter"
class="block rounded-xl border border-slate-200 bg-white px-5 py-4 text-center font-medium text-slate-800 shadow-sm transition hover:-translate-y-0.5 hover:border-indigo-300">
Join the newsletter
</a>
<a href="https://example.com/contact"
class="block rounded-xl border border-slate-200 bg-white px-5 py-4 text-center font-medium text-slate-800 shadow-sm transition hover:-translate-y-0.5 hover:border-indigo-300">
Work with us
</a>
</nav>
<p class="mt-auto pt-10 text-xs text-slate-400">Made with Acme Pages</p>
</main>
How it works
What it solves
A link-in-bio page is opened almost exclusively from a phone, from inside an app browser. It needs one centered column, big tap targets and no clutter, so visitors can reach the right destination in a single thumb press.
How it works
main is a flex column limited to max-w-md and at least the full screen height, so the footer can be pushed to the bottom with mt-auto. The avatar has explicit width and height attributes to reserve space and avoid layout shift, plus a ring that makes it pop from the gradient background. Social icons live in a labelled list; each link has an aria-label because the visible text is just initials.
The links are block level anchors with generous vertical padding, giving a tap area well above the 44 pixel guideline. The first link uses a filled style to signal the primary action, and a small hover lift gives pointer users feedback without needing any script.
Adapting it
- Loop your stored links into the nav and mark the featured one in the data.
- Swap the initials for inline SVG icons.
- Change the gradient colours to match the owner's theme setting.
Pitfalls
- Keep link labels short; long text wraps and breaks the rhythm.
- Add
rel="noopener"if links open in a new tab. - Serve a correctly sized avatar, around 192 pixels, to keep first paint quick.
How to use it
- Add the markup as the public view for a profile.
- Output the avatar, name, bio and social links from your user record.
- Loop the owner's links into the nav, giving the first one the filled classes.
- Load Tailwind CSS 4 on the page and keep the viewport meta tag set.
Licence: DEV3 Snippet Licence. Free to use, change and ship in personal and commercial projects. Attribution is appreciated, not required. Please do not redistribute snippets as a collection.