All Prompts
All Prompts
sliderfeaturerotatortailwindinteractiveresponsivelandingmarketing
Interactive Feature Card Rotator
Адаптивный слайдер с карточками функций на Tailwind CSS. Навигация списком, плавные переходы. Идеально для лендингов SaaS для демонстрации возможностей.
Prompt
<section
class="z-10 sm:px-6 lg:px-8 md:py-24 [animation:fadeSlideIn_0.8s_ease-out_0.1s_both] animate-on-scroll max-w-7xl mr-auto ml-auto pt-16 pr-4 pb-16 pl-4 relative"
data-component="feature-rotator" data-element-locator="html > body:nth-of-type(1) > section:nth-of-type(4)">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-16 items-center">
<div class="">
<h2 class="text-3xl sm:text-4xl lg:text-5xl font-semibold tracking-tight text-white">
Plan, write, and ship email workflows that matter
</h2>
<div id="bulletList" class="mt-10 space-y-5">
<button type="button" data-index="0" class="group w-full flex items-center gap-3 sm:gap-4"><span class="h-6 w-1 rounded-full bg-emerald-400 transition-colors"></span><span class="text-sm sm:text-base text-white font-medium">Real‑time collaboration</span></button><button type="button" data-index="1" class="group w-full flex items-center gap-3 sm:gap-4"><span class="h-6 w-1 rounded-full bg-slate-700 transition-colors"></span><span class="text-sm sm:text-base text-slate-500 group-hover:text-slate-300 font-medium">Threaded conversations</span></button><button type="button" data-index="2" class="group w-full flex items-center gap-3 sm:gap-4"><span class="h-6 w-1 rounded-full bg-slate-700 transition-colors"></span><span class="text-sm sm:text-base text-slate-500 group-hover:text-slate-300 font-medium">Quick actions</span></button>
</div>
</div>
<div class="relative">
<div id="card-0"
class="card-view relative rounded-2xl border border-slate-800/80 bg-slate-900/50 shadow-[0_10px_60px_-15px_rgba(0,0,0,0.6)] ring-1 ring-white/5 backdrop-blur-md overflow-hidden transition-opacity duration-500"
style="opacity: 1; pointer-events: auto;">
<div class="h-12 flex items-center gap-2 px-4 border-b border-slate-800/70 text-slate-400 text-sm">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4">
<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>
</svg>
<span class="truncate">Sendo AI</span>
<span class="opacity-50">›</span>
<span class="truncate text-slate-300">Team Campaign</span>
<span class="ml-auto flex items-center gap-1 opacity-60">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4"><circle cx="12" cy="12" r="1" class=""></circle><circle cx="12" cy="5" r="1" class=""></circle><circle cx="12" cy="19" r="1" class=""></circle></svg>
</span>
</div>
<div class="relative px-6 md:px-8 py-8 md:py-10">
<div class="absolute left-3 top-1/2 -translate-y-1/2 flex flex-col gap-1 text-slate-700">
<span class="w-1 h-1 rounded-full bg-current"></span>
<span class="w-1 h-1 rounded-full bg-current"></span>
<span class="w-1 h-1 rounded-full bg-current"></span>
</div>
<div class="w-12 h-12 rounded-xl flex items-center justify-center mb-5 bg-emerald-500/10 text-emerald-400">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="w-6 h-6">
<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>
<div class="relative">
<h3
class="text-2xl sm:text-3xl font-semibold tracking-tight text-slate-100 flex flex-wrap items-center gap-3">
<span class="inline-flex items-center rounded-md px-2.5 py-1.5 ring-1 text-base sm:text-lg ring-emerald-500/60 bg-emerald-500/10 text-emerald-200">Co‑create</span>
<span>email campaigns</span>
</h3>
</div>
<p class="mt-5 text-slate-400 leading-relaxed max-w-prose text-[17px] sm:text-lg">Draft clear campaigns
together with multiplayer editing. Structure work with templates, labels, and smart filters.</p>
<div class="mt-6 flex gap-2">
<span class="inline-flex items-center rounded-md px-2.5 py-1 text-xs font-medium ring-1 ring-emerald-500/60 bg-emerald-500/10 text-emerald-200">campaigns</span>
<span class="inline-flex items-center rounded-md px-2.5 py-1 text-xs font-medium ring-1 ring-violet-500/60 bg-violet-500/10 text-violet-200">labels</span>
</div>
<div class="mt-8 space-y-2">
<div class="h-3 rounded-lg bg-slate-800/70 w-2/3"></div>
<div class="h-3 rounded-lg bg-slate-800/70 w-5/6"></div>
<div class="h-3 rounded-lg bg-slate-800/70 w-1/2"></div>
</div>
<div
class="pointer-events-none absolute inset-x-0 bottom-0 h-24 bg-gradient-to-t from-slate-950/80 to-transparent">
</div>
</div>
</div>
<div id="card-1"
class="card-view absolute inset-0 rounded-2xl border border-slate-800/80 bg-slate-900/50 shadow-[0_10px_60px_-15px_rgba(0,0,0,0.6)] ring-1 ring-white/5 backdrop-blur-md overflow-hidden transition-opacity duration-500"
style="opacity: 0; pointer-events: none;">
<div class="h-12 flex items-center gap-2 px-4 border-b border-slate-800/70 text-slate-400 text-sm">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4">
<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>
</svg>
<span class="truncate">Sendo AI</span>
<span class="opacity-50">›</span>
<span class="truncate text-slate-300">Thread Discussion</span>
<span class="ml-auto flex items-center gap-1 opacity-60">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4"><circle cx="12" cy="12" r="1" class=""></circle><circle cx="12" cy="5" r="1" class=""></circle><circle cx="12" cy="19" r="1" class=""></circle></svg>
</span>
</div>
<div class="relative px-6 md:px-8 py-8 md:py-10">
<div class="absolute left-3 top-1/2 -translate-y-1/2 flex flex-col gap-1 text-slate-700">
<span class="w-1 h-1 rounded-full bg-current"></span>
<span class="w-1 h-1 rounded-full bg-current"></span>
<span class="w-1 h-1 rounded-full bg-current"></span>
</div>
<div class="w-12 h-12 rounded-xl flex items-center justify-center mb-5 bg-amber-500/10 text-amber-400">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="w-6 h-6">
<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 class="relative">
<h3
class="text-2xl sm:text-3xl font-semibold tracking-tight text-slate-100 flex flex-wrap items-center gap-3">
<span class="inline-flex items-center rounded-md px-2.5 py-1.5 ring-1 text-base sm:text-lg ring-amber-500/60 bg-amber-500/10 text-amber-200">Reply in</span>
<span>context</span>
</h3>
</div>
<p class="mt-5 text-slate-400 leading-relaxed max-w-prose text-[17px] sm:text-lg">Keep decisions attached to
emails with inline threads. Mention teammates, resolve quickly, and move forward.</p>
<div class="mt-6 flex gap-2">
<span class="inline-flex items-center rounded-md px-2.5 py-1 text-xs font-medium ring-1 ring-amber-500/60 bg-amber-500/10 text-amber-200">threads</span>
<span class="inline-flex items-center rounded-md px-2.5 py-1 text-xs font-medium ring-1 ring-sky-500/60 bg-sky-500/10 text-sky-200">Mention</span>
</div>
<div class="mt-8 space-y-2">
<div class="h-3 rounded-lg bg-slate-800/70 w-2/3"></div>
<div class="h-3 rounded-lg bg-slate-800/70 w-5/6"></div>
<div class="h-3 rounded-lg bg-slate-800/70 w-1/2"></div>
</div>
<div
class="pointer-events-none absolute inset-x-0 bottom-0 h-24 bg-gradient-to-t from-slate-950/80 to-transparent">
</div>
</div>
</div>
<div id="card-2"
class="card-view absolute inset-0 rounded-2xl border border-slate-800/80 bg-slate-900/50 shadow-[0_10px_60px_-15px_rgba(0,0,0,0.6)] ring-1 ring-white/5 backdrop-blur-md overflow-hidden transition-opacity duration-500"
style="opacity: 0; pointer-events: none;">
<div class="h-12 flex items-center gap-2 px-4 border-b border-slate-800/70 text-slate-400 text-sm">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4">
<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>
</svg>
<span class="truncate">Sendo AI</span>
<span class="opacity-50">›</span>
<span class="truncate text-slate-300">Task Manager</span>
<span class="ml-auto flex items-center gap-1 opacity-60">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4"><circle cx="12" cy="12" r="1" class=""></circle><circle cx="12" cy="5" r="1" class=""></circle><circle cx="12" cy="19" r="1" class=""></circle></svg>
</span>
</div>
<div class="relative px-6 md:px-8 py-8 md:py-10">
<div class="absolute left-3 top-1/2 -translate-y-1/2 flex flex-col gap-1 text-slate-700">
<span class="w-1 h-1 rounded-full bg-current"></span>
<span class="w-1 h-1 rounded-full bg-current"></span>
<span class="w-1 h-1 rounded-full bg-current"></span>
</div>
<div class="w-12 h-12 rounded-xl flex items-center justify-center mb-5 bg-violet-500/10 text-violet-400">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="w-6 h-6">
<polyline points="22 12 18 12 15 21 9 3 6 12 2 12" class=""></polyline>
</svg>
</div>
<div class="relative">
<h3
class="text-2xl sm:text-3xl font-semibold tracking-tight text-slate-100 flex flex-wrap items-center gap-3">
<span class="inline-flex items-center rounded-md px-2.5 py-1.5 ring-1 text-base sm:text-lg ring-violet-500/60 bg-violet-500/10 text-violet-200">Turn emails into</span>
<span>tasks<p class="mt-5 text-slate-400 leading-relaxed max-w-prose text-[17px] sm:text-lg">Use quick commands to convert messages into actionable tasks with owners, priorities, and deadlines.</p>
<div class="mt-6 flex gap-2">
<span class="inline-flex items-center rounded-md px-2.5 py-1 text-xs font-medium ring-1 ring-violet-500/60 bg-violet-500/10 text-violet-200">tasks</span>
<span class="inline-flex items-center rounded-md px-2.5 py-1 text-xs font-medium ring-1 ring-emerald-500/60 bg-emerald-500/10 text-emerald-200">owners</span>
</div>
<div class="mt-8 space-y-2">
<div class="h-3 rounded-lg bg-slate-800/70 w-2/3"></div>
<div class="h-3 rounded-lg bg-slate-800/70 w-5/6"></div>
<div class="h-3 rounded-lg bg-slate-800/70 w-1/2"></div>
</div>
<div
class="pointer-events-none absolute inset-x-0 bottom-0 h-24 bg-gradient-to-t from-slate-950/80 to-transparent">
</div>
</span></h3>
</div>
</div>
</div>
</div>
<script>
(function() {
const bullets = document.querySelectorAll('#bulletList button[data-index]');
const cards = [
document.getElementById('card-0'),
document.getElementById('card-1'),
document.getElementById('card-2')
];
let currentIndex = 0;
const slides = [
{ bullet: 'Real‑time collaboration', accent: 'emerald' },
{ bullet: 'Threaded conversations', accent: 'amber' },
{ bullet: 'Quick actions', accent: 'violet' }
];
const accentColors = {
'emerald': 'bg-emerald-400',
'amber': 'bg-amber-400',
'violet': 'bg-violet-400'
};
function renderBullets() {
const bulletList = document.getElementById('bulletList');
bulletList.innerHTML = '';
slides.forEach((slide, index) => {
const isActive = index === currentIndex;
const button = document.createElement('button');
button.type = 'button';
button.setAttribute('data-index', index);
button.className = 'group w-full flex items-center gap-3 sm:gap-4';
const bar = document.createElement('span');
bar.className = `h-6 w-1 rounded-full transition-colors ${isActive ? accentColors[slide.accent] : 'bg-slate-700'}`;
const text = document.createElement('span');
text.className = `text-sm sm:text-base font-medium ${isActive ? 'text-white' : 'text-slate-500 group-hover:text-slate-300'}`;
text.textContent = slide.bullet;
button.appendChild(bar);
button.appendChild(text);
button.addEventListener('click', () => showCard(index));
bulletList.appendChild(button);
});
}
function showCard(index) {
currentIndex = index;
cards.forEach((card, i) => {
if (i === index) {
card.style.opacity = '1';
card.style.pointerEvents = 'auto';
} else {
card.style.opacity = '0';
card.style.pointerEvents = 'none';
}
});
renderBullets();
}
renderBullets();
showCard(0);
})();
</script>
</div>
</section>