User Card

This tailwind example is contributed by Md. Tofayel islam, on 28-Dec-2024. Component is made with Tailwind CSS v3. It is responsive.

Card

Author Md. Tofayel islam

618

Fork Fullscreen

<div class="flex items-center justify-center min-h-screen bg-gray-100">
    <div class="flex flex-col items-center w-full max-w-xs p-4 bg-white rounded-3xl md:flex-row">
        <div class="-mt-28 md:-my-16 md:-ml-32" style="clip-path: url(#roundedPolygon)">
        <img
            class="w-auto h-48"
            src="https://avatars.githubusercontent.com/u/57622665?s=460&u=8f581f4c4acd4c18c33a87b3e6476112325e8b38&v=4"
            alt="Ahmed Kamel"
        />
        </div>
        <div class="flex flex-col space-y-4">
        <div class="flex flex-col items-center md:items-start">
            <h2 class="text-xl font-medium">Mr.yel</h2>
            <p class="text-base font-medium text-gray-400">Full Stack Developer</p>
        </div>
        <div class="flex items-center justify-center space-x-3 md:justify-start">
          
            <a
            href="#"
            target="_blank"
            class="transition-transform transform hover:scale-125"
            >
            <span class="sr-only">Twitter</span>
            <svg
                aria-hidden="true"
                class="w-8 h-8 text-blue-500"
                fill="currentColor"
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
            >
                <path
                d="M19.633,7.997c0.013,0.175,0.013,0.349,0.013,0.523c0,5.325-4.053,11.461-11.46,11.461c-2.282,0-4.402-0.661-6.186-1.809 c0.324,0.037,0.636,0.05,0.973,0.05c1.883,0,3.616-0.636,5.001-1.721c-1.771-0.037-3.255-1.197-3.767-2.793 c0.249,0.037,0.499,0.062,0.761,0.062c0.361,0,0.724-0.05,1.061-0.137c-1.847-0.374-3.23-1.995-3.23-3.953v-0.05 c0.537,0.299,1.16,0.486,1.82,0.511C3.534,9.419,2.823,8.184,2.823,6.787c0-0.748,0.199-1.434,0.548-2.032 c1.983,2.443,4.964,4.04,8.306,4.215c-0.062-0.3-0.1-0.611-0.1-0.923c0-2.22,1.796-4.028,4.028-4.028 c1.16,0,2.207,0.486,2.943,1.272c0.91-0.175,1.782-0.512,2.556-0.973c-0.299,0.935-0.936,1.721-1.771,2.22 c0.811-0.088,1.597-0.312,2.319-0.624C21.104,6.712,20.419,7.423,19.633,7.997z"
                ></path>
            </svg>
            </a>
            <a
            href="https://github.com/yel-59"
            target="_blank"
            class="transition-transform transform hover:scale-125"
            >
            <span class="sr-only">Github</span>
            <svg
                aria-hidden="true"
                class="w-8 h-8 text-black"
                fill="currentColor"
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
            >
                <path
                fill-rule="evenodd"
                clip-rule="evenodd"
                d="M12.026,2c-5.509,0-9.974,4.465-9.974,9.974c0,4.406,2.857,8.145,6.821,9.465 c0.499,0.09,0.679-0.217,0.679-0.481c0-0.237-0.008-0.865-0.011-1.696c-2.775,0.602-3.361-1.338-3.361-1.338 c-0.452-1.152-1.107-1.459-1.107-1.459c-0.905-0.619,0.069-0.605,0.069-0.605c1.002,0.07,1.527,1.028,1.527,1.028 c0.89,1.524,2.336,1.084,2.902,0.829c0.091-0.645,0.351-1.085,0.635-1.334c-2.214-0.251-4.542-1.107-4.542-4.93 c0-1.087,0.389-1.979,1.024-2.675c-0.101-0.253-0.446-1.268,0.099-2.64c0,0,0.837-0.269,2.742,1.021 c0.798-0.221,1.649-0.332,2.496-0.336c0.849,0.004,1.701,0.115,2.496,0.336c1.906-1.291,2.742-1.021,2.742-1.021 c0.545,1.372,0.203,2.387,0.099,2.64c0.64,0.696,1.024,1.587,1.024,2.675c0,3.833-2.33,4.675-4.552,4.922 c0.355,0.308,0.675,0.916,0.675,1.846c0,1.334-0.012,2.41-0.012,2.737c0,0.267,0.178,0.577,0.687,0.479 C19.146,20.115,22,16.379,22,11.974C22,6.465,17.535,2,12.026,2z"
                ></path>
            </svg>
            </a>
        </div>
        </div>
    </div>

