All Prompts
All Prompts

gridblogtailwindresponsiveanimatedhoverimageannouncementsection
Responsive Animated Card Grid for Blog Posts
Адаптивная анимированная сетка карточек для блога. Отображает изображения, дату, заголовок, краткое описание. Tailwind CSS, эффекты наведения, анимация при прокрутке.
Prompt
<div class="lg:px-8 max-w-7xl mx-auto px-6 min-h-[100svh] flex items-center justify-center">
<!-- Card 1 -->
<article
class="group overflow-hidden rounded-2xl border border-white/10 bg-white/[0.03] hover:bg-white/[0.06] transition backdrop-blur">
<div class="[animation:fadeSlideIn_0.8s_ease-out_0.5s_both] animate-on-scroll pt-5 pr-5 pb-5 pl-5">
<div class="relative aspect-square rounded-xl border border-white/10 bg-black/40 overflow-hidden">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/30dd5951-eeb5-4b75-ab70-4c9de46effb5_800w.webp" alt="Fuse — Multi-Agent Layer (Beta)" class="h-full w-full object-cover" style="filter: grayscale(100%);">
<div class="pointer-events-none absolute inset-0 ring-1 ring-inset ring-white/10 rounded-xl"></div>
</div>
<div class="mt-4 text-[11px] uppercase tracking-wide text-white/50 font-medium">
May 6, 2025
</div>
<h3 class="mt-2 text-xl font-medium tracking-tight text-white">
Fuse — Multi-Agent Layer (Beta)
</h3>
<p class="mt-2 text-sm text-white/60 leading-relaxed">
Coordinate multiple AI agents seamlessly with our new
orchestration layer for complex workflows.
</p>
</div>
</article>
<!-- Card 2 -->
<article
class="group overflow-hidden rounded-2xl border border-white/10 bg-white/[0.03] hover:bg-white/[0.06] transition backdrop-blur">
<div class="[animation:fadeSlideIn_0.8s_ease-out_0.6s_both] animate-on-scroll pt-5 pr-5 pb-5 pl-5">
<div class="relative aspect-square rounded-xl border border-white/10 bg-black/40 overflow-hidden">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/fa91f7af-c0ee-487e-9b71-34905a5f7414_800w.webp" alt="Low-Latency Mode for Inference API" class="h-full w-full object-cover" style="filter: grayscale(100%);">
<div class="pointer-events-none absolute inset-0 ring-1 ring-inset ring-white/10 rounded-xl"></div>
</div>
<div class="mt-4 text-[11px] uppercase tracking-wide text-white/50 font-medium">
Apr 29, 2025
</div>
<h3 class="mt-2 text-xl font-medium tracking-tight text-white">
Low-Latency Mode for Inference API
</h3>
<p class="mt-2 text-sm text-white/60 leading-relaxed">
Experience 40% faster response times with our optimized
inference pipeline for real-time applications.
</p>
</div>
</article>
<!-- Card 3 -->
<article
class="group overflow-hidden hover:bg-white/[0.06] transition border-white/10 border rounded-2xl backdrop-blur">
<div class="[animation:fadeSlideIn_0.8s_ease-out_0.7s_both] animate-on-scroll pt-5 pr-5 pb-5 pl-5">
<div class="relative aspect-square rounded-xl border border-white/10 bg-black/40 overflow-hidden">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/05c76ddb-2184-4dd8-8e7d-3465ddde84ea_800w.webp" alt="Code Interpreter — Run Python in Chat" class="h-full w-full object-cover" style="filter: grayscale(100%);">
<div class="pointer-events-none absolute inset-0 ring-1 ring-inset ring-white/10 rounded-xl"></div>
</div>
<div class="mt-4 text-[11px] uppercase tracking-wide text-white/50 font-medium">
Apr 1, 2025
</div>
<h3 class="mt-2 text-xl font-medium tracking-tight text-white">
Code Interpreter — Run Python in Chat
</h3>
<p class="mt-2 text-sm text-white/60 leading-relaxed">
Execute Python code directly in conversations with secure
sandboxing and instant visualization support.
</p>
</div>
</article>
</div>