Home
Abigail
User about me / introduction card

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 CSS v3. It is responsive. similar terms for this example is about me

About us

Author Abigail

9k

6

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

Author:
Kofi Osei

1 year ago

21.8k
About me section

Author:
Steven Kuhn

2 years ago

15.9k
Simple About Us section

Author:
Abigail

1 year ago

12.5k
About us section

Author:
Mr Robot

2 years ago

17k
why choose us (features showcase) example

Author:
Erik Hyatt

1 year ago

15k
Responsive portfolio with dark mode
responsive and support dark mode .portfolio website

Author:
ABDESLAMI ACHRAF

3 months ago

1.5k
About Us
This The About Us Component with the tailwind class and some animation by tailwind and best about us page you can modify it and content is for now only clinic but you can ad your content

Author:
Sahil Sasapara

7 months ago

2.9k
canvas fully covers
canvas fully covers

Author:
ABDESLAMI ACHRAF

1 month ago

897
Portfolio About & Skills

Author:
Samuel Abera

6 days ago

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

Author:
Amit Pachange

8 months ago

3k
Questionnaire Section

Author:
Samuel Abera

2 weeks ago

75
Flour mill website landing page template
flour mill and services template website which comprise of many sections like about us, featured products, why us, visit us

Author:
Amit Pachange

8 months ago

8.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 1900+ components

TailwindFlex.com

Tailwindflex.com is a free Tailwind CSS examples library. It's a one-stop destination for ready-made Tailwind CSS components and templates.

Contact

Email: admin@tailwindflex.com

Resources

Tailwind CSS Gradient Generator Free Bootstrap CSS Components

© 2025 TailwindFlex. All Rights Reserved.

v1.1