<div class="fixed bottom-5 right-5 flex items-center space-x-4">
  <a href="#" target="_blank" class="transition-transform transform hover:scale-125">
    <span class="sr-only">Twitter</span>
      <svg
         aria-hidden="true"
         class="w-8 h-8 text-blue-500"
         fill="currentColor"
         xmlns="http://www.w3.org/2000/svg"
         viewBox="0 0 24 24"
            >
      <path d="M19.633,7.997c0.013,0.175,0.013,0.349,0.013,0.523c0,5.325-4.053,11.461-11.46,11.461c-2.282,0-4.402-0.661-6.186-1.809 c0.324,0.037,0.636,0.05,0.973,0.05c1.883,0,3.616-0.636,5.001-1.721c-1.771-0.037-3.255-1.197-3.767-2.793 c0.249,0.037,0.499,0.062,0.761,0.062c0.361,0,0.724-0.05,1.061-0.137c-1.847-0.374-3.23-1.995-3.23-3.953v-0.05 c0.537,0.299,1.16,0.486,1.82,0.511C3.534,9.419,2.823,8.184,2.823,6.787c0-0.748,0.199-1.434,0.548-2.032 c1.983,2.443,4.964,4.04,8.306,4.215c-0.062-0.3-0.1-0.611-0.1-0.923c0-2.22,1.796-4.028,4.028-4.028 c1.16,0,2.207,0.486,2.943,1.272c0.91-0.175,1.782-0.512,2.556-0.973c-0.299,0.935-0.936,1.721-1.771,2.22 c0.811-0.088,1.597-0.312,2.319-0.624C21.104,6.712,20.419,7.423,19.633,7.997z"
            ></path>
    </svg>
  </a>
  <a href="#" target="_blank" class="transition-transform transform hover:scale-125">
    <span class="sr-only">Github</span>
      <svg
         aria-hidden="true"
         class="w-8 h-8 text-black"
         fill="currentColor"
         xmlns="http://www.w3.org/2000/svg"
         viewBox="0 0 24 24"
         >
        <path
              fill-rule="evenodd"
              clip-rule="evenodd"
              d="M12.026,2c-5.509,0-9.974,4.465-9.974,9.974c0,4.406,2.857,8.145,6.821,9.465 c0.499,0.09,0.679-0.217,0.679-0.481c0-0.237-0.008-0.865-0.011-1.696c-2.775,0.602-3.361-1.338-3.361-1.338 c-0.452-1.152-1.107-1.459-1.107-1.459c-0.905-0.619,0.069-0.605,0.069-0.605c1.002,0.07,1.527,1.028,1.527,1.028 c0.89,1.524,2.336,1.084,2.902,0.829c0.091-0.645,0.351-1.085,0.635-1.334c-2.214-0.251-4.542-1.107-4.542-4.93 c0-1.087,0.389-1.979,1.024-2.675c-0.101-0.253-0.446-1.268,0.099-2.64c0,0,0.837-0.269,2.742,1.021 c0.798-0.221,1.649-0.332,2.496-0.336c0.849,0.004,1.701,0.115,2.496,0.336c1.906-1.291,2.742-1.021,2.742-1.021 c0.545,1.372,0.203,2.387,0.099,2.64c0.64,0.696,1.024,1.587,1.024,2.675c0,3.833-2.33,4.675-4.552,4.922 c0.355,0.308,0.675,0.916,0.675,1.846c0,1.334-0.012,2.41-0.012,2.737c0,0.267,0.178,0.577,0.687,0.479 C19.146,20.115,22,16.379,22,11.974C22,6.465,17.535,2,12.026,2z"
              ></path>
    </svg>
  </a>
</div>

Related Examples

Card with image full width
This component is a card designed for showcasing featured blog posts. It includes the post title, a captivating image, category links, and author details.

Author:
Mr Robot

2 years ago

13k
Info Card with image
An info card with an image, a short title, and a short description.

Author:
Arya

2 years ago

12.3k
Professional Plan
Professional Plan

Author:
Muzammil Riaz

3 weeks ago

8
Card with sale ribbon

Author:
Fagundo67

2 years ago

11.1k
Elevated feature card

Author:
magersa

1 year ago

3.7k
Responsive Tailwind CSS Listing Cards
This is a collection of responsive listing cards built with Tailwind CSS, optimized for modern web applications. The component features a flexbox layout, ensuring seamless responsiveness across mobile, tablet, and laptop screens. Each card includes an image, title, and description, styled for both light and dark modes. Perfect for showcasing products, portfolio items, or blog posts.

Author:
Abhiraj

5 months ago

1.2k
Feature Card

Author:
Md. Tofayel islam

8 months ago

1.3k
Coming Soon Section
Simple and beautiful card for your showing on your projects (in development) home screen

Author:
Noob

2 years ago

9.7k
User profile card

Author:
Mr Robot

2 years ago

10.8k
Profile card
Profile card with social icons

Author:
Krishna Gudpalle

2 years ago

12.5k
Responsive Features Section
It's a Handy Ready to Use Responsive Features or Services Component with Dark Mode

Author:
Ragnar lodbrok

1 year ago

4.6k
Card
amazing card

Author:
Cristian

7 months ago

1.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components