Home
Simon Scheffer
User profile card with social icons

User profile card with social icons

Showcases a user's profile information along with links to their various social media accounts.

This tailwind example is contributed by Simon Scheffer, on 28-Feb-2023. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Author box, User information

Profile

Author Simon Scheffer

14k

Fork Fullscreen

<div class="w-full h-screen bg-gray-100 px-10 pt-10">
    <div class="relative mt-16 mb-32 max-w-sm mx-auto mt-24">
        <div class="rounded overflow-hidden shadow-md bg-white">
            <div class="absolute -mt-20 w-full flex justify-center">
                <div class="h-32 w-32">
                    <img src="https://randomuser.me/api/portraits/women/49.jpg" class="rounded-full object-cover h-full w-full shadow-md" />
                </div>
            </div>
            <div class="px-6 mt-16">
                <h1 class="font-bold text-3xl text-center mb-1">Carole Steward</h1>
                <p class="text-gray-800 text-sm text-center">Chief Executive Officer</p>
                <p class="text-center text-gray-600 text-base pt-3 font-normal">
                    Carole Steward is a visionary CEO known for her exceptional leadership and strategic acumen. With a
                    wealth of experience in the corporate world, she has a proven track record of driving innovation and
                    achieving remarkable business growth.
                </p>
                <div class="w-full flex justify-center pt-5 pb-5">
                    <a href="#" class="mx-5">
                        <div aria-label="Github">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                fill="none" stroke="#718096" stroke-width="1.5" stroke-linecap="round"
                                stroke-linejoin="round" class="feather feather-github">
                                <path
                                    d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22">
                                </path>
                            </svg>
                        </div>
                    </a>
                    <a href="#" class="mx-5">
                        <div aria-label="Twitter">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                fill="none" stroke="#718096" stroke-width="1.5" stroke-linecap="round"
                                stroke-linejoin="round" class="feather feather-twitter">
                                <path
                                    d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z">
                                </path>
                            </svg>
                        </div>
                    </a>
                    <a href="#" class="mx-5">
                        <div aria-label="Instagram">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                fill="none" stroke="#718096" stroke-width="1.5" stroke-linecap="round"
                                stroke-linejoin="round" class="feather feather-instagram">
                                <rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect>
                                <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path>
                                <line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line>
                            </svg>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

Related Examples

User profile card with Cover Image

Author:
Noob

2 years ago

26.4k
About me section with image

Author:
Kofi Osei

1 year ago

22.5k
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:

Author:
Prashant

2 years ago

59.2k
Profile card

Author:
Mr Robot

2 years ago

11.7k
Basic Resume template
simple and clean layout that provides a professional look.

Author:
R.P Ketan

2 years ago

24.7k
Show user details

Author:
Lucas Martinez

2 years ago

22.7k
User Profile Card
Full-page Profile card

Author:
Prashant

2 years ago

16.8k
Stylish profile card with a hover effect

Author:
Anonymous

1 year ago

7.7k
User | Author profile card template

Author:
Computer guy

1 year ago

7.9k
Twitter like users list

Author:
Simon Scheffer

2 years ago

10.9k
User | Author profile card

Author:
Computer guy

1 year ago

7k
profile page
This profile page design includes: 1. Responsive layout using Flexbox 2. Indigo-800 and Blue-900 color scheme 3. Dark mode support 4. Profile picture with hover effect 5. About Me section 6. Skills section with interactive tags 7. Contact information with icons 8. Edit Profile button 9. Subtle animations and transitions 10. Accessibility considerations (proper heading structure, color contrast) Key features: - The background uses a gradient from Indigo-800 to Blue-900 - The profile card has a white background in light mode and dark gray in dark mode - Text colors are adjusted for readability in both light and dark modes - The profile picture has a border color that changes in dark mode - Skill tags have a hover effect that changes their color - Icons in the contact section use the theme colors - The Edit Profile button uses Indigo-800 with a Blue-900 hover state - Dark mode is automatically applied based on system preferences - The entire card fades in on load for a smooth entrance - The profile picture has a subtle scale effect on hover This design provides a clean, professional look while incorporating the requested color scheme and maintaining good usability across different devices and color modes.

Author:
nejaa badr

4 months ago

2.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components