All Prompts
All Prompts

testimonialsectiongridresponsivetailwindmarketingblockquote
Grid Testimonial Wall with Avatars and Logos
Секция отзывов клиентов в виде адаптивной сетки с аватарами и логотипами. Идеально для лендингов и маркетинговых сайтов.
Prompt
<div class="grid grid-cols-1 lg:grid-cols-3 gap-px bg-zinc-800">
<div class="bg-zinc-950 p-8 md:p-10 flex flex-col justify-between lg:row-span-2">
<div class="">
<img src="https://placehold.co/120x32/27272a/71717a?text=LOGO" alt="Company Logo" class="h-8 w-auto mb-8 opacity-70">
<blockquote class="text-lg md:text-xl font-light text-zinc-100 tracking-tight leading-snug mb-6">
<span class="text-[#fbb22a] font-medium">"</span>
I've had my mind blown using Fractory with our infrastructure stack.
<span class="text-zinc-300"> I wrote up a few requirements and the team delivered a first working system in days. When I spotted edge cases, I flagged them and they were resolved before the next morning.</span>
<span class="text-zinc-400"> I was able to go from spec to production in half a sprint—it was really focused and efficient.</span>
<span class="text-[#fbb22a] font-medium">"</span>
</blockquote>
</div>
<div class="flex items-center gap-4 pt-6 border-t border-zinc-800">
<div class="w-10 h-10 bg-zinc-800 border border-zinc-700 overflow-hidden shrink-0">
<img src="https://i.pravatar.cc/80?img=12" alt="Ethan Perez" class="w-full h-full object-cover grayscale">
</div>
<div class="">
<div class="text-sm font-medium text-zinc-100">Ethan Perez</div>
<div class="text-xs text-zinc-500 font-light">Adversarial Robustness Research Lead</div>
</div>
</div>
</div>
<div class="bg-zinc-950 p-8 md:p-10 flex flex-col justify-between">
<blockquote class="leading-relaxed text-base text-zinc-400 font-light mb-6">
<span class="text-zinc-300 font-medium">"</span> Yes! Now I can have automated pipelines to build and test
systems. Ever since Fractory joined our stack, we've had all the engineering capacity we could ask for.
<span class="text-zinc-300 font-medium">"</span>
</blockquote>
<div class="flex items-center justify-between gap-4">
<div class="flex items-center gap-3">
<div class="w-9 h-9 bg-zinc-800 border border-zinc-700 overflow-hidden shrink-0">
<img src="https://i.pravatar.cc/80?img=33" alt="José Valim" class="w-full h-full object-cover grayscale">
</div>
<div>
<div class="text-sm font-medium text-zinc-100">José Valim</div>
<div class="text-xs text-zinc-500 font-light">Creator of Elixir</div>
</div>
</div>
<img src="https://placehold.co/80x24/27272a/71717a?text=LOGO" alt="Logo" class="h-6 w-auto opacity-70">
</div>
</div>
<div class="bg-zinc-950 p-8 md:p-10 flex flex-col justify-between">
<blockquote class="leading-relaxed text-base text-zinc-400 font-light mb-6">
<span class="text-zinc-300 font-medium">"</span> This is obviously a product built with precision and care. I
can tell it from two hours of using it. The architecture decisions are thoughtful. Kudos to the team.
<span class="text-zinc-300 font-medium">"</span>
</blockquote>
<div class="flex items-center justify-between gap-4">
<div class="flex items-center gap-3">
<div class="w-9 h-9 bg-zinc-800 border border-zinc-700 overflow-hidden shrink-0">
<img src="https://i.pravatar.cc/80?img=51" alt="Dan Abramov" class="w-full h-full object-cover grayscale">
</div>
<div>
<div class="text-sm font-medium text-zinc-100">Dan Abramov</div>
<div class="text-xs text-zinc-500 font-light">Engineer, React Core team</div>
</div>
</div>
<img src="https://placehold.co/80x24/27272a/71717a?text=LOGO" alt="Logo" class="h-6 w-auto opacity-70">
</div>
</div>
<div class="bg-zinc-950 p-8 md:p-10 flex flex-col justify-between">
<blockquote class="leading-relaxed text-base text-zinc-400 font-light mb-6">
<span class="text-zinc-300 font-medium">"</span> My god it is so fast. Deployment time, CI latency, iteration
speed. I feel it. I knew legacy agencies always felt sluggish, but I didn't realize how good things could really
be. I'm honestly astounded. <span class="text-zinc-300 font-medium">"</span>
</blockquote>
<div class="flex items-center justify-between gap-4">
<div class="flex items-center gap-3">
<div class="w-9 h-9 bg-zinc-800 border border-zinc-700 overflow-hidden shrink-0">
<img src="https://i.pravatar.cc/80?img=68" alt="Matt Baker" class="w-full h-full object-cover grayscale">
</div>
<div>
<div class="text-sm font-medium text-zinc-100">Matt Baker</div>
<div class="text-xs text-zinc-500 font-light">Principal Engineer</div>
</div>
</div>
<img src="https://placehold.co/80x24/27272a/71717a?text=LOGO" alt="Logo" class="h-6 w-auto opacity-70">
</div>
</div>
<div class="bg-zinc-950 p-8 md:p-10 flex flex-col justify-between">
<blockquote class="leading-relaxed text-base text-zinc-400 font-light mb-6">
<span class="text-zinc-300 font-medium">"</span> I've started working with Fractory, and I love how every detail
is carefully considered. The system is fast, reliable, and a pleasure to build on.
<span class="text-zinc-300 font-medium">"</span>
</blockquote>
<div class="flex items-center justify-between gap-4">
<div class="flex items-center gap-3">
<div class="w-9 h-9 bg-zinc-800 border border-zinc-700 overflow-hidden shrink-0">
<img src="https://i.pravatar.cc/80?img=44" alt="Sarah Chen" class="w-full h-full object-cover grayscale">
</div>
<div>
<div class="text-sm font-medium text-zinc-100">Sarah Chen</div>
<div class="text-xs text-zinc-500 font-light">Staff Engineer</div>
</div>
</div>
<img src="https://placehold.co/80x24/27272a/71717a?text=LOGO" alt="Logo" class="h-6 w-auto opacity-70">
</div>
</div>
</div>