Загрузка...
Карточка "Связаться с нами" с формой поддержки. Минимум дизайна, максимум функционала: контакты, форма обратной связи. Идеально для лендингов и SaaS.
<html lang="en"><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Contact Us • Minimal Card</title>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
<script src="https://unpkg.com/lucide@latest"></script>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="antialiased bg-neutral-50 text-neutral-900 font-sans" style="font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, Apple Color Emoji, Segoe UI Emoji">
<main class="min-h-screen flex items-center justify-center p-4">
<section class="w-full max-w-xl">
<!-- Card -->
<div class="mx-auto rounded-2xl border border-neutral-200 bg-white shadow-sm overflow-hidden">
<!-- Header -->
<div class="p-6 sm:p-8">
<div class="flex items-center gap-3">
<div class="inline-flex h-8 w-8 items-center justify-center rounded-md border border-neutral-200 bg-white text-neutral-900 tracking-tight font-semibold">C</div>
<div class="h-5 w-px bg-neutral-200"></div>
<p class="text-sm text-neutral-500">Support</p>
</div>
<h1 class="mt-5 text-[28px]/[1.15] tracking-tight font-semibold text-neutral-900">
Contact us
</h1>
<p class="mt-2 text-[15px] text-neutral-600">
We usually reply within one business day. Tell us a bit about what you need.
</p>
<div class="mt-6 h-px bg-neutral-200"></div>
<!-- Contact quick links -->
<div class="mt-6 grid grid-cols-1 sm:grid-cols-2 gap-3">
<a href="mailto:team@example.com" class="group inline-flex items-center gap-2 rounded-lg border border-neutral-200 bg-white px-3.5 py-2.5 text-[15px] text-neutral-800 hover:bg-neutral-50 hover:border-neutral-300 hover:outline hover:outline-1 hover:outline-neutral-900/10 transition-colors">
<i data-lucide="mail" class="size-4 text-neutral-700" aria-hidden="true"></i>
team@example.com
</a>
<a href="tel:+12223334444" class="group inline-flex items-center gap-2 rounded-lg border border-neutral-200 bg-white px-3.5 py-2.5 text-[15px] text-neutral-800 hover:bg-neutral-50 hover:border-neutral-300 hover:outline hover:outline-1 hover:outline-neutral-900/10 transition-colors">
<i data-lucide="phone" class="size-4 text-neutral-700" aria-hidden="true"></i>
+1 (222) 333-4444
</a>
</div>
</div>
<div class="h-px bg-neutral-200"></div>
<!-- Form -->
<form action="#" method="post" class="p-6 sm:p-8">
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div class="flex flex-col">
<label for="name" class="mb-1.5 text-sm font-medium text-neutral-700">Full name</label>
<input id="name" name="name" type="text" autocomplete="name" required="" class="w-full rounded-lg border border-neutral-200 bg-white/80 px-3.5 py-2.5 text-[15px] text-neutral-900 placeholder-neutral-400 shadow-xs focus:ring-4 focus:ring-neutral-900/5 focus:border-neutral-300 outline-none" placeholder="Jane Doe">
</div>
<div class="flex flex-col">
<label for="email" class="mb-1.5 text-sm font-medium text-neutral-700">Email</label>
<input id="email" name="email" type="email" autocomplete="email" required="" class="w-full rounded-lg border border-neutral-200 bg-white/80 px-3.5 py-2.5 text-[15px] text-neutral-900 placeholder-neutral-400 shadow-xs focus:ring-4 focus:ring-neutral-900/5 focus:border-neutral-300 outline-none" placeholder="jane@company.com">
</div>
<div class="sm:col-span-2 flex flex-col">
<label for="company" class="mb-1.5 text-sm font-medium text-neutral-700">Company (optional)</label>
<input id="company" name="company" type="text" autocomplete="organization" class="w-full rounded-lg border border-neutral-200 bg-white/80 px-3.5 py-2.5 text-[15px] text-neutral-900 placeholder-neutral-400 shadow-xs focus:ring-4 focus:ring-neutral-900/5 focus:border-neutral-300 outline-none" placeholder="Acme Inc.">
</div>
<div class="sm:col-span-2 flex flex-col">
<label for="message" class="mb-1.5 text-sm font-medium text-neutral-700">How can we help?</label>
<div class="relative">
<textarea id="message" name="message" rows="5" required="" class="w-full rounded-lg border border-neutral-200 bg-white/80 px-3.5 py-2.5 pr-12 text-[15px] text-neutral-900 placeholder-neutral-400 shadow-xs focus:ring-4 focus:ring-neutral-900/5 focus:border-neutral-300 outline-none resize-y" placeholder="Share a brief description of your request..."></textarea>
<div class="pointer-events-none absolute bottom-2 right-2 inline-flex h-8 w-8 items-center justify-center rounded-md border border-neutral-200 bg-white/70 text-neutral-700">
<i data-lucide="message-square-text" class="size-4" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
<div class="mt-6 flex items-center justify-between gap-4">
<div class="inline-flex items-center gap-2 text-[13px] text-neutral-500">
<img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?q=80&w=80&auto=format&fit=crop" alt="Support" class="h-6 w-6 rounded-full object-cover ring-1 ring-neutral-200">
<span>Real people, real help — 9am–5pm (PT)</span>
</div>
<button type="submit" class="inline-flex items-center gap-2 rounded-lg bg-neutral-900 px-4 py-2.5 text-[15px] font-medium text-white shadow-sm hover:bg-neutral-800 hover:shadow transition-colors focus:outline-none focus-visible:ring-4 focus-visible:ring-neutral-900/10 active:bg-neutral-900">
<i data-lucide="send" class="size-4 text-white" aria-hidden="true"></i>
Send message
</button>
</div>
<p class="mt-4 text-[12.5px] text-neutral-500">
By submitting, you agree to our terms and privacy policy.
</p>
</form>
</div>
</section>
</main>
<script>
document.addEventListener('DOMContentLoaded', function () {
lucide.createIcons({ attrs: { 'stroke-width': 1.5 } });
});
</script>
</body></html>