Vibedex.io
Back to gallery
testimonialsBeginner

Testimonial — Dark Feature

Dark-mode featured testimonial with large portrait.

Claude prompt

Drop this into Claude Code, claude.ai, or your AI tool of choice to regenerate or remix this component from scratch.

Build a dark featured testimonial with Tailwind: gray-900 background, a large portrait, big quote text, and an attribution line below.

Code

html
<!--
  Source: Mert Cukuren (Tailblocks)
  https://github.com/mertJF/tailblocks/blob/master/src/blocks/testimonial/dark/c.js
  License: MIT
  Surfaced via https://vibedex.io/components/tailblocks-testimonial-dark-c
-->
<div class="bg-gray-900 text-gray-300 min-h-screen flex items-center justify-center">
  <div class="w-full">
<section class="text-gray-400 bg-gray-900 body-font">
      <div class="container px-5 py-24 mx-auto">
        <div class="flex flex-wrap -m-4">
          <div class="lg:w-1/3 lg:mb-0 mb-6 p-4">
            <div class="h-full text-center">
              <img
                alt="testimonial"
                class="w-20 h-20 mb-8 object-cover object-center rounded-full inline-block border-2 border-gray-800 bg-gray-800 bg-opacity-10"
                src="https://images.unsplash.com/photo-1546868871-7041f2a55e12?auto=format&fit=crop&q=80&w=302&h=302"
              />
              <p class="leading-relaxed">Designed by builders for builders. Every component is documented, every interaction has been considered, every state has been thought through.</p>
              <span class="inline-block h-1 w-10 rounded bg-indigo-500 mt-6 mb-4"></span>
              <h2 class="text-white font-medium title-font tracking-wider text-sm">
                HOLDEN CAULFIELD
              </h2>
              <p class="text-gray-500">Senior Product Designer</p>
            </div>
          </div>
          <div class="lg:w-1/3 lg:mb-0 mb-6 p-4">
            <div class="h-full text-center">
              <img
                alt="testimonial"
                class="w-20 h-20 mb-8 object-cover object-center rounded-full inline-block border-2 border-gray-800 bg-gray-800 bg-opacity-10"
                src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?auto=format&fit=crop&q=80&w=300&h=300"
              />
              <p class="leading-relaxed">Crisp typography, considered spacing, and the kind of polish that makes your product feel ready before you ship it.</p>
              <span class="inline-block h-1 w-10 rounded bg-indigo-500 mt-6 mb-4"></span>
              <h2 class="text-white font-medium title-font tracking-wider text-sm">
                ALPER KAMU
              </h2>
              <p class="text-gray-500">UI Develeoper</p>
            </div>
          </div>
          <div class="lg:w-1/3 lg:mb-0 p-4">
            <div class="h-full text-center">
              <img
                alt="testimonial"
                class="w-20 h-20 mb-8 object-cover object-center rounded-full inline-block border-2 border-gray-800 bg-gray-800 bg-opacity-10"
                src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?auto=format&fit=crop&q=80&w=305&h=305"
              />
              <p class="leading-relaxed">Build modern interfaces in a fraction of the time. Drop these blocks into your project and customize them to fit your brand.</p>
              <span class="inline-block h-1 w-10 rounded bg-indigo-500 mt-6 mb-4"></span>
              <h2 class="text-white font-medium title-font tracking-wider text-sm">
                HENRY LETHAM
              </h2>
              <p class="text-gray-500">CTO</p>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</div>