Home
$@(\/)(\/)Y
Profile, Team or Testimonial

Profile, Team or Testimonial

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

Card Profile Testimonial Team

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

Author $@(\/)(\/)Y

3.3k

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