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

2.5k

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

Tailwind AoPS Demo
Starter code for an interactive Tailwind Demo

Author:
Joseph Barron

1 year ago

4.1k
Card kpi Chart
Targetas kpi con graficas

Author:
Raul antonio de la cruz hernandez

3 months ago

471
Modern Responsive Pricing Section with Toggle
A sleek, responsive pricing section built with HTML and Tailwind CSS, showcasing three distinct plans (e.g., Free, Pro, Expert) in a card layout. It features a clean monthly/yearly toggle switch with savings indication, highlights a recommended plan with distinct styling and a badge, and uses checkmarks for clear feature comparison. The layout stacks vertically on smaller screens and transitions to a 3-column grid on large screens (lg breakpoint). Includes generic content for easy adaptation and a final "Compare Plans" button.

Author:
Hamza Atig

9 months ago

1.1k
Product Card

Author:
Maxim

10 months ago

1.7k
Clickable and Responsive Card Grid
It is designed to showcase and link to various topics or content categories.

Author:
R Thapa

2 years ago

11.2k
Thankyou Card

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

1 year ago

5.9k
Fancy blog post card

Author:
Mr Robot

3 years ago

12.7k
Feature cards with icons on top

Author:
Manon Daniel

2 years ago

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

Author:
Ragnar lodbrok

2 years ago

5.3k
Testimonials

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

10 months ago

1.7k
GitHub For you Feed
GitHub For you Feed Clone

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

1 year ago

2.4k
Elevated feature card

Author:
magersa

2 years ago

4.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components