All Prompts
All Prompts
featuresectiongridtailwindanimatedresponsivemarketing
AI Feature Grid with Animated Benefit Cards
Адаптивная сетка из 6 анимированных карточек AI-функций на Tailwind CSS. Идеально для раздела преимуществ продукта с иконками, заголовками и иллюстрациями.
Prompt
<div class="grid grid-cols-1 md:grid-cols-2 lg:gap-8 gap-x-6 gap-y-6">
<!-- Card 1: Always-On Intelligence -->
<div
class="group relative overflow-hidden rounded-3xl bg-white/[0.02] border border-white/10 hover:border-white/20 transition-colors duration-500 p-6 md:p-8 flex flex-col h-full">
<div
class="absolute inset-0 bg-gradient-to-br from-sky-500/10 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none">
</div>
<!-- Visual -->
<div
class="relative w-full h-48 mb-8 rounded-2xl bg-black/40 border border-white/5 overflow-hidden flex items-center justify-center">
<div
class="absolute inset-0 bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-sky-500/10 via-transparent to-transparent animate-pulse">
</div>
<!-- Radar Effect -->
<div class="absolute w-64 h-64 border border-sky-500/20 rounded-full flex items-center justify-center">
<div class="w-48 h-48 border border-sky-500/20 rounded-full flex items-center justify-center">
<div class="w-32 h-32 border border-sky-500/20 rounded-full flex items-center justify-center">
<div class="w-2 h-2 bg-sky-400 rounded-full shadow-[0_0_10px_rgba(56,189,248,1)]"></div>
</div>
</div>
<!-- Scanner -->
<div
class="absolute inset-0 bg-gradient-to-r from-transparent via-sky-500/10 to-transparent w-full h-full rounded-full animate-[spin_4s_linear_infinite]"
style="mask-image: conic-gradient(transparent 270deg, black 360deg);"></div>
</div>
<!-- Floating Dots -->
<div class="absolute top-10 right-10 w-1.5 h-1.5 bg-sky-400 rounded-full animate-ping [animation-duration:3s]">
</div>
<div
class="absolute bottom-12 left-12 w-1.5 h-1.5 bg-indigo-400 rounded-full animate-ping [animation-duration:4s]">
</div>
</div>
<h3 class="text-xl font-medium text-white mb-3 flex items-center gap-2" style="">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-sky-400">
<path d="M12 2v4" class=""></path>
<path d="m16.2 7.8 2.9-2.9" class=""></path>
<path d="M18 12h4" class=""></path>
<path d="m16.2 16.2 2.9 2.9" class=""></path>
<path d="M12 18v4" class=""></path>
<path d="m4.9 19.1 2.9-2.9" class=""></path>
<path d="M2 12h4" class=""></path>
<path d="m4.9 4.9 2.9 2.9" class=""></path>
</svg>
Always-On Intelligence
</h3>
<p class="text-zinc-400 font-light leading-relaxed text-sm" style="">
AI operates continuously, automating tasks like driver sourcing and providing up-to-date context in real-time.
Your recruiters can focus on building relationships while AI handles the data.
</p>
</div>
<!-- Card 2: Action-Oriented Workflows -->
<div
class="group relative overflow-hidden rounded-3xl bg-white/[0.02] border border-white/10 hover:border-white/20 transition-colors duration-500 p-6 md:p-8 flex flex-col h-full">
<div
class="absolute inset-0 bg-gradient-to-br from-indigo-500/10 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none">
</div>
<!-- Visual -->
<div
class="relative w-full h-48 mb-8 rounded-2xl bg-black/40 border border-white/5 overflow-hidden flex flex-col p-4 gap-3">
<!-- Flow Items -->
<div
class="flex items-center gap-3 p-3 rounded-lg bg-zinc-900/80 border border-white/5 border-l-2 border-l-emerald-500 transform translate-x-0 transition-transform">
<div class="w-5 h-5 rounded-full bg-emerald-500/20 flex items-center justify-center text-emerald-400">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="">
<path d="M20 6 9 17l-5-5" class=""></path>
</svg>
</div>
<span class="text-xs text-zinc-300 font-medium" style="">Candidate Screened</span>
<span class="ml-auto text-[10px] text-zinc-600" style="">Now</span>
</div>
<div
class="flex items-center gap-3 p-3 rounded-lg bg-indigo-500/10 border border-indigo-500/20 border-l-2 border-l-indigo-500 shadow-[0_0_15px_rgba(99,102,241,0.1)] animate-float">
<div class="w-5 h-5 rounded-full bg-indigo-500 flex items-center justify-center text-white animate-pulse">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="">
<path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z" class=""></path>
<path d="m12 8 4 4-4 4" class=""></path>
<path d="M8 12h8" class=""></path>
</svg>
</div>
<div class="flex flex-col">
<span class="text-xs text-white font-semibold" style="">Suggested Action</span>
<span class="text-[10px] text-indigo-300" style="">Schedule Interview</span>
</div>
<button class="ml-auto px-2 py-1 bg-indigo-500 text-white rounded text-[10px] font-medium hover:bg-indigo-600 transition-colors" style="">Apply</button>
</div>
<div class="flex items-center gap-3 p-3 rounded-lg bg-zinc-900/50 border border-white/5 opacity-50">
<div class="w-5 h-5 rounded-full bg-zinc-800 border border-white/10"></div>
<span class="text-xs text-zinc-500" style="">Background Check</span>
</div>
</div>
<h3 class="text-xl font-medium text-white mb-3 flex items-center gap-2" style="">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-indigo-400">
<path d="M22 12h-4l-3 9L9 3l-3 9H2" class=""></path>
</svg>
Action-Oriented Workflows
</h3>
<p class="text-zinc-400 font-light leading-relaxed text-sm" style="">
Seamless collaboration between human recruiters and AI Agents, guiding them with AI-generated next-best actions to
optimize every stage of the driver recruitment process.
</p>
</div>
<!-- Card 3: Multi-Modality -->
<div
class="group relative overflow-hidden rounded-3xl bg-white/[0.02] border border-white/10 hover:border-white/20 transition-colors duration-500 p-6 md:p-8 flex flex-col h-full">
<div
class="absolute inset-0 bg-gradient-to-br from-purple-500/10 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none">
</div>
<!-- Visual -->
<div
class="relative w-full h-48 mb-8 rounded-2xl bg-black/40 border border-white/5 overflow-hidden flex items-center justify-center">
<!-- Center Hub -->
<div
class="absolute w-16 h-16 bg-zinc-900 rounded-xl border border-white/10 flex items-center justify-center z-10 shadow-2xl">
<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" class="text-white">
<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" class=""></path>
<circle cx="9" cy="7" r="4" class=""></circle>
<path d="M22 21v-2a4 4 0 0 0-3-3.87" class=""></path>
<path d="M16 3.13a4 4 0 0 1 0 7.75" class=""></path>
</svg>
</div>
<!-- Orbiting Nodes -->
<div class="absolute w-32 h-32 animate-[spin_10s_linear_infinite]">
<!-- Node 1: Resume -->
<div
class="absolute -top-3 left-1/2 -translate-x-1/2 w-8 h-8 bg-zinc-800 rounded-lg border border-white/10 flex items-center justify-center animate-[spin_10s_linear_infinite_reverse]">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="text-purple-300">
<path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z" class=""></path>
<polyline points="14 2 14 8 20 8" class=""></polyline>
<path d="M16 13H8" class=""></path>
<path d="M16 17H8" class=""></path>
<path d="M10 9H8" class=""></path>
</svg>
</div>
<!-- Node 2: Audio -->
<div
class="absolute bottom-2 right-0 w-8 h-8 bg-zinc-800 rounded-lg border border-white/10 flex items-center justify-center animate-[spin_10s_linear_infinite_reverse]">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-pink-300">
<path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z" class=""></path>
<path d="M19 10v2a7 7 0 0 1-14 0v-2" class=""></path>
<line x1="12" x2="12" y1="19" y2="22" class=""></line>
</svg>
</div>
<!-- Node 3: Chat -->
<div
class="absolute bottom-2 left-0 w-8 h-8 bg-zinc-800 rounded-lg border border-white/10 flex items-center justify-center animate-[spin_10s_linear_infinite_reverse]">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-sky-300">
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" class=""></path>
</svg>
</div>
</div>
<!-- Connecting Lines -->
<svg class="absolute inset-0 w-full h-full pointer-events-none opacity-20">
<circle cx="50%" cy="50%" r="64" fill="none" stroke="white" stroke-width="1" stroke-dasharray="4 4" class="">
</circle>
</svg>
</div>
<h3 class="text-xl font-medium text-white mb-3 flex items-center gap-2" style="">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-purple-400">
<path
d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"
class=""></path>
<polyline points="7.5 4.21 12 6.81 16.5 4.21" class=""></polyline>
<polyline points="7.5 19.79 7.5 14.6 3 12" class=""></polyline>
<polyline points="21 12 16.5 14.6 16.5 19.79" class=""></polyline>
<polyline points="3.27 6.96 12 12.01 20.73 6.96" class=""></polyline>
<line x1="12" x2="12" y1="22.08" y2="12" class=""></line>
</svg>
Multi-Modality
</h3>
<p class="text-zinc-400 font-light leading-relaxed text-sm" style="">
Our system understands unstructured and multimodal data—resumes, recordings, job descriptions, and logs—providing
a comprehensive view of every candidate.
</p>
</div>
<!-- Card 4: Hyper-Personalization -->
<div
class="group relative overflow-hidden rounded-3xl bg-white/[0.02] border border-white/10 hover:border-white/20 transition-colors duration-500 p-6 md:p-8 flex flex-col h-full">
<div
class="absolute inset-0 bg-gradient-to-br from-pink-500/10 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none">
</div>
<!-- Visual -->
<div
class="relative w-full h-48 mb-8 rounded-2xl bg-black/40 border border-white/5 overflow-hidden flex flex-col items-center justify-center p-6">
<div class="w-full max-w-[240px] bg-zinc-900 border border-white/10 rounded-lg p-4 shadow-xl relative">
<div class="flex items-center gap-2 mb-3">
<div class="w-2 h-2 rounded-full bg-red-500/50"></div>
<div class="w-2 h-2 rounded-full bg-yellow-500/50"></div>
<div class="w-2 h-2 rounded-full bg-green-500/50"></div>
</div>
<div class="space-y-2">
<div class="h-2 w-1/3 bg-zinc-800 rounded"></div>
<div class="text-[10px] text-zinc-400 font-mono leading-relaxed" style="">
Hello <span class="text-pink-400 bg-pink-500/10 px-1 rounded animate-pulse" style="">{{driver_name}}</span>,
based on your <span class="text-pink-400 bg-pink-500/10 px-1 rounded" style="">Class A</span> license, we
have a route in <span class="text-pink-400 bg-pink-500/10 px-1 rounded" style="">Texas</span>...
</div>
</div>
<!-- Cursor -->
<div class="absolute bottom-4 right-4 w-2 h-4 bg-pink-500/50 animate-pulse"></div>
</div>
</div>
<h3 class="text-xl font-medium text-white mb-3 flex items-center gap-2" style="">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-pink-400">
<path
d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"
class=""></path>
</svg>
Hyper-Personalization
</h3>
<p class="text-zinc-400 font-light leading-relaxed text-sm" style="">
Empower your team to create tailored experiences for every driver interaction, from personalized outreach to
customized onboarding paths.
</p>
</div>
<!-- Card 5: Unified Data -->
<div
class="group relative overflow-hidden rounded-3xl bg-white/[0.02] border border-white/10 hover:border-white/20 transition-colors duration-500 p-6 md:p-8 flex flex-col h-full">
<div
class="absolute inset-0 bg-gradient-to-br from-emerald-500/10 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none">
</div>
<!-- Visual -->
<div
class="relative w-full h-48 mb-8 rounded-2xl bg-black/40 border border-white/5 overflow-hidden flex items-end justify-center p-6 gap-2">
<!-- Charts -->
<div class="w-8 bg-zinc-800 rounded-t-sm h-12 group-hover:h-20 transition-all duration-700 ease-out relative">
</div>
<div
class="w-8 bg-zinc-800 rounded-t-sm h-20 group-hover:h-32 transition-all duration-700 ease-out delay-100 relative">
</div>
<div
class="w-8 bg-emerald-600 rounded-t-sm h-32 group-hover:h-40 transition-all duration-700 ease-out delay-200 relative shadow-[0_0_20px_rgba(5,150,105,0.4)]">
</div>
<div
class="w-8 bg-zinc-800 rounded-t-sm h-24 group-hover:h-28 transition-all duration-700 ease-out delay-300 relative">
</div>
<div
class="w-8 bg-zinc-800 rounded-t-sm h-16 group-hover:h-20 transition-all duration-700 ease-out delay-400 relative">
</div>
<!-- Data Overlay -->
<div class="absolute top-4 left-4 right-4 flex justify-between items-start">
<div class="flex flex-col">
<span class="text-[10px] uppercase tracking-wider text-zinc-500" style="">Holistic Score</span>
<span class="text-2xl font-mono text-white" style="">98.2<span class="text-emerald-400 text-sm" style="">%</span></span>
</div>
<div class="w-6 h-6 rounded-full bg-emerald-500/20 flex items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="text-emerald-400">
<polyline points="22 7 13.5 15.5 8.5 10.5 2 17" class=""></polyline>
<polyline points="16 7 22 7 22 13" class=""></polyline>
</svg>
</div>
</div>
</div>
<h3 class="text-xl font-medium text-white mb-3 flex items-center gap-2" style="">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-emerald-400">
<ellipse cx="12" cy="5" rx="9" ry="3" class=""></ellipse>
<path d="M3 5V19A9 3 0 0 0 21 19V5" class=""></path>
<path d="M3 12A9 3 0 0 0 21 12" class=""></path>
</svg>
Unified & Actionable Data
</h3>
<p class="text-zinc-400 font-light leading-relaxed text-sm" style="">
Achieve a holistic view of every driver by integrating diverse data sources. AI delivers personalized insights and
detailed profiles to enhance sourcing.
</p>
</div>
<!-- Card 6: Conversational UX -->
<div
class="group relative overflow-hidden rounded-3xl bg-white/[0.02] border border-white/10 hover:border-white/20 transition-colors duration-500 p-6 md:p-8 flex flex-col h-full">
<div
class="absolute inset-0 bg-gradient-to-br from-amber-500/10 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none">
</div>
<!-- Visual -->
<div
class="relative w-full h-48 mb-8 rounded-2xl bg-black/40 border border-white/5 overflow-hidden flex flex-col justify-center p-6 space-y-3">
<!-- Chat Bubbles -->
<div
class="flex justify-end transform translate-y-2 opacity-0 group-hover:translate-y-0 group-hover:opacity-100 transition-all duration-500 ease-out">
<div class="bg-blue-600 text-white text-[10px] px-3 py-2 rounded-2xl rounded-tr-none shadow-lg max-w-[80%]"
style="">
Find drivers with Hazmat endorsements in Ohio.
</div>
</div>
<div
class="flex justify-start transform translate-y-2 opacity-0 group-hover:translate-y-0 group-hover:opacity-100 transition-all duration-500 delay-300 ease-out">
<div
class="bg-zinc-800 text-zinc-300 text-[10px] px-3 py-2 rounded-2xl rounded-tl-none border border-white/10 shadow-lg max-w-[80%] flex items-center gap-2"
style="">
<span class="w-1.5 h-1.5 rounded-full bg-amber-400 animate-pulse"></span>
I found 42 candidates matching your criteria.
</div>
</div>
<div
class="flex justify-start transform translate-y-2 opacity-0 group-hover:translate-y-0 group-hover:opacity-100 transition-all duration-500 delay-700 ease-out">
<div
class="bg-zinc-800 text-zinc-300 text-[10px] px-3 py-2 rounded-2xl rounded-tl-none border border-white/10 shadow-lg max-w-[80%]"
style="">
Would you like to start an email campaign?
</div>
</div>
</div>
<h3 class="text-xl font-medium text-white mb-3 flex items-center gap-2" style="">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-amber-400">
<path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z" class=""></path>
</svg>
Conversational Experience
</h3>
<p class="text-zinc-400 font-light leading-relaxed text-sm" style="">
Interact intuitively with your data. Facilitate natural, insightful conversations with drivers based on a deep
understanding of their profiles and needs.
</p>
</div>
</div>