Home
Alif Bima Pradana
About - UI Components

About - UI Components

Add an About Section to your website or application using Tailwind CSS. These About Sections are easy to use and fully customizable according to your brand's design. These Tailwind UI components are ready to use and customizable.

This tailwind example is contributed by Alif Bima Pradana, on 07-Feb-2026. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example is about me

About us

Author Alif Bima Pradana

Fork Fullscreen

<section class="flex flex-col md:flex-row items-center justify-center gap-10 max-md:px-4 mt-40">
    <div class="relative shadow-2xl shadow-indigo-600/40 rounded-2xl overflow-hidden shrink-0">
        <img class="max-w-md w-full object-cover rounded-2xl"
            src="https://images.unsplash.com/photo-1531497865144-0464ef8fb9a9?q=80&w=451&h=451&auto=format&fit=crop"
            alt="">
        <div class="flex items-center gap-1 max-w-72 absolute bottom-8 left-8 bg-white p-4 rounded-xl">
            <div class="flex -space-x-4 shrink-0">
                <img src="https://images.unsplash.com/photo-1633332755192-727a05c4013d?q=80&w=200" alt="image"
                    class="size-9 rounded-full border-[3px] border-white hover:-translate-y-1 transition z-1">
                <img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?q=80&w=200" alt="image"
                    class="size-9 rounded-full border-[3px] border-white hover:-translate-y-1 transition z-[2]">
                <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?q=80&w=200&h=200&auto=format&fit=crop"
                    alt="image"
                    class="size-9 rounded-full border-[3px] border-white hover:-translate-y-1 transition z-[3]">
                <div
                    class="flex items-center justify-center text-xs  text-white size-9 rounded-full border-[3px] border-white bg-indigo-600 hover:-translate-y-1 transition z-[4]">
                    50+
                </div>
            </div>
            <p class="text-sm font-medium text-slate-800">Join our developer community</p>
        </div>
    </div>
    <div class="text-sm text-slate-600 max-w-lg">
        <h1 class="text-xl uppercase font-semibold text-slate-700">What we do?</h1>
        <div class="w-24 h-[3px] rounded-full bg-gradient-to-r from-indigo-600 to-[#DDD9FF]"></div>
        <p class="mt-8">PrebuiltUI helps you build faster by transforming your design vision into fully functional,
            production-ready UI components. </p>
        <p class="mt-4">Whether you're launching a SaaS app, landing page, or dashboard, our collection of Tailwind
            CSS components is crafted to boost your development speed and improve user experience.</p>
        <p class="mt-4">From UI design systems to automation-ready layouts, PrebuiltUI empowers you to build
            beautifully and scale effortlessly.</p>
        <a href="#" class="flex items-center w-max gap-2 mt-8 hover:-translate-y-0.5 transition bg-gradient-to-r from-indigo-600 to-[#8A7DFF] py-3 px-8 rounded-full text-white">
            <span>Read more</span>
            <svg width="13" height="12" viewBox="0 0 13 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path
                    d="M12.53 6.53a.75.75 0 0 0 0-1.06L7.757.697a.75.75 0 1 0-1.06 1.06L10.939 6l-4.242 4.243a.75.75 0 0 0 1.06 1.06zM0 6v.75h12v-1.5H0z"
                    fill="#fff" />
            </svg>
        </a>
    </div>
</section>

Related Examples

Donate Hero section
Best New tailwindcss,help save the children

Author:
ORGIN_DREAMS

9 months ago

709
thyis is my play ground
this playground is responsive

Author:
bonheur dev

9 months ago

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

Author:
Abigail

3 years ago

10.3k
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

1 year ago

15k
Portfolio About & Skills

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

1 year ago

2.4k
About us card

Author:
Sienna

3 years ago

11.8k
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

1 year ago

4.9k
Tailwind Flex Component: Responsive Testimonial Section UI
A clean, modern, and fully responsive Testimonial Section built using Tailwind CSS and Flexbox. Ideal for portfolios, agency websites, SaaS landing pages, or any modern UI project. This reusable component includes user images, job titles, and quotes—perfect for showcasing feedback and adding trust to your UI.

Author:
Muhammad Umair Arshad

9 months ago

1.1k
Synth Mind
This is about page of an ai of Syntmind ai

Author:
ishimwe shadad

9 months ago

1.8k
Boimator welcoming back
Boimator welcoming back

Author:
Bonimater

6 months ago

472
why choose us (features showcase) example

Author:
Erik Hyatt

2 years ago

17.2k
Questionnaire Section

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

1 year ago

1.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components