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

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

8 months ago

923
Innovative Rwanda-Canada Transport Services Website
Innovative Rwanda-Canada Transport Services Website

Author:
Code Master(Mfuranziza Dusabe Hamza)

5 months ago

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

Author:
Lekhraj Ghimire

7 months ago

734
Boimator welcoming back
Boimator welcoming back

Author:
Bonimater

5 months ago

412
Coming Soon Countdown Section – Animated & Responsive
A beautifully designed "Coming Soon" landing section built with Tailwind CSS and Alpine.js, perfect for startups, SaaS platforms, and product launches. This component features a live countdown timer, smooth fade-in animations, and floating gradient effects for a futuristic, engaging look. The layout adapts seamlessly to all screen sizes and supports dark mode, creating a professional pre-launch experience that builds anticipation and excitement. ✨ Key Features ⏳ Dynamic countdown timer (days, hours, minutes, seconds) 🎨 Animated gradient orbs for a vibrant background effect 🌙 Dark mode support included 💨 Smooth entrance animations using Alpine.js 📱 Fully responsive design for all devices 🔗 Social media icons to keep your audience connected 💡 Perfect for: Coming Soon or Under Construction pages Product and SaaS pre-launch sites Portfolio or agency landing pages Event or app launch countdowns

Author:
Anonymous

2 months ago

156
Responsive portfolio with dark mode
responsive and support dark mode .portfolio website

Author:
ABDESLAMI ACHRAF

1 year ago

3.7k
Sleek & Modern Tailwind CSS Card with Vibrant Gradient
✔ Vibrant Gradient Background 🎨 ✔ Soft Shadows & Hover Scaling ✨ ✔ Dark Mode Friendly 🌙 ✔ Minimalist & Clean UI 💎

Author:
Sachin Kannaujiya

1 year ago

1.2k
basichtml
this is basic html

Author:
Anonymous

7 months ago

426
Our Services Section – Animated & Responsive
A modern and dynamic “Services” section built with Tailwind CSS and Alpine.js, designed to showcase your company’s main offerings with clean visuals and engaging animations. This component uses smooth fade and slide animations to reveal each service card as it comes into view. Each card highlights a core business area — Web Development, Mobile Apps, and Cloud Solutions — with beautiful hover effects, icons, and descriptive lists. Perfect for SaaS websites, agencies, and startups looking to present their services in a visually appealing, professional, and responsive layout. Key Features Smooth scroll-triggered animations with Alpine.js Responsive grid layout (mobile → desktop ready) Built with Tailwind CSS for fast customization Dark mode support included Interactive hover effects for each service card Ideal for corporate, SaaS, or portfolio websites 💡 Services Included 🌐 Web Development (Responsive, SEO-friendly, Optimized) 📱 Mobile Apps (Cross-platform, iOS & Android) ☁️ Cloud Solutions (AWS, Azure, Auto-scaling, Security)

Author:
wavy kits

3 months ago

618
about video
about kelaplus video

Author:
Omer fils ELENGA

6 months ago

774
About me section with image

Author:
Kofi Osei

2 years ago

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

Author:
ishimwe shadad

8 months ago

1.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components