Profile, Team or Testimonial

This tailwind example is contributed by $@(\/)(\/)¥, on 24-May-2024. Component is made with Tailwind v3.4. It is responsive. It supports dark mode. similar terms for this example are Author box, User information,endorsement,review

Card Profile Testimonial Team

$$@(\/)(\/)¥ profile image$

Author $@(\/)(\/)¥

Tailwind v3.4 4.1k 4

Fork Fullscreen

<div class="w-full h-full text-center flex flex-col gap-4 relative -top-10">
                <h1 class="uppercase text-lg font-semibold dark:text-white">
                    Software Developer
                </h1>

<h2 class="text-xl font-serif capitalize font-semibold text-gray-700 dark:text-gray-300">
                    samuel abera
                </h2>

<p class="text-gray-700 dark:text-gray-300">
                    Adaptable developer with experience in frontend (Nuxt.js) and backend (Laravel/Nest.js). Passionate
                    about web development, quick learner, and committed to exceptional websites. Let's collaborate!
                </p>

<button class="w-[60%] mx-auto bg-blue-500 text-white rounded-3xl px-4 py-2">Follow</button>
            </div>

</div>
        <div
            class="w-[20rem] mx-auto flex flex-col gap-2 px-4 shadow-lg border border-gray-300 border-gray-300 rounded-lg bg-white dark:bg-gray-900">
            <div class="w-full flex justify-center items-center">
                <img class="w-[8rem] h-[8rem] rounded-full outline outline-offset-2 outline-1 outline-blue-400 shadow-lg relative -top-[4rem]" src="https://images.unsplash.com/photo-1501196354995-cbb51c65aaea?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHw2fHxwZW9wbGV8ZW58MHwwfHx8MTcxODQ3NDU1Mnww&ixlib=rb-4.0.3&q=80&w=1080" alt="Profile Image" />
            </div>

<button class="w-[60%] mx-auto bg-blue-500 text-white rounded-3xl px-4 py-2">Follow</button>
            </div>

</div>
        <div
            class="w-[20rem] mx-auto flex flex-col gap-2 px-4 shadow-lg border border-gray-300 border-gray-300 rounded-lg bg-white dark:bg-gray-900">
            <div class="w-full flex justify-center items-center">
                <img class="w-[8rem] h-[8rem] rounded-full outline outline-offset-2 outline-1 outline-blue-400 relative -top-[4rem]" src="https://images.unsplash.com/photo-1463453091185-61582044d556?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHwxMHx8cGVvcGxlfGVufDB8MHx8fDE3MTg0NzQ1NTJ8MA&ixlib=rb-4.0.3&q=80&w=1080" alt="Profile Image" />
            </div>

<button class="w-[60%] mx-auto bg-blue-500 text-white rounded-3xl px-4 py-2">Follow</button>
            </div>

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

Related Examples

Profile card
Profile card with social icons

Krishna Gudpalle

4 years ago

13.6k
User Profile Card
The card features a user's profile picture, name, location, and options for interactions. It has a clean and modern design with rounded edges and icons for user engagement. It also has support for dark mod:

Prashant

4 years ago

65.5k
User profile card with Cover Image

Noob

3 years ago

33.8k
Customer testimonial card
Responsive user testimonial card with image

Arya

3 years ago

12.7k
User Profile Card
Useful for testimonials and reviews section

Abhijit Sen

3 years ago

11.2k
Minimal Profile card

Abhijit Sen

3 years ago

12.3k
Responsive user card with tailwind

Gopi Yadav

3 years ago

11.9k
Minimal Testimonial Card

Amit Pachange

3 years ago

9.5k
Testimonial card

Leon Bachmann

3 years ago

12.9k
Author box

Mr Robot

3 years ago

12.5k
Profile card

Mr Robot

3 years ago

13.3k
User profile card

Mr Robot

3 years ago

11.8k