User profile card

This tailwind example is contributed by Mr Robot, on 24-Nov-2022. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Author box, User information

Card Profile

Author Mr Robot

Tailwind v3.4 11.8k 20

Fork Fullscreen

<button class="bg-green-400 py-2 hover:bg-green-600 text-white px-4">
            <svg height="20" class="inline-block text-white" viewBox="-66 0 569 569.286" width="24" xmlns="http://www.w3.org/2000/svg"><path d="m.109375 66.382812v493.132813c0 5.238281 4.246094 9.484375 9.484375 9.484375h360.367188c5.234374 0 9.480468-4.246094 9.480468-9.484375v-398.296875c0-.210938-.101562-.390625-.121094-.597656-.046874-.832032-.210937-1.652344-.484374-2.4375-.105469-.304688-.179688-.597656-.3125-.894532-.460938-1.03125-1.101563-1.972656-1.898438-2.777343l-94.832031-94.832031c-.804688-.800782-1.75-1.441407-2.789063-1.898438-.285156-.121094-.574218-.222656-.871094-.3125-.792968-.273438-1.617187-.4375-2.457031-.492188-.160156.027344-.347656-.074218-.546875-.074218h-265.535156c-5.238281 0-9.484375 4.242187-9.484375 9.480468zm346.957031 85.351563h-62.457031v-62.457031zm-327.992187-75.867187h246.570312v85.351562c0 5.234375 4.246094 9.480469 9.480469 9.480469h85.351562v379.335937h-341.402343zm0 0" fill="#fff"></path><path d="m398.410156 493.132812v18.964844h28.449219c5.238281 0 9.484375-4.242187 9.484375-9.480468v-493.132813c0-5.238281-4.246094-9.484375-9.484375-9.484375h-360.367187c-5.238282 0-9.484376 4.246094-9.484376 9.484375v28.449219h18.96875v-18.96875h341.398438v474.167968zm0 0" fill="#fff"></path><path d="m75.976562 189.667969h227.597657v18.964843h-227.597657zm0 0" fill="#fff"></path><path d="m75.976562 132.765625h75.867188v18.96875h-75.867188zm0 0" fill="#fff"></path><path d="m75.976562 246.566406h151.734376v18.96875h-151.734376zm0 0" fill="#fff"></path><path d="m246.675781 246.566406h56.898438v18.96875h-56.898438zm0 0" fill="#fff"></path><path d="m75.976562 303.464844h227.597657v18.96875h-227.597657zm0 0" fill="#fff"></path><path d="m75.976562 417.265625h227.597657v18.96875h-227.597657zm0 0" fill="#fff"></path><path d="m161.324219 360.367188h142.25v18.964843h-142.25zm0 0" fill="#fff"></path><path d="m75.976562 360.367188h66.382813v18.964843h-66.382813zm0 0" fill="#fff"></path><path d="m75.976562 474.167969h37.933594v18.964843h-37.933594zm0 0" fill="#fff"></path><path d="m132.875 474.167969h170.699219v18.964843h-170.699219zm0 0" fill="#fff"></path></svg>
            <span class="inline-block ml-1 align-middle">Latest Post</span>
        </button>
    </div>
    <div class="flex border-black shadow-lg p-3 border-2">
        <div class="flex flex-col items-center min-w-[100px] justify-center lg:w-1/5 md:w-1/4 mr-4">
            <div class="image">
                <img class="w-40 mb-2" src="https://loremflickr.com/320/320/boy">
            </div>
            <div class="text-center flex gap-1 flex-wrap justify-center">
                <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg"
                    xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" class="inline-block"
                    viewBox="0 0 455.73 455.73" style="enable-background:new 0 0 455.73 455.73;" xml:space="preserve"
                    height="35" width="35">
                    <path style="fill:#3A559F;" d="M0,0v455.73h242.704V279.691h-59.33v-71.864h59.33v-60.353c0-43.893,35.582-79.475,79.475-79.475
	h62.025v64.622h-44.382c-13.947,0-25.254,11.307-25.254,25.254v49.953h68.521l-9.47,71.864h-59.051V455.73H455.73V0H0z">
                    </path>
                    <g>
                    </g>
                    <g>
                    </g>
                    <g>
                    </g>
                    <g>
                    </g>
                    <g>
                    </g>
                    <g>
                    </g>
                    <g>
                    </g>
                    <g>
                    </g>
                    <g>
                    </g>
                    <g>
                    </g>
                    <g>
                    </g>
                    <g>
                    </g>
                    <g>
                    </g>
                    <g>
                    </g>
                    <g>
                    </g>
                </svg>
                <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg"
                    xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" class="inline-block"
                    viewBox="0 0 455.731 455.731" style="enable-background:new 0 0 455.731 455.731;"
                    xml:space="preserve" width="35" height="35">
                    <g>
                        <rect x="0" y="0" style="fill:#50ABF1;" width="455.731" height="455.731"></rect>
                        <path style="fill:#FFFFFF;" d="M60.377,337.822c30.33,19.236,66.308,30.368,104.875,30.368c108.349,0,196.18-87.841,196.18-196.18
		c0-2.705-0.057-5.39-0.161-8.067c3.919-3.084,28.157-22.511,34.098-35c0,0-19.683,8.18-38.947,10.107
		c-0.038,0-0.085,0.009-0.123,0.009c0,0,0.038-0.019,0.104-0.066c1.775-1.186,26.591-18.079,29.951-38.207
		c0,0-13.922,7.431-33.415,13.932c-3.227,1.072-6.605,2.126-10.088,3.103c-12.565-13.41-30.425-21.78-50.25-21.78
		c-38.027,0-68.841,30.805-68.841,68.803c0,5.362,0.617,10.581,1.784,15.592c-5.314-0.218-86.237-4.755-141.289-71.423
		c0,0-32.902,44.917,19.607,91.105c0,0-15.962-0.636-29.733-8.864c0,0-5.058,54.416,54.407,68.329c0,0-11.701,4.432-30.368,1.272
		c0,0,10.439,43.968,63.271,48.077c0,0-41.777,37.74-101.081,28.885L60.377,337.822z"></path>
                    </g>
                    <g>
                    </g>
                    <g>
                    </g>
                    <g>
                    </g>
                    <g>
                    </g>
                    <g>
                    </g>
                    <g>
                    </g>
                    <g>
                    </g>
                    <g>
                    </g>
                    <g>
                    </g>
                    <g>
                    </g>
                    <g>
                    </g>
                    <g>
                    </g>
                    <g>
                    </g>
                    <g>
                    </g>
                    <g>
                    </g>
                </svg>
                <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg"
                    xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 455.73 455.73"
                    style="enable-background:new 0 0 455.73 455.73;" xml:space="preserve" width="35" height="35"
                    class="inline-block">
                    <path style="fill:#DD4B39;" d="M0,0v455.73h455.73V0H0z M265.67,247.037c-7.793,51.194-45.961,80.543-95.376,80.543
	c-55.531,0-100.552-45.021-100.552-100.552c0-55.517,45.021-100.538,100.552-100.538c26.862,0,50.399,9.586,67.531,26.226
	l-28.857,28.857c-9.773-9.846-23.147-15.094-38.674-15.094c-32.688,0-59.189,27.874-59.189,60.548
	c0,32.703,26.501,59.768,59.189,59.768c27.397,0,48.144-13.243,54.129-39.758h-54.129v-40.38h95.131
	c1.142,6.506,1.72,13.315,1.72,20.37C267.144,234.025,266.638,240.69,265.67,247.037z M386.419,234.517h-35.233v35.218H326.16
	v-35.218h-35.233v-25.041h35.233v-35.233h25.026v35.233h35.233V234.517z"></path>
                    <g>
                    </g>
                    <g>
                    </g>
                    <g>
                    </g>
                    <g>
                    </g>
                    <g>
                    </g>
                    <g>
                    </g>
                    <g>
                    </g>
                    <g>
                    </g>
                    <g>
                    </g>
                    <g>
                    </g>
                    <g>
                    </g>
                    <g>
                    </g>
                    <g>
                    </g>
                    <g>
                    </g>
                    <g>
                    </g>
                </svg>

</div>
        </div>
        <div class="lg:w-4/5 md:w-3/4">
            <h1 class="text-4xl font-bold">John Doe</h1>
            <p class="my-2 text-base">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad consequuntur eius ex,
                fugiat inventore labore laborum magni, maiores nihil provident quos vitae.</p>
        </div>
    </div>
</div>

Related Examples

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

R.P Ketan

3 years ago

28.1k
About me section with image

Kofi Osei

3 years ago

25.3k
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
Profile card

Mr Robot

3 years ago

13.3k
Author box

Mr Robot

3 years ago

12.5k
User profile card with Cover Image

Noob

3 years ago

33.8k
Responsive user card with tailwind

Gopi Yadav

3 years ago

11.9k
Profile Card
Show more details on hover

Tamani Phiri

3 years ago

15.2k
Minimal Profile card

Abhijit Sen

3 years ago

12.3k
Testimonial card with image

Simon Scheffer

3 years ago

12.8k
Profile card
Profile card with social icons

Krishna Gudpalle

4 years ago

13.6k
User Profile Card
Useful for testimonials and reviews section

Abhijit Sen

3 years ago

11.2k