User card with Social Icons

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

Profile

Author Anonymous

Tailwind v3.4 2.5k 4

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

Startup page

ORGIN_DREAMS

1 year ago

1.1k
High-Performance Hotel Operations & AI Agent Testing Dashboard
A sophisticated, real-time command center designed for modern hotel management. This dashboard features deep integration for monitoring AI agent performance, guest sentiment, and room occupancy. Built with a "Mobile-First" philosophy, it demonstrates advanced data visualization, glassmorphism UI design, and a centralized state-management architecture. Perfect for showcasing full-stack capabilities in AI-driven automation.

Ayyamperumal S

8 months ago

1.1k
Responsive Hero Section with Typewriter Effect
A modern hero section featuring a typewriter animation effect, social media links, and responsive design. Includes a user avatar placeholder and a clean dark gradient background. Built with Tailwind CSS and Font Awesome icons. Perfect for personal portfolio websites.

Muhammad Umair Arshad

1 year ago

1.4k
TailwindFlex by omerlink
TailwindFlex

Omer fils ELENGA

8 months ago

568
User Profile Card
This User Profile Card includes: 1. Responsive design using Tailwind CSS classes 2. Indigo-800 and Blue-900 color scheme 3. Dark mode support with appropriate color adjustments 4. Profile picture with hover effect 5. User name, job title, and a brief description 6. Social media icons with hover effects 7. Skill tags with hover animations 8. Connect button with hover effect 9. Subtle animations and transitions for better user experience 10. Automatic dark mode detection based on system preferences Key features: - The background uses a gradient from Indigo-800 to Blue-900 - The 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 that changes color in dark mode - Social media icons and skill tags have hover effects - The Connect button uses Indigo-800 with a Blue-900 hover state - The entire card has a shadow effect that changes on hover - Dark mode is automatically applied based on system preferences This design provides a clean, professional look for a user profile card while incorporating the requested color scheme and maintaining good usability across different devices and color modes.

nejaa badr

2 years ago

2.5k
Author card
Author card for giving credit to the author of the Blog/Article. It has social media icons and user image

Prajwal Hallale

3 years ago

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

Simon Scheffer

3 years ago

15.7k
Social Media
Social Media button vertical dark style

sina

1 year ago

750
Profile Card
User profile card

Ajay Thakur

1 year ago

558
ApexCodeStudios.com Celestara Profile Odyssey
Get Access to 216+ Free Premium Tailwind CSS UI Components at apexcodestudios.com. Beautiful dual-style profile cards with cover images, stylish avatars, stats sections, social links, and follow buttons.

Apex Code Studios

6 months ago

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

Khalid

2 years ago

4.4k
Profile Card
Simple and Attractive Profile card in tailwind css

KULDEEP

1 year ago

1.1k