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

Gaming Platforms Grid

ariaw

8 months ago

877
Card
amazing card

Cristian

1 year ago

2.5k
Best incamas to date

ORGIN_DREAMS

1 year ago

1.6k
Travel Landing Page: Australia

Maxim

1 year ago

2.9k
Créer une story
Créer une story

Omer fils ELENGA

9 months ago

1k
Card Product
Card Product for List Product

Ronny Camacho

8 months ago

775
Card post blog
Targetas para blog

Raul antonio de la cruz hernandez

10 months ago

705
CONTACT US - GET IN TOUCH - PORTFOLIO
Responsive "Contact us" section, dark-mode-friendly contact area featuring stylish cards with icons displaying essential contact details.

ABDO-SY

1 year ago

2.5k
Information card

Samuel Dawson

3 years ago

12.8k
card Alert - icons - glass

ABDO-SY

1 year ago

1.5k
Dynamic Service Showcase with Interactive Flip Cards
This component presents a visually engaging service section featuring interactive flip cards. Each service card displays an image on the front and reveals details on the back when hovered over. The layout is responsive, ensuring seamless adaptability across various screen sizes. The hover effect adds a modern and engaging touch, enhancing user interaction.

Vikas Kushwah

1 year ago

2.1k
Responsive Card Section With Hover Effect
added more cards with ui friendly

SAI BENDE

1 year ago

890