<div
class="mx-auto w-full max-w-md rounded-3xl bg-white p-6 shadow-sm ring-8 shadow-slate-500/10 ring-slate-900/5"
>
<div class="flex items-start justify-between gap-4">
<div>
<h3 class="text-lg font-bold text-zinc-900">Connected accounts</h3>
<p class="mt-0.5 text-xs text-zinc-500">
Sync your data and sign in faster.
</p>
</div>
<span
class="inline-flex items-center gap-1.5 rounded-full bg-zinc-100 px-2.5 py-1 text-xs font-semibold text-zinc-700 ring-1 ring-zinc-200/70 ring-inset"
>
<span class="size-1.5 rounded-full bg-emerald-500"></span>
3 active
</span>
</div>
<ul class="mt-6 flex flex-col gap-2">
<li
class="flex items-center gap-3 rounded-2xl border border-zinc-100 bg-white p-3 hover:border-zinc-200"
>
<div
class="flex size-10 flex-none items-center justify-center rounded-xl bg-zinc-900 text-white"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
aria-hidden="true"
class="inline-block size-5"
>
<path
fill-rule="evenodd"
d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0 1 12 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.02 10.02 0 0 0 22 12.017C22 6.484 17.522 2 12 2Z"
clip-rule="evenodd"
/>
</svg>
</div>
<div class="min-w-0 grow">
<div class="flex items-center gap-2">
<p class="truncate text-sm font-semibold text-zinc-900">GitHub</p>
<span
class="inline-flex items-center gap-1 rounded-md bg-emerald-50 px-1.5 py-0.5 text-[10px] font-semibold text-emerald-700 ring-1 ring-emerald-200/70 ring-inset"
>
<span class="size-1 rounded-full bg-emerald-500"></span>
Connected
</span>
</div>
<p class="mt-0.5 truncate text-xs text-zinc-500">
@pixelcave · 14 repos synced
</p>
</div>
<button
type="button"
aria-label="Manage GitHub"
class="flex flex-none items-center justify-center rounded-lg p-1.5 text-zinc-400 hover:bg-zinc-50 hover:text-zinc-700"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
fill="currentColor"
class="hi-micro hi-ellipsis-horizontal inline-block size-4"
>
<path
d="M2 8a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0ZM6.5 8a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0ZM12.5 6.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Z"
/>
</svg>
</button>
</li>
<li
class="flex items-center gap-3 rounded-2xl border border-zinc-100 bg-white p-3 hover:border-zinc-200"
>
<div
class="flex size-10 flex-none items-center justify-center rounded-xl bg-white ring-1 ring-zinc-200/70 ring-inset"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
aria-hidden="true"
class="inline-block size-5"
>
<path
fill="#4285F4"
d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.76h3.56c2.08-1.92 3.28-4.74 3.28-8.09Z"
/>
<path
fill="#34A853"
d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.56-2.76c-.99.66-2.25 1.05-3.72 1.05-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84A11 11 0 0 0 12 23Z"
/>
<path
fill="#FBBC05"
d="M5.84 14.1A6.6 6.6 0 0 1 5.49 12c0-.73.13-1.44.35-2.1V7.06H2.18A11 11 0 0 0 1 12c0 1.78.42 3.46 1.18 4.94l3.66-2.84Z"
/>
<path
fill="#EA4335"
d="M12 5.38c1.62 0 3.07.56 4.21 1.65l3.16-3.16C17.45 2.09 14.97 1 12 1A11 11 0 0 0 2.18 7.06l3.66 2.84C6.71 7.31 9.14 5.38 12 5.38Z"
/>
</svg>
</div>
<div class="min-w-0 grow">
<div class="flex items-center gap-2">
<p class="truncate text-sm font-semibold text-zinc-900">Google</p>
<span
class="inline-flex items-center gap-1 rounded-md bg-emerald-50 px-1.5 py-0.5 text-[10px] font-semibold text-emerald-700 ring-1 ring-emerald-200/70 ring-inset"
>
<span class="size-1 rounded-full bg-emerald-500"></span>
Connected
</span>
</div>
<p class="mt-0.5 truncate text-xs text-zinc-500">
john@example.com · Calendar, Drive
</p>
</div>
<button
type="button"
aria-label="Manage Google"
class="flex flex-none items-center justify-center rounded-lg p-1.5 text-zinc-400 hover:bg-zinc-50 hover:text-zinc-700"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
fill="currentColor"
class="hi-micro hi-ellipsis-horizontal inline-block size-4"
>
<path
d="M2 8a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0ZM6.5 8a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0ZM12.5 6.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Z"
/>
</svg>
</button>
</li>
<li
class="flex items-center gap-3 rounded-2xl border border-zinc-100 bg-white p-3 hover:border-zinc-200"
>
<div
class="flex size-10 flex-none items-center justify-center rounded-xl bg-white ring-1 ring-zinc-200/70 ring-inset"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
aria-hidden="true"
class="inline-block size-5"
>
<path
fill="#E01E5A"
d="M5.04 14.94a2.04 2.04 0 1 1-2.04-2.04h2.04v2.04Zm1.02 0a2.04 2.04 0 0 1 4.08 0v5.1a2.04 2.04 0 0 1-4.08 0v-5.1Z"
/>
<path
fill="#36C5F0"
d="M9.06 5.04A2.04 2.04 0 1 1 11.1 3v2.04H9.06Zm0 1.02a2.04 2.04 0 0 1 0 4.08H3.96a2.04 2.04 0 0 1 0-4.08h5.1Z"
/>
<path
fill="#2EB67D"
d="M18.96 9.06A2.04 2.04 0 1 1 21 11.1h-2.04V9.06Zm-1.02 0a2.04 2.04 0 0 1-4.08 0V3.96a2.04 2.04 0 0 1 4.08 0v5.1Z"
/>
<path
fill="#ECB22E"
d="M14.94 18.96a2.04 2.04 0 1 1-2.04 2.04v-2.04h2.04Zm0-1.02a2.04 2.04 0 0 1 0-4.08h5.1a2.04 2.04 0 0 1 0 4.08h-5.1Z"
/>
</svg>
</div>
<div class="min-w-0 grow">
<div class="flex items-center gap-2">
<p class="truncate text-sm font-semibold text-zinc-900">Slack</p>
<span
class="inline-flex items-center gap-1 rounded-md bg-amber-50 px-1.5 py-0.5 text-[10px] font-semibold text-amber-700 ring-1 ring-amber-200/70 ring-inset"
>
<span class="size-1 rounded-full bg-amber-500"></span>
Reauthorize
</span>
</div>
<p class="mt-0.5 truncate text-xs text-zinc-500">
Token expired 2 days ago
</p>
</div>
<button
type="button"
class="flex flex-none items-center gap-1.5 rounded-lg bg-zinc-900 px-2.5 py-1.5 text-xs font-semibold text-white hover:bg-zinc-700 active:bg-zinc-800"
>
<span>Reconnect</span>
</button>
</li>
<li
class="flex items-center gap-3 rounded-2xl border border-zinc-100 bg-white p-3 hover:border-zinc-200"
>
<div
class="flex size-10 flex-none items-center justify-center rounded-xl bg-zinc-900"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
aria-hidden="true"
class="inline-block size-5"
>
<path
fill="#A259FF"
d="M8.5 22a3.5 3.5 0 0 0 3.5-3.5V15H8.5a3.5 3.5 0 1 0 0 7Z"
/>
<path
fill="#F24E1E"
d="M5 11.5A3.5 3.5 0 0 1 8.5 8H12v7H8.5A3.5 3.5 0 0 1 5 11.5Z"
/>
<path
fill="#FF7262"
d="M5 4.5A3.5 3.5 0 0 1 8.5 1H12v7H8.5A3.5 3.5 0 0 1 5 4.5Z"
/>
<path fill="#1ABCFE" d="M12 1h3.5a3.5 3.5 0 1 1 0 7H12V1Z" />
<path
fill="#0ACF83"
d="M19 11.5A3.5 3.5 0 1 1 12 11.5 3.5 3.5 0 0 1 19 11.5Z"
/>
</svg>
</div>
<div class="min-w-0 grow">
<p class="truncate text-sm font-semibold text-zinc-900">Figma</p>
<p class="mt-0.5 truncate text-xs text-zinc-500">
Sync designs into your project library.
</p>
</div>
<button
type="button"
class="flex flex-none items-center gap-1.5 rounded-lg bg-white px-2 py-1.5 text-xs font-semibold text-zinc-700 ring-1 ring-zinc-200 ring-inset hover:bg-zinc-50 active:bg-zinc-100"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
fill="currentColor"
class="hi-micro hi-plus inline-block size-3.5"
>
<path
d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z"
/>
</svg>
<span>Connect</span>
</button>
</li>
<li
class="flex items-center gap-3 rounded-2xl border border-zinc-100 bg-white p-3 hover:border-zinc-200"
>
<div
class="flex size-10 flex-none items-center justify-center rounded-xl bg-zinc-900 text-white"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
aria-hidden="true"
class="inline-block size-5"
>
<path
d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231 5.45-6.231Zm-1.161 17.52h1.833L7.084 4.126H5.117l11.966 15.644Z"
/>
</svg>
</div>
<div class="min-w-0 grow">
<p class="truncate text-sm font-semibold text-zinc-900">X</p>
<p class="mt-0.5 truncate text-xs text-zinc-500">
Cross-post updates to your timeline.
</p>
</div>
<button
type="button"
class="flex flex-none items-center gap-1.5 rounded-lg bg-white px-2 py-1.5 text-xs font-semibold text-zinc-700 ring-1 ring-zinc-200 ring-inset hover:bg-zinc-50 active:bg-zinc-100"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
fill="currentColor"
class="hi-micro hi-plus inline-block size-3.5"
>
<path
d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z"
/>
</svg>
<span>Connect</span>
</button>
</li>
</ul>
<div class="mt-6 border-t border-dashed border-zinc-200 pt-4 text-center">
<a
href="javascript:void(0)"
class="inline-flex items-center gap-1 text-xs font-semibold text-zinc-700 hover:text-indigo-600"
>
<span>Browse all integrations</span>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
fill="currentColor"
class="hi-micro hi-arrow-right inline-block size-3.5"
>
<path
fill-rule="evenodd"
d="M2 8a.75.75 0 0 1 .75-.75h8.69L8.22 4.03a.75.75 0 0 1 1.06-1.06l4.5 4.5a.75.75 0 0 1 0 1.06l-4.5 4.5a.75.75 0 0 1-1.06-1.06l3.22-3.22H2.75A.75.75 0 0 1 2 8Z"
clip-rule="evenodd"
/>
</svg>
</a>
</div>
</div>