Home
achelton pambo
Card for user contact

Card for user contact

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

Card

Author achelton pambo

1.8k

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>