Загрузка...
Адаптивная сетка карточек услуг на Tailwind CSS. Демонстрирует возможности продукта, содержит иконки, кнопки, выпадающие списки и поля ввода. Идеально для лендингов.
<div class="max-w-6xl grid grid-cols-1 lg:grid-cols-12 gap-6 mt-10">
<!-- Card 1: Data Strategy Advisory -->
<!-- Card 2: Creative Automation -->
<div class="lg:col-span-8">
<div class="sm:p-7 shadow-[0_2px_0_rgba(0,0,0,0.03),0_12px_24px_-12px_rgba(0,0,0,0.25)] ring-1 ring-black/5 bg-white rounded-3xl pt-6 pr-6 pb-6 pl-6">
<div class="flex items-center justify-between">
<div class="flex items-center gap-3">
<div class="h-10 w-10 rounded-full bg-neutral-900/90 text-white grid place-items-center shadow">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="pen-line" class="lucide lucide-pen-line h-5 w-5"><path d="M13 21h8" class=""></path><path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z" class=""></path></svg>
</div>
<div class="">
<h3 class="text-lg font-semibold tracking-tight text-neutral-900">Creative Automation</h3>
<p class="text-sm text-neutral-600">On-brand content generation, summaries, and product copy at scale.</p>
</div>
</div>
<button class="inline-flex items-center gap-2 rounded-full bg-neutral-900 text-white px-4 py-2 text-sm font-medium hover:bg-neutral-800 transition">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="sparkles" class="lucide lucide-sparkles h-4 w-4"><path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z" class=""></path><path d="M20 2v4" class=""></path><path d="M22 4h-4" class=""></path><circle cx="4" cy="20" r="2" class=""></circle></svg>
Generate
</button>
</div>
<div class="mt-6">
<div class="rounded-2xl ring-1 ring-black/5 bg-neutral-50">
<div class="flex items-center gap-2 px-3 py-2 border-b border-black/5">
<div class="h-4 w-4 rounded-full bg-neutral-300"></div>
<div class="h-4 w-24 rounded bg-neutral-200"></div>
</div>
<div class="p-3">
<div class="rounded-xl bg-white ring-1 ring-black/5 shadow-sm">
<div class="flex items-center justify-between px-3 py-2">
<div class="text-xs text-neutral-600">Actions</div>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="chevron-down" class="lucide lucide-chevron-down h-4 w-4 text-neutral-500"><path d="m6 9 6 6 6-6" class=""></path></svg>
</div>
<div class="border-t border-black/5">
<div class="px-3 py-2 text-sm text-neutral-700 hover:bg-neutral-50 cursor-pointer">Rewrite for clarity</div>
<div class="px-3 py-2 text-sm text-neutral-700 hover:bg-neutral-50 cursor-pointer">Fix typos</div>
<div class="px-3 py-2 text-sm text-neutral-700 hover:bg-neutral-50 cursor-pointer">Expand with detail</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Card 3: Conversational Assistants -->
<div class="lg:col-span-4">
<div class="sm:p-7 shadow-[0_2px_0_rgba(0,0,0,0.03),0_12px_24px_-12px_rgba(0,0,0,0.25)] ring-1 ring-black/5 bg-white rounded-3xl pt-6 pr-6 pb-6 pl-6">
<div class="flex gap-3 items-center">
<div class="h-10 w-10 grid place-items-center text-white bg-neutral-900/90 rounded-full pr-4 pl-4 shadow justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="workflow" class="lucide lucide-workflow w-[20px] h-[20px]" data-icon-replaced="true" style="width: 20px; height: 20px; color: rgb(255, 255, 255);"><rect width="8" height="8" x="3" y="3" rx="2" class=""></rect><path d="M7 11v4a2 2 0 0 0 2 2h4" class=""></path><rect width="8" height="8" x="13" y="13" rx="2" class=""></rect></svg>
</div>
<div class="">
<h3 class="text-lg font-semibold tracking-tight text-neutral-900">Automation Playbooks</h3>
<p class="text-sm text-neutral-600">Orchestrate tasks, approvals, and alerts across the tools you already use.</p>
</div>
</div>
<div class="mt-6">
<div class="grid grid-cols-4 gap-3">
<div class="rounded-2xl bg-neutral-50 ring-1 ring-black/5 aspect-square grid place-items-center shadow-sm">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="github" class="lucide lucide-github h-6 w-6 text-neutral-800"><path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4" class=""></path><path d="M9 18c-4.51 2-5-2-7-2" class=""></path></svg>
</div>
<div class="rounded-2xl bg-neutral-50 ring-1 ring-black/5 aspect-square grid place-items-center shadow-sm">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="figma" class="lucide lucide-figma h-6 w-6 text-neutral-800"><path d="M5 5.5A3.5 3.5 0 0 1 8.5 2H12v7H8.5A3.5 3.5 0 0 1 5 5.5z" class=""></path><path d="M12 2h3.5a3.5 3.5 0 1 1 0 7H12V2z" class=""></path><path d="M12 12.5a3.5 3.5 0 1 1 7 0 3.5 3.5 0 1 1-7 0z" class=""></path><path d="M5 19.5A3.5 3.5 0 0 1 8.5 16H12v3.5a3.5 3.5 0 1 1-7 0z" class=""></path><path d="M5 12.5A3.5 3.5 0 0 1 8.5 9H12v7H8.5A3.5 3.5 0 0 1 5 12.5z" class=""></path></svg>
</div>
<div class="rounded-2xl bg-neutral-50 ring-1 ring-black/5 aspect-square grid place-items-center shadow-sm">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="slack" class="lucide lucide-slack h-6 w-6 text-neutral-800"><rect width="3" height="8" x="13" y="2" rx="1.5" class=""></rect><path d="M19 8.5V10h1.5A1.5 1.5 0 1 0 19 8.5" class=""></path><rect width="3" height="8" x="8" y="14" rx="1.5" class=""></rect><path d="M5 15.5V14H3.5A1.5 1.5 0 1 0 5 15.5" class=""></path><rect width="8" height="3" x="14" y="13" rx="1.5" class=""></rect><path d="M15.5 19H14v1.5a1.5 1.5 0 1 0 1.5-1.5" class=""></path><rect width="8" height="3" x="2" y="8" rx="1.5" class=""></rect><path d="M8.5 5H10V3.5A1.5 1.5 0 1 0 8.5 5" class=""></path></svg>
</div>
<div class="rounded-2xl bg-neutral-50 ring-1 ring-black/5 aspect-square grid place-items-center shadow-sm">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="notebook-text" class="lucide lucide-notebook-text h-6 w-6 text-neutral-800"><path d="M2 6h4" class=""></path><path d="M2 10h4" class=""></path><path d="M2 14h4" class=""></path><path d="M2 18h4" class=""></path><rect width="16" height="20" x="4" y="2" rx="2" class=""></rect><path d="M9.5 8h5" class=""></path><path d="M9.5 12H16" class=""></path><path d="M9.5 16H14" class=""></path></svg>
</div>
</div>
<div class="mt-4 rounded-2xl bg-neutral-50 p-4 ring-1 ring-black/5">
<div class="flex items-center gap-2 text-xs text-neutral-600">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="activity" class="lucide lucide-activity h-4 w-4"><path d="M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2" class=""></path></svg>
Trigger-based routing with human-in-the-loop checkpoints
</div>
</div>
</div>
</div>
</div><div class="lg:col-span-4">
<div class="relative sm:p-7 shadow-[0_2px_0_rgba(0,0,0,0.03),0_12px_24px_-12px_rgba(0,0,0,0.25)] ring-1 ring-black/5 bg-white rounded-3xl pt-6 pr-6 pb-6 pl-6">
<div class="flex items-center gap-4">
<div class="relative">
<div class="h-14 w-14 rounded-full bg-neutral-900/90 text-white grid place-items-center shadow-lg">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="bar-chart-3" class="lucide lucide-bar-chart-3 h-6 w-6"><path d="M3 3v16a2 2 0 0 0 2 2h16" class=""></path><path d="M18 17V9" class=""></path><path d="M13 17V5" class=""></path><path d="M8 17v-3" class=""></path></svg>
</div>
</div>
<div class="flex-1">
<h3 class="text-lg font-semibold tracking-tight text-neutral-900">Data Strategy Advisory</h3>
<p class="mt-1 text-sm text-neutral-600">Blueprint your data layer, model lifecycle, and governance to unlock measurable ROI.</p>
</div>
</div>
<div class="mt-6 rounded-2xl bg-neutral-50 p-4 ring-1 ring-black/5">
<div class="flex items-center gap-3 text-xs text-neutral-600">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="compass" class="lucide lucide-compass h-4 w-4"><path d="m16.24 7.76-1.804 5.411a2 2 0 0 1-1.265 1.265L7.76 16.24l1.804-5.411a2 2 0 0 1 1.265-1.265z" class=""></path><circle cx="12" cy="12" r="10" class=""></circle></svg>
Roadmaps, capability audits, and model selection guidance
</div>
<div class="mt-2 flex items-center gap-3 text-xs text-neutral-600">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="shield-check" class="lucide lucide-shield-check h-4 w-4"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z" class=""></path><path d="m9 12 2 2 4-4" class=""></path></svg>
Risk, privacy, and compliance alignment
</div>
</div>
</div>
</div><div class="lg:col-span-8">
<div class="rounded-3xl bg-white p-6 sm:p-7 shadow-[0_2px_0_rgba(0,0,0,0.03),0_12px_24px_-12px_rgba(0,0,0,0.25)] ring-1 ring-black/5">
<div class="flex items-center gap-3">
<div class="h-10 w-10 rounded-full bg-neutral-900/90 text-white grid place-items-center shadow">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="bot" class="lucide lucide-bot h-5 w-5"><path d="M12 8V4H8" class=""></path><rect width="16" height="12" x="4" y="8" rx="2" class=""></rect><path d="M2 14h2" class=""></path><path d="M20 14h2" class=""></path><path d="M15 13v2" class=""></path><path d="M9 13v2" class=""></path></svg>
</div>
<div class="">
<h3 class="text-lg font-semibold tracking-tight text-neutral-900">Conversational Assistants</h3>
<p class="text-sm text-neutral-600">Deploy domain-trained copilots that resolve issues, route tasks, and learn over time.</p>
</div>
</div>
<div class="mt-6">
<div class="rounded-2xl bg-neutral-50 ring-1 ring-black/5 p-4">
<div class="relative">
<input type="text" placeholder="Ask the assistant anything…" class="w-full rounded-full border-0 bg-white px-5 py-3 pr-24 text-sm text-neutral-800 shadow-sm ring-1 ring-black/5 placeholder:text-neutral-400 focus:outline-none focus:ring-2 focus:ring-neutral-900/70">
<button class="absolute right-1 top-1.5 inline-flex items-center gap-2 rounded-full bg-neutral-900 px-4 py-2 text-sm font-medium text-white hover:bg-neutral-800 transition">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="send" class="lucide lucide-send h-4 w-4"><path d="M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z" class=""></path><path d="m21.854 2.147-10.94 10.939" class=""></path></svg>
Send
</button>
</div>
</div>
</div>
<div class="mt-4 grid grid-cols-2 gap-3 text-xs text-neutral-600">
<div class="flex items-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="headphones" class="lucide lucide-headphones h-4 w-4"><path d="M3 14h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-7a9 9 0 0 1 18 0v7a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3" class=""></path></svg>
Customer support deflection
</div>
<div class="flex items-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="book-open-check" class="lucide lucide-book-open-check h-4 w-4"><path d="M12 21V7" class=""></path><path d="m16 12 2 2 4-4" class=""></path><path d="M22 6V4a1 1 0 0 0-1-1h-5a4 4 0 0 0-4 4 4 4 0 0 0-4-4H3a1 1 0 0 0-1 1v13a1 1 0 0 0 1 1h6a3 3 0 0 1 3 3 3 3 0 0 1 3-3h6a1 1 0 0 0 1-1v-1.3" class=""></path></svg>
Knowledge-grounded answers
</div>
</div>
</div>
</div>
<!-- Card 4: Automation Playbooks -->
</div>