Profile Card

Modern Profile card with Subtle overlay on image, minimal and clean approach with emphasis on readability and hierarchy.

This tailwind example is contributed by UI-Templates, on 12-Oct-2025. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Author box, User information

Card Profile

Author UI-Templates

Tailwind v3.4 1.5k 3

Fork Fullscreen

<div class="absolute bottom-0 left-0 right-0 m-[3.5px] p-2 bg-gradient-to-t from-red-900/80 via-red-700/20 to-transparent text-[#210d1f] rounded-b-[5px]">
      <h1 class="font-sans font-bold text-xl flex items-center gap-1.5">
        Chandrika
        <span class="text-black flex items-center justify-center">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
            stroke-width="2" stroke="currentColor" class="w-4 h-4">
            <path stroke-linecap="round" stroke-linejoin="round"
              d="M9 12.75 11.25 15 15 9.75M21 12c0 1.268-.63 2.39-1.593 3.068a3.745 3.745 0 0 1-1.043 3.296 3.745 3.745 0 0 1-3.296 1.043A3.745 3.745 0 0 1 12 21c-1.268 0-2.39-.63-3.068-1.593a3.746 3.746 0 0 1-3.296-1.043 3.745 3.745 0 0 1-1.043-3.296A3.745 3.745 0 0 1 3 12c0-1.268.63-2.39 1.593-3.068a3.745 3.745 0 0 1 1.043-3.296 3.746 3.746 0 0 1 3.296-1.043A3.746 3.746 0 0 1 12 3c1.268 0 2.39.63 3.068 1.593a3.746 3.746 0 0 1 3.296 1.043 3.746 3.746 0 0 1 1.043 3.296A3.745 3.745 0 0 1 21 12Z" />
          </svg>
        </span>
      </h1>

<p class="text-sm font-sans font-semibold text-[#210d1f] mb-3">Frontend Developer</p>

<button class="bg-white hover:bg-gray-100 text-xs text-[#210d1f] px-4 py-1 rounded-md font-medium transition-colors">
          + Follow
        </button>
      </div>
    </div>
  </div>

<div class="flex items-center justify-start">

<a href="https://discord.gg/95CveWrbK8"
   target="_blank"
   rel="noopener"
   class="flex items-center gap-2 text-black px-4 py-2 rounded-full shadow-lg hover:bg-indigo-500 transition-all duration-300 z-50 backdrop-blur-md">
  
  <span class="text-sm font-medium">Made by Chandrika</span>

</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
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
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
Testimonial card with image

Simon Scheffer

3 years ago

12.8k
Profile Card
Show more details on hover

Tamani Phiri

3 years ago

15.2k
Author card
Author card for giving credit to the author of the Blog/Article. It has social media icons and user image

Prajwal Hallale

3 years ago

7.6k