Home
Steven Kuhn
About me section

About me section

This tailwind example is contributed by Steven Kuhn, on 30-Dec-2022. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example is about me

About us

Author Steven Kuhn

18.3k

15

Fork Fullscreen

<section class="pt-10 overflow-hidden bg-gray-50 dark:bg-gray-800 md:pt-0 sm:pt-16 2xl:pt-16">
    <div class="px-4 mx-auto sm:px-6 lg:px-8 max-w-7xl">
        <div class="grid items-center grid-cols-1 md:grid-cols-2">

<div>
                <h2 class="text-3xl font-bold leading-tight text-black dark:text-white sm:text-4xl lg:text-5xl">Hey 👋 I
                    am
                    <br class="block sm:hidden" />Jenny Carter
                </h2>
                <p class="max-w-lg mt-3 text-xl leading-relaxed text-gray-600 dark:text-gray-300 md:mt-8">
                    Amet minim mollit non deserunt
                    ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit.
                    Exercitation veniam consequat sunt nostrud amet.
                </p>

<p class="mt-4 text-xl text-gray-600 dark:text-gray-300 md:mt-8">
                    <span class="relative inline-block">
                        <span class="absolute inline-block w-full bottom-0.5 h-2 bg-yellow-300 dark:bg-gray-900"></span>
                    <span class="relative"> Have a question? </span>
                    </span>
                    <br class="block sm:hidden" />Ask me on <a href="#" title=""
                        class="transition-all duration-200 text-sky-500 dark:text-sky-400 hover:text-sky-600 dark:hover:text-sky-500 hover:underline">Twitter</a>
                </p>
            </div>

<div class="relative">
                <img class="absolute inset-x-0 bottom-0 -mb-48 -translate-x-1/2 left-1/2" src="https://cdn.rareblocks.xyz/collection/celebration/images/team/1/blob-shape.svg" alt="" />

<img class="relative w-full xl:max-w-lg xl:mx-auto 2xl:origin-bottom 2xl:scale-110" src="https://cdn.rareblocks.xyz/collection/celebration/images/team/1/business-woman.png" alt="" />
            </div>

</div>
    </div>
</section>

Related Examples

About me section with image

Author:
Kofi Osei

2 years ago

24.9k
About us section

Author:
Mr Robot

3 years ago

20k
Simple About Us section

Author:
Abigail

3 years ago

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

Author:
Abigail

3 years ago

10.3k
why choose us (features showcase) example

Author:
Erik Hyatt

2 years ago

17.2k
About us card

Author:
Sienna

3 years ago

11.8k
Testimonial that What Client Says

Author:
Abdul Baset Bappy

8 months ago

974
Simple web portfolio
The portfolio includes all required sections (Hero, Projects, About, Contact) with professional styling, and I've added some premium touches like social media icons, a sticky navigation, and beautiful gradient effects that make it feel cutting-edge and engaging.

Author:
Rathanak Phan

8 months ago

1.2k
about video
about kelaplus video

Author:
Omer fils ELENGA

7 months ago

830
about page
about page

Author:
Omer fils ELENGA

3 months ago

261
Boimator welcoming back
Boimator welcoming back

Author:
Bonimater

6 months ago

472
Social Proof
Composant de preuve sociale👌

Author:
Ousmane CISSE

4 months ago

362

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ 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 Free CSS Components

© 2026 TailwindFlex. All Rights Reserved.

v1.12