Home
Anonymous
User card with Social Icons

User card with Social Icons

This tailwind example is contributed by Anonymous, on 21-Sep-2024. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Author box, User information

Profile

Author Anonymous

1.8k

Fork Fullscreen

<div class="max-w-sm rounded overflow-hidden shadow-lg">
  <div class="relative">
    <img class="w-full clippy" src="https://images.pexels.com/photos/3779448/pexels-photo-3779448.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Sunset in the mountains">
    <div
      class="clippy absolute bottom-0 left-0 top-0 right-0 bg-blue-700 bg-opacity-50 p-4 text-white flex flex-col justify-end items-center">
    </div>
    <div
      class="absolute bottom-0 right-0 mb-6 mr-6 rounded-full h-16 w-16 flex items-center bg-green-400 justify-center text-4xl font-thin absolute right-0 text-white shadow-2xl">
      +</div>
  </div>
  <div class="pt-3 pb-5 px-5 flex flex-col items-center">
    <p class="font-bold text-3xl">John Doe</p>
    <p class="text-gray-500 mb-2">Product Designer</p>
    <p class="text-center mb-2">Apparently we had reached a great height in the atmosphere</p>
    <div class="flex flex-row align-center justify-center">
      <svg class="ml-2" height="20px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512"
        style="enable-background:new 0 0 512 512;" xml:space="preserve">
        <g>
          <g>
            <path d="M431.908,70.315l-9.978-9.455l-0.206,0.347C375.361,21.659,317.04,0,256.002,0c-33.211,0-65.606,6.383-96.411,18.975
			l-0.092-0.096l-6.709,3.07C77.399,55.32,22.291,123.207,5.862,203.544v1.364H5.433c-0.015,0-0.027-0.53-0.043-0.455l-1.727,7.945
			l0.158-0.096c-2.519,14.554-3.81,29.189-3.81,43.792c0,75.444,32.77,145.914,90.198,194.771l-0.063,0.12l6.594,5.241
			C142.571,492.721,197.645,512,256.002,512c30.811,0,61.217-5.693,90.711-16.902l6.896-2.688v-0.163
			c84.883-34.19,143.853-110.479,155.637-202.726l0.601,0.179l1.143-14.172c0.556-7.123,1-13.092,1-19.52
			C511.99,185.211,483.564,119.26,431.908,70.315z M256.002,21.905c57.011,0,111.432,20.689,154.261,58.376
			c-30.582,48.616-73.471,87.25-124.933,112.497C256.82,135.542,220.161,82.937,176.13,36.061
			C201.807,26.673,228.6,21.905,256.002,21.905z M154.572,45.148c44.864,46.57,82.081,99.184,110.783,156.6
			c-36.75,14.942-75.54,22.504-115.479,22.504c-42.008,0-82.685-8.343-121.034-24.804C45.553,132.192,91.81,75.396,154.572,45.148z
			 M21.915,256.008c0-11.522,0.881-23.127,2.598-34.65c39.828,16.448,81.927,24.799,125.363,24.799
			c43.211,0,85.164-8.284,124.886-24.611c6.052,13.268,11.749,27.039,17.029,41.185c-84.042,27.756-152.979,87.846-192.084,167.314
			C50.103,385.566,21.915,322.901,21.915,256.008z M256.002,490.089c-50.517,0-98.344-15.82-138.864-45.822
			c36.162-76.604,101.739-134.555,182.008-160.921c20.995,62.529,32.028,127.656,32.84,193.854
			C307.203,485.758,281.679,490.089,256.002,490.089z M353.715,468.575c-1.625-65.294-12.878-129.52-33.529-191.314
			c55.356-13.923,113.844-12.102,168.06,5.067C479.104,365.698,428.602,435.329,353.715,468.575z M490.046,259.912
			c-30.724-9.231-62.523-13.905-94.718-13.905c-27.767,0-55.421,3.527-82.367,10.479l-0.055-0.158l-0.064,0.019
			c-5.557-14.971-11.573-29.582-17.973-43.626l0.093-0.043l-0.078-0.16c53.821-26.39,98.916-66.417,131.52-116.725
			c41.18,43.618,63.7,99.997,63.7,160.215C490.105,257.313,490.083,258.618,490.046,259.912z" />
          </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>
        </g>
      </svg>
      <svg class="ml-2" height="20px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512"
        style="enable-background:new 0 0 512 512;" xml:space="preserve">
        <g>
          <g>
            <path d="M437.019,74.981C388.667,26.628,324.379,0,256,0S123.333,26.628,74.981,74.981C26.628,123.333,0,187.621,0,256
			s26.628,132.667,74.981,181.019C123.333,485.372,187.621,512,256,512s132.667-26.628,181.019-74.981S512,324.379,512,256
			S485.372,123.333,437.019,74.981z M256,495.832C123.756,495.832,16.168,388.244,16.168,256S123.756,16.168,256,16.168
			S495.832,123.756,495.832,256S388.244,495.832,256,495.832z" />
          </g>
        </g>
        <g>
          <g>
            <path d="M436.352,162.391c-2.433-2.104-5.958-2.463-8.875-1.11c-4.183,1.94-8.457,3.644-12.806,5.107
			c4.313-5.884,7.758-12.422,10.188-19.432c1.002-2.891,0.503-6.176-1.569-8.427c-2.593-2.814-6.723-3.406-9.963-1.56
			c-11.815,6.733-24.558,11.306-37.931,13.618c-14.958-13.729-34.201-21.24-54.643-21.24c-42.313,0-77.147,32.642-80.648,74.065
			c-8.741-1.364-25.844-6.241-29.933-7.578c-29.581-10.075-56.228-27.814-77.075-51.307c-1.236-1.393-2.864-2.429-4.695-2.764
			c-3.68-0.672-7.171,1.186-8.745,4.339c-5.181,10.383-7.809,21.548-7.809,33.185c0,16.093,5.038,31.261,14.113,43.73
			c-2.828-0.531-5.838,0.462-7.812,2.89c-1.135,1.396-1.703,3.168-1.77,4.966c-0.03,0.82-0.057,1.643-0.057,2.472
			c0,21.817,9.99,41.646,26.136,54.588c-1.115,0.755-2.055,1.797-2.703,3.082c-0.963,1.904-1.07,4.143-0.434,6.178
			c7.052,22.559,24.572,39.739,46.292,46.781c-19.673,11.976-42.429,18.434-65.679,18.434c-2.053,0-4.166-0.053-6.279-0.156
			c-4.046-0.185-7.675,2.639-8.371,6.744c-0.568,3.349,1.162,6.698,4.087,8.423c29.718,17.529,63.734,26.792,98.39,26.792
			c41.361,0,80.758-12.881,113.607-36.725c4.052-2.942,4.499-8.821,0.959-12.362l-0.003-0.003
			c-2.852-2.852-7.338-3.159-10.605-0.793c-29.275,21.198-65.207,33.714-103.959,33.714c-21.719,0-43.162-3.968-63.255-11.61
			c24.303-4.268,47.275-14.808,66.409-30.712c2.312-1.922,3.529-4.962,2.947-7.911c-0.744-3.767-3.972-6.43-7.707-6.535
			c-19.686-0.558-37.26-11.435-46.698-28.06c4.501-0.216,9.006-0.832,13.44-1.841c3.382-0.77,6.119-3.472,6.559-6.913
			c0.529-4.142-2.134-7.925-6.085-8.897c-21.117-5.2-36.647-22.364-40.14-43.256c6.19,1.451,12.624,2.092,19.047,1.896
			c3.963-0.119,7.317-3.109,7.792-7.166c0.374-3.196-1.323-6.291-4.07-7.966c-17.529-10.682-27.985-29.272-27.985-49.783
			c0-5.014,0.623-9.917,1.859-14.665c21.193,20.954,46.914,36.922,75.086,46.518c0.258,0.088,28.093,8.754,38.636,8.797
			c0.688,0.017,3.975,0.162,3.98,0.162c3.388,0.137,6.673-1.919,7.953-5.326c0.368-0.978,0.502-2.03,0.477-3.074
			c-0.011-0.471-0.023-0.942-0.023-1.416c0-35.713,29.055-64.768,64.769-64.768c17.487,0,33.878,6.872,46.158,19.348
			c1.777,1.807,4.282,2.697,6.793,2.349c8.227-1.141,16.256-3.025,24.037-5.632c-4.142,4.544-9.025,8.437-14.502,11.504
			c-3.692,2.067-5.258,6.558-3.518,10.415l0.119,0.264c1.424,3.152,4.691,5.045,8.136,4.72c6.687-0.638,13.282-1.739,19.753-3.291
			c-5.725,5.904-12.02,11.267-18.849,16.051c-2.228,1.561-3.509,4.147-3.416,6.865l0.017,0.511c0.019,0.553,0.04,1.107,0.04,1.664
			v0.731c-0.186,45.29-17.461,86.654-45.668,117.994c-2.882,3.201-2.702,8.117,0.344,11.163c3.312,3.312,8.72,3.151,11.855-0.332
			c31.691-35.208,49.224-80.18,49.633-127.902c14.422-10.743,26.595-23.876,36.227-39.093
			C440.029,169.5,439.434,165.057,436.352,162.391z" />
          </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>
        </g>
      </svg>
      <svg class="ml-2" height="20px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512"
        style="enable-background:new 0 0 512 512;" xml:space="preserve">
        <g>
          <g>
            <path d="M437.019,74.981C388.667,26.628,324.379,0,256,0S123.333,26.628,74.981,74.981C26.628,123.333,0,187.621,0,256
			s26.628,132.667,74.981,181.019C123.333,485.372,187.621,512,256,512s132.667-26.628,181.019-74.981S512,324.379,512,256
			S485.372,123.333,437.019,74.981z M256,495.832C123.756,495.832,16.168,388.244,16.168,256S123.756,16.168,256,16.168
			S495.832,123.756,495.832,256S388.244,495.832,256,495.832z" />
          </g>
        </g>
        <g>
          <g>
            <path d="M347.845,97.011H164.155c-37.024,0-67.144,30.121-67.144,67.144v183.692c0,37.022,30.121,67.143,67.144,67.143h183.692
			c37.022,0,67.143-30.121,67.143-67.144V164.155C414.989,127.131,384.869,97.011,347.845,97.011z M398.821,347.845
			c0,28.108-22.868,50.976-50.976,50.976H164.155c-28.108,0-50.976-22.868-50.976-50.976V164.155
			c0-28.108,22.868-50.976,50.976-50.976h183.692c28.107,0,50.975,22.868,50.975,50.976V347.845z" />
          </g>
        </g>
        <g>
          <g>
            <path d="M339.402,251.22c-2.391-42.533-37.002-76.75-79.558-78.669c-49.108-2.214-89.535,38.232-87.292,87.346
			c1.945,42.56,36.19,77.154,78.728,79.51c17.951,0.995,34.762-3.727,48.803-12.494c4.374-2.731,5.087-8.814,1.441-12.459
			c-0.039-0.039-0.077-0.077-0.115-0.115c-2.657-2.658-6.778-3.059-9.971-1.075c-10.491,6.519-22.892,10.241-36.158,10.102
			c-37.455-0.394-67.676-31.844-66.621-69.286c1.061-37.681,33.215-67.721,71.657-65.312c33.126,2.076,60.09,28.49,62.819,61.569
			c1.111,13.475-1.787,26.206-7.61,37.157c-1.667,3.136-1.153,6.982,1.358,9.493c0.041,0.041,0.083,0.083,0.124,0.124
			c3.773,3.773,10.154,2.886,12.675-1.816C336.664,282.269,340.301,267.197,339.402,251.22z" />
          </g>
        </g>
        <g>
          <g>
            <circle cx="342.232" cy="158.989" r="21.558" />
          </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>
        </g>
      </svg>
    </div>
    <div class="mt-5 flex flex-row justify-center items-start">
      <div class="px-3 text-center">
        <p class="text-gray-500">Following</p>
        <b class="text-2xl">561</b>
      </div>
      <div class="px-3 text-center">
        <p class="text-gray-500">Tweets</p>
        <b class="text-2xl">1,337</b>
      </div>
      <div class="px-3 text-center">
        <p class="text-gray-500">Followers</p>
        <b class="text-2xl">781</b>
      </div>
    </div>
  </div>
