About me section with image

This tailwind example is contributed by Kofi Osei, on 14-Mar-2023. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Author box, User information,about me

Profile About us

Author Kofi Osei

Tailwind v3.4 25.3k 13

Fork Fullscreen

<main class="mt-10 mx-auto max-w-7xl px-4 sm:mt-12 sm:px-6 md:mt-16 lg:mt-20 lg:px-8 xl:mt-28">
                <div class="sm:text-center lg:text-left">
                    <h2 class="my-6 text-2xl tracking-tight font-extrabold text-gray-900 sm:text-3xl md:text-4xl">
                        About me
                    </h2>

<p>
                        Donec porttitor, enim ut dapibus lobortis, lectus sem tincidunt dui, eget ornare lectus ex non
                        libero. Nam rhoncus diam ultrices porttitor laoreet. Ut mollis fermentum ex, vel viverra lorem
                        volutpat sodales. In ornare porttitor odio sit amet laoreet. Sed laoreet, nulla a posuere
                        ultrices, purus nulla tristique turpis, hendrerit rutrum augue quam ut est. Fusce malesuada
                        posuere libero, vitae dapibus eros facilisis euismod. Sed sed lobortis justo, ut tincidunt
                        velit. Mauris in maximus eros.
                    </p>
                </div>
            </main>
        </div>
    </div>
    <div class="lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2">
        <img class="h-56 w-full object-cover object-top sm:h-72 md:h-96 lg:w-full lg:h-full" src="https://cdn.pixabay.com/photo/2016/03/23/04/01/woman-1274056_960_720.jpg" alt="">
    </div>
</div>

Related Examples

About us section

Mr Robot

3 years ago

20.5k
About me section

Steven Kuhn

3 years ago

19.2k
Simple About Us section

Abigail

3 years ago

15.4k
User Profile Card
Full-page Profile card

Prashant

4 years ago

20.1k
Basic Resume template
simple and clean layout that provides a professional look.

R.P Ketan

3 years ago

28.1k
why choose us (features showcase) example

Erik Hyatt

3 years ago

17.9k
User about me / introduction card
About me card with an image and a short introduction

Abigail

3 years ago

10.7k
User profile card with Cover Image

Noob

3 years ago

33.8k
User Profile Card
The card features a user's profile picture, name, location, and options for interactions. It has a clean and modern design with rounded edges and icons for user engagement. It also has support for dark mod:

Prashant

4 years ago

65.6k
Modern resume template
modern resume template with data

Amit Pachange

3 years ago

23.3k
Show user details

Lucas Martinez

3 years ago

26.2k
User profile card with social icons
Showcases a user's profile information along with links to their various social media accounts.

Simon Scheffer

3 years ago

15.7k
My Personal Landing page
This HTML document showcases Aydin Vesali Moghaddam's personal portfolio, highlighting his journey in web development. The page features a responsive design that adapts to various screen sizes, ensuring a seamless user experience across devices. It includes a personal introduction, a brief overview of Aydin's tech journey, and a contact form for visitors to subscribe to updates. Additionally, the page provides links to Aydin's Discord, website, and Twitter, offering multiple avenues for connecting and staying updated on his projects.

AyDin VM

2 years ago

6.7k
User | Author profile card

Computer guy

2 years ago

8.3k
Profile card

Mr Robot

3 years ago

13.4k
Stylish profile card with a hover effect

Anonymous

3 years ago

9.7k
Testimonial card with image

Simon Scheffer

3 years ago

12.8k
User profile card

Mr Robot

3 years ago

12k