Blog Author Card

Forked from @prajwal/author-card

This tailwind example is contributed by EliteAI Tools, on 10-Jan-2025. Component is made with Tailwind v3.4. It is responsive. It supports dark mode. similar terms for this example are Author box, User information

Card Profile

Author EliteAI Tools

Tailwind v3.4 1.8k 4

Fork Fullscreen

<div class="relative flex flex-col md:flex-row md:items-center gap-6">
            
            <div class="flex-shrink-0">
                <div class="relative group">
                    <div
                        class="absolute w-28 h-28 -inset-0.5 bg-gradient-to-r from-pink-600 to-purple-600 rounded-full blur opacity-40 group-hover:opacity-75 transition duration-200">
                    </div>
                    <img
            src="https://randomuser.me/api/portraits/men/99.jpg"
            class="relative w-24 h-24 rounded-full object-cover border-2 border-white dark:border-gray-700"
            alt="Christian Nguyen"
          />
                </div>
            </div>

<div class="flex-1 space-y-4">
                <div>
                    <h2 class="text-2xl font-bold text-gray-900 dark:text-white">Christian Nguyen</h2>
                    <p class="mt-1 text-gray-600 dark:text-gray-300">
                        Christian is a versatile content writer with a strong background in web development.
                    </p>
                </div>

<div class="flex gap-4">
                    <a href="https://www.youtube.com/@mcqmate" target="_blank" rel="noopener noreferrer"
                        class="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-200 bg-gray-100 dark:bg-gray-700/50 rounded-full hover:bg-gray-200 dark:hover:bg-gray-600/50 transition-colors duration-200">
                        <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
                            <path fill-rule="evenodd" clip-rule="evenodd"
                                d="M20.5949 4.45999C21.5421 4.71353 22.2865 5.45785 22.54 6.40501C22.9982 8.12001 23 11.7004 23 11.7004C23 11.7004 23 15.2807 22.54 16.9957C22.2865 17.9429 21.5421 18.6872 20.5949 18.9407C18.88 19.4007 12 19.4007 12 19.4007C12 19.4007 5.12001 19.4007 3.405 18.9407C2.45785 18.6872 1.71353 17.9429 1.45999 16.9957C1 15.2807 1 11.7004 1 11.7004C1 11.7004 1 8.12001 1.45999 6.40501C1.71353 5.45785 2.45785 4.71353 3.405 4.45999C5.12001 4 12 4 12 4C12 4 18.88 4 20.5949 4.45999ZM15.5134 11.7007L9.79788 15.0003V8.40101L15.5134 11.7007Z"
                                stroke="currentColor" stroke-linejoin="round"></path>
                        </svg>
                        <span>YouTube</span>
                    </a>

<a href="https://mcqmate.com/" target="_blank" rel="noopener noreferrer"
                        class="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-200 bg-gray-100 dark:bg-gray-700/50 rounded-full hover:bg-gray-200 dark:hover:bg-gray-600/50 transition-colors duration-200">
                        <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none"
                            viewBox="0 0 24 24" stroke-width="1" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round"
                                d="M12 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 017.843 4.582M12 3a8.997 8.997 0 00-7.843 4.582m15.686 0A11.953 11.953 0 0112 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0121 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0112 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 013 12c0-1.605.42-3.113 1.157-4.418">
                            </path>
                        </svg>
                        <span>Website</span>
                    </a>
                </div>
            </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
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.4k
User profile card

Mr Robot

3 years ago

11.9k
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