</div>

Related Examples

Uses emoji for attention, mentions key features (modern, responsive, accessible)
Drop-in Tailwind CSS profile card component with responsive layout, gradient header, and hover effects - zero custom CSS needed. Features skill tags, social icons, and clean stats display. Just copy-paste the HTML, swap in your details, and you're live. Perfect for portfolios, developer profiles, or link-in-bio pages.

Author:
Muhammad Umair Arshad

5 months ago

678
Responsive Tailind css card
the best Responsive Card with image

Author:
irahoza daniel

3 months ago

304
Website Pricing List Card Component
Website Pricing List Card Component with Package Names: Basic Package → Starter Website Premium Package → Business Website Professional Package → E-Commerce Solution Pricing Structure: Increased prices significantly to reflect web development services one-time payment model FAQ Content.

Author:
Ayyamperumal S

5 months ago

841
Profile Card
Responsive modern profile card

Author:
Rajesh Maheshwari

6 months ago

561
Modern resume template
modern resume template with data

Author:
Nataraj Nataraj

1 month ago

93
Experience Card
Experience card section you can use for portfolio or other profiles.

Author:
Khalid

1 year ago

3.3k
Hello Acode Master! 👋
is a passionate software developer based in Rubavu. He considers himself the top developer in the area and is committed to solving real-world problems through technology.

Author:
Code Master(Mfuranziza Dusabe Hamza)

4 months ago

550
Portfolio Hero Section 2
visually stunning and captivating hero section component for your portfolio website.

$$@(\/)(\/)Y$ Author:
$@(\/)(\/)Y

1 year ago

4.9k
canvas fully covers
canvas fully covers

Author:
Balogun David Olajuwon

4 months ago

597
Portfolio Hero Section 4

$$@(\/)(\/)Y$ Author:
$@(\/)(\/)Y

10 months ago

3.3k
Acode Master
Acode Master is a skilled and passionate software developer known for mastering coding and creating innovative tech solutions. Specializing in modern web technologies like React.js, Node.js, PHP, and databases such as MySQL and PostgreSQL, Acode Master builds practical, efficient, and scalable applications. Beyond coding, Acode Master is dedicated to continuous learning, sharing knowledge, and empowering others through technology-driven projects and education.

Author:
Code Master(Mfuranziza Dusabe Hamza)

4 months ago

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

Author:
Simon Scheffer

2 years ago

14.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components