User about me / introduction card

About me card with an image and a short introduction

This tailwind example is contributed by Abigail, on 19-Feb-2023. Component is made with Tailwind v3.4. It is responsive. similar terms for this example is about me

About us

Author Abigail

Tailwind v3.4 10.7k 9

Fork Fullscreen

<div class="w-full max-w-7xl px-4 mx-auto sm:px-8 mt-24">
    <blockquote class="relative grid items-center bg-white shadow-xl md:grid-cols-3 rounded-xl">
        
        <img class="hidden object-cover w-full h-full rounded-l-xl md:block" style="clip-path: polygon(0 0%, 100% 0%, 75% 100%, 0% 100%);" src="https://randomuser.me/api/portraits/men/68.jpg">

<article class="relative p-6 md:p-8 md:col-span-2">
            <svg class="absolute top-0 right-0 hidden w-24 h-24 -mt-12 -mr-12 text-primary-600 md:block" width="256"
                height="256" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path
                    d="M65.44 153.526V149.526H61.44H20.48C11.3675 149.526 4 142.163 4 133.105V51.4211C4 42.3628 11.3675 35 20.48 35H102.4C111.513 35 118.88 42.3628 118.88 51.4211V166.187C118.88 195.935 95.103 220.165 65.44 220.979V153.526ZM198.56 153.526V149.526H194.56H153.6C144.487 149.526 137.12 142.163 137.12 133.105V51.4211C137.12 42.3628 144.487 35 153.6 35H235.52C244.633 35 252 42.3628 252 51.4211V166.187C252 195.935 228.223 220.165 198.56 220.979V153.526Z"
                    stroke="currentColor" stroke-width="8"></path>
            </svg>

<div class="space-y-8">
                <p class="text-base sm:leading-relaxed md:text-2xl">
                    Hi, I'm John. I'm a 35-year-old software engineer with a passion for creating innovative solutions.
                    I graduated with a degree in Computer Science from a prestigious university and have been working in
                    the tech industry for over a decade. Throughout my career, I have gained extensive experience in
                    programming languages like Python, Java, and C++. I thrive in challenging environments and enjoy
                    collaborating with teams to develop cutting-edge software applications.
                </p>

<footer class="flex items-center space-x-4 md:space-x-0">
                    <img class="w-12 h-12 rounded-full md:hidden" src="https://randomuser.me/api/portraits/men/68.jpg">
                    <span class="font-bold text-lg">John doe</span>
                </footer>
            </div>
        </article>
    </blockquote>
</div>

Related Examples

About me section with image

Kofi Osei

3 years ago

25.4k
About me section

Steven Kuhn

3 years ago

19.2k
Simple About Us section

Abigail

3 years ago

15.6k
About us section

Mr Robot

3 years ago

20.5k
why choose us (features showcase) example

Erik Hyatt

3 years ago

17.9k
Portfolio About & Skills

$$@(\/)(\/)¥$ $@(\/)(\/)¥

1 year ago

2.7k
About us

$$@(\/)(\/)¥$ $@(\/)(\/)¥

1 year ago

2.9k
portfolio
Complete Portfolio UI Kit with hero, about, skills, projects, testimonials, contact form, and footer. Fully responsive and dark mode supported using Tailwind CSS.

Lekhraj Ghimire

1 year ago

1.4k
Boimator welcoming back
Boimator welcoming back

Bonimater

1 year ago

1.1k
Why Us section with hover animation
Why to choose us section, responsive and hove animation

Amit Pachange

2 years ago

5.8k
About Us

ariaw

1 year ago

1.5k
bugger delivary animation
this playground is responsive and animated bugger delivary

Bonimater

1 year ago

1.4k

Browse by topic

Explore components by Tags

Jump straight to the UI pattern you need.

Footer Header Card Article Avatar FAQ Banner Blog Breadcrumb Button Call to Action Form Carousel Contact us Error page Feature Gallery Hero Input Spinner Login Modal Pagination Pricing Profile

Can't find it?

Didn't find the component you were looking for?

Search across 3,000+ community-built components and grab the code in seconds.