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.5k

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

Portfolio Hero Section 4

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

7 months ago

2.8k
The future ai
The is technology

Author:
ORGIN_DREAMS

1 month ago

110
Responsive Pricing Table
can be used when you want to price

Author:
Bonimater

1 month ago

61
Responsive user card with tailwind

Author:
Gopi Yadav

2 years ago

11.1k
Testimonial card with image

Author:
Simon Scheffer

2 years ago

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

3 months ago

789
User | Author profile card

Author:
Computer guy

1 year ago

7.3k
Super Profile
This an if look like profile

Author:
ORGIN_DREAMS

1 month ago

87
Stylish profile card with a hover effect

Author:
Anonymous

1 year ago

8.5k
Ripple Animation

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

3 months ago

925
Designing a Responsive Form Layouts with Tailwind CSS
Enhance your web application by building a sleek and responsive Form Layouts using Tailwind CSS. This comprehensive guide walks you through creating an interactive Form Layouts section featuring.

Author:
zobaidul kaziex

10 months ago

2.1k
Simple User Icon
Perfect for dashboard corners or social media platforms. Part of the coastalui.com collection.

Author:
Coastal UI

4 months ago

428

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components