Card for user contact

This tailwind example is contributed by achelton pambo, on 24-Jul-2024. Component is made with Tailwind v3.4. It is responsive.

Card

Author achelton pambo

Tailwind v3.4 3.2k 11

Fork Fullscreen

<h1 class="text-xl font-semibold">acheltonzuzi@gmail.com</h1>
    </div>

<p>Software Developer</p>

</div>
    <div class="flex gap-2 items-center">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-4">
        <path fill-rule="evenodd"
          d="M1.5 4.5a3 3 0 0 1 3-3h1.372c.86 0 1.61.586 1.819 1.42l1.105 4.423a1.875 1.875 0 0 1-.694 1.955l-1.293.97c-.135.101-.164.249-.126.352a11.285 11.285 0 0 0 6.697 6.697c.103.038.25.009.352-.126l.97-1.293a1.875 1.875 0 0 1 1.955-.694l4.423 1.105c.834.209 1.42.959 1.42 1.82V19.5a3 3 0 0 1-3 3h-2.25C8.552 22.5 1.5 15.448 1.5 6.75V4.5Z"
          clip-rule="evenodd" />
      </svg>
      <p class="text-sm">+244 949252584</p>

</div>
  </div>
  <div
    class="w-full  shadow-xl p-5  bg-gradient-to-r from-blue-900 via-sky-500 to-blue-900 rounded-lg text-white space-y-2">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-16">
      <path fill-rule="evenodd"
        d="M18.685 19.097A9.723 9.723 0 0 0 21.75 12c0-5.385-4.365-9.75-9.75-9.75S2.25 6.615 2.25 12a9.723 9.723 0 0 0 3.065 7.097A9.716 9.716 0 0 0 12 21.75a9.716 9.716 0 0 0 6.685-2.653Zm-12.54-1.285A7.486 7.486 0 0 1 12 15a7.486 7.486 0 0 1 5.855 2.812A8.224 8.224 0 0 1 12 20.25a8.224 8.224 0 0 1-5.855-2.438ZM15.75 9a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z"
        clip-rule="evenodd" />
    </svg>

<h1 class="text-2xl font-bold">Achelton Pambo</h1>
    <div class="flex gap-3 items-center">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-6">
        <path fill-rule="evenodd"
          d="M1.5 7.125c0-1.036.84-1.875 1.875-1.875h6c1.036 0 1.875.84 1.875 1.875v3.75c0 1.036-.84 1.875-1.875 1.875h-6A1.875 1.875 0 0 1 1.5 10.875v-3.75Zm12 1.5c0-1.036.84-1.875 1.875-1.875h5.25c1.035 0 1.875.84 1.875 1.875v8.25c0 1.035-.84 1.875-1.875 1.875h-5.25a1.875 1.875 0 0 1-1.875-1.875v-8.25ZM3 16.125c0-1.036.84-1.875 1.875-1.875h5.25c1.036 0 1.875.84 1.875 1.875v2.25c0 1.035-.84 1.875-1.875 1.875h-5.25A1.875 1.875 0 0 1 3 18.375v-2.25Z"
          clip-rule="evenodd" />
      </svg>

<p class="font-semibold">Africell</p>
    </div>

<p>Software Developer</p>

</div>
  </div>
</div>
<div class="group">

<h1 class="text-xl font-semibold">acheltonzuzi@gmail.com</h1>
    </div>

<p>Software Developer</p>

<p class="font-semibold">Africell</p>
    </div>

<p>Software Developer</p>

</div>
  </div>
</div>
<div class="group">

<h1 class="text-xl font-semibold">acheltonzuzi@gmail.com</h1>
    </div>

<p>Software Developer</p>

<p class="font-semibold">Africell</p>
    </div>

<p>Software Developer</p>

</div>
  </div>
</div>

</div>

Related Examples

Responsive Working Process Section
This modern and responsive "Our Working Process" section adapts seamlessly to all screen sizes, ensuring a smooth user experience. The design follows a structured step-by-step layout with clear typography, bold colors, and interactive elements, making it perfect for showcasing business processes or workflows.

ABDO-SY

1 year ago

1.6k
Article card

Sienna

3 years ago

13.4k
content section

Crimson

1 year ago

1.6k
test deepseek ticket
test deepseek ticket

Omer fils ELENGA

3 weeks ago

19
Semi transparent Info card

Prajwal Hallale

3 years ago

11.2k
Instagram Post UI Mockup
A static HTML and Tailwind CSS component that visually replicates the user interface of an Instagram post. This mockup includes the post header (avatar, username, options), image area, action buttons (like, comment, share, save), like count, caption, and comment section. It features responsive constraints and supports both light and dark mode, closely mimicking the look and feel of the actual Instagram app. Ideal for UI prototyping, style guides, or frontend development practice.

Hamza Atig

1 year ago

2.2k
pricing card
This frontend template is designed for a website that provides software services and open-source code to users. It serves as a clean, modern UI for browsing, searching, and downloading open-source projects. Building with HTML, tailwindcss for CSS ,

Ahmath S.

1 year ago

969
Beautiful info cards
Responsive and minimal design

Amit Pachange

3 years ago

11k
card
best responsive tailwind card

irahoza daniel

1 year ago

1.8k
Highlights - Speakers Section

ABDO-SY

1 year ago

1.4k
offer card

ABDO-SY

1 year ago

1.5k
payment card
A payment card is a type of card issued by a financial institution (like a bank) that allows the cardholder to make financial transactions. These transactions can include purchasing goods and services, withdrawing cash, or transferring money. Here’s a description based on the main types of payment cards:

dev-fab250

1 year ago

1.4k