Home
Erik Hyatt
User review cards

User review cards

Resposive testemonial cards

This tailwind example is contributed by Erik Hyatt, on 04-Jun-2023. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example are endorsement,review

Testimonial

Author Erik Hyatt

14.5k

Fork Fullscreen

<div
                class="aspect-auto p-8 border border-gray-100 rounded-3xl bg-white dark:bg-gray-800 dark:border-gray-700 shadow-2xl shadow-gray-600/10 dark:shadow-none">
                <div class="flex gap-4">
                    <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/women/12.jpg" alt="user avatar" width="400" height="400" loading="lazy">
                    <div>
                        <h6 class="text-lg font-medium text-gray-700 dark:text-white">Daniella Doe</h6>
                        <p class="text-sm text-gray-500 dark:text-gray-300">Mobile dev</p>
                    </div>
                </div>
                <p class="mt-8">Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum aliquid quo eum quae quos
                    illo earum ipsa doloribus nostrum minus libero aspernatur laborum cum, a suscipit, ratione ea totam
                    ullam! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Architecto laboriosam deleniti
                    aperiam ab veniam sint non cumque quis tempore cupiditate. Sint libero voluptas veniam at
                    reprehenderit, veritatis harum et rerum.
                </p>
            </div>

<div
                class="aspect-auto p-8 border border-gray-100 rounded-3xl bg-white dark:bg-gray-800 dark:border-gray-700 shadow-2xl shadow-gray-600/10 dark:shadow-none">
                <div class="flex gap-4">
                    <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/women/14.jpg" alt="user avatar" width="200" height="200" loading="lazy">
                    <div>
                        <h6 class="text-lg font-medium text-gray-700 dark:text-white">Jane doe</h6>
                        <p class="text-sm text-gray-500 dark:text-gray-300">Marketing</p>
                    </div>
                </div>
                <p class="mt-8"> Lorem ipsum dolor laboriosam deleniti aperiam ab veniam sint non cumque quis tempore
                    cupiditate. Sint libero voluptas veniam at reprehenderit, veritatis harum et rerum.
                </p>
            </div>

<div
                class="aspect-auto p-8 border border-gray-100 rounded-3xl bg-white dark:bg-gray-800 dark:border-gray-700 shadow-2xl shadow-gray-600/10 dark:shadow-none">
                <div class="flex gap-4">
                    <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/women/18.jpg" alt="user avatar" width="200" height="200" loading="lazy">
                    <div>
                        <h6 class="text-lg font-medium text-gray-700 dark:text-white">Yanick Doe</h6>
                        <p class="text-sm text-gray-500 dark:text-gray-300">Developer</p>
                    </div>
                </div>
                <p class="mt-8">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Architecto laboriosam deleniti
                    aperiam ab veniam sint non cumque quis tempore cupiditate. Sint libero voluptas veniam at
                    reprehenderit, veritatis harum et rerum.
                </p>
            </div>

<div
                class="aspect-auto p-8 border border-gray-100 rounded-3xl bg-white dark:bg-gray-800 dark:border-gray-700 shadow-2xl shadow-gray-600/10 dark:shadow-none">
                <div class="flex gap-4">
                    <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/women/2.jpg" alt="user avatar" width="200" height="200" loading="lazy">
                    <div>
                        <h6 class="text-lg font-medium text-gray-700 dark:text-white">Jane Doe</h6>
                        <p class="text-sm text-gray-500 dark:text-gray-300">Mobile dev</p>
                    </div>
                </div>
                <p class="mt-8">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Architecto laboriosam deleniti
                    aperiam ab veniam sint non cumque quis tempore cupiditate. Sint libero voluptas veniam at
                    reprehenderit, veritatis harum et rerum.
                </p>
            </div>

<div
                class="aspect-auto p-8 border border-gray-100 rounded-3xl bg-white dark:bg-gray-800 dark:border-gray-700 shadow-2xl shadow-gray-600/10 dark:shadow-none">
                <div class="flex gap-4">
                    <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/women/62.jpg" alt="user avatar" width="200" height="200" loading="lazy">
                    <div>
                        <h6 class="text-lg font-medium text-gray-700 dark:text-white">Andy Doe</h6>
                        <p class="text-sm text-gray-500 dark:text-gray-300">Manager</p>
                    </div>
                </div>
                <p class="mt-8"> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Architecto laboriosam
                    deleniti aperiam ab veniam sint non cumque quis tempore cupiditate. Sint libero voluptas veniam at
                    reprehenderit, veritatis harum et rerum.
                </p>
            </div>

<div
                class="aspect-auto p-8 border border-gray-100 rounded-3xl bg-white dark:bg-gray-800 dark:border-gray-700 shadow-2xl shadow-gray-600/10 dark:shadow-none">
                <div class="flex gap-4">
                    <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/women/19.jpg" alt="user avatar" width="400" height="400" loading="lazy">
                    <div>
                        <h6 class="text-lg font-medium text-gray-700 dark:text-white">Yanndy Doe</h6>
                        <p class="text-sm text-gray-500 dark:text-gray-300">Mobile dev</p>
                    </div>
                </div>
                <p class="mt-8">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Architecto laboriosam deleniti
                    aperiam ab veniam sint non cumque quis tempore cupiditate. Sint libero voluptas veniam at
                    reprehenderit, veritatis harum et rerum.
                </p>
            </div>

</div>
    </div>
</div>

Related Examples