Home
Samuel Abera
Profile, Team or Testimonial

Profile, Team or Testimonial

This tailwind example is contributed by Samuel Abera, 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

Author Samuel Abera

2.4k

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