VibeCoderzVibeCoderz
Telegram
All Prompts
Grid Testimonial Wall with Avatars and Logos preview
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>
All Prompts