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

15.3k

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

3 years ago

32.7k
About me section with image

Author:
Kofi Osei

3 years ago

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

3 years ago

64.3k
Profile card

Author:
Mr Robot

3 years ago

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

Author:
R.P Ketan

3 years ago

27.7k
Show user details

Author:
Lucas Martinez

3 years ago

25.6k
User Profile Card
Full-page Profile card

Author:
Prashant

3 years ago

19.5k
Stylish profile card with a hover effect

Author:
Anonymous

2 years ago

9.2k
User | Author profile card template

Author:
Computer guy

2 years ago

9.5k
Twitter like users list

Author:
Simon Scheffer

3 years ago

12.2k
User | Author profile card

Author:
Computer guy

2 years ago

8.1k
Reusable Skill Showcase Section With Pure Tailwind CSS
A fully responsive and modular "Skills & Tools" section, perfect for any developer portfolio. Built with static HTML and Tailwind CSS, this component can be easily integrated into any project and made dynamic using any frontend framework (Vue, React, Svelte, Angular) or vanilla JavaScript. Customize it to highlight your unique tech stack and create engaging portfolio pages.

Author:
Abdul Baset Bappy

11 months ago

1.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components