About us

This tailwind example is contributed by $@(\/)(\/)¥, on 09-Jan-2025. Component is made with Tailwind v3.4. It is responsive. It supports dark mode. similar terms for this example is about me

About us

$$@(\/)(\/)¥ profile image$

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

Tailwind v3.4 2.8k 3

Fork Fullscreen

<div class="w-full lg:h-screen h-full m-auto flex items-center justify-cetner py-20 bg-gray-50 dark:bg-gray-900">
    <div class="w-full h-full flex flex-col justify-center items-center sm:px-4 px-2">
        
        <div class="lg:w-[90%] w-full mx-auto flex flex-col lg:gap-6 lg:flex-row items-center justify-center ">
            <div class="relative">
                
                <img class="absolute z-20 lg:left-[2rem] -top-4 left-[1rem] lg:w-[8rem] lg:h-[8rem] sm:w-[6rem] sm:h-[6rem] w-[3rem] h-[3rem] rounded-full" src="https://images.unsplash.com/photo-1496483648148-47c686dc86a8?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHw3fHxmbG93ZXJ8ZW58MHwwfHx8MTcyMDk0OTQ2MHww&ixlib=rb-4.0.3&q=80&w=1080" alt="Side Image" />

<img class="absolute z-20 lg:top-[12rem] sm:top-[11rem] top-[5rem] sm:-left-[3rem] -left-[2rem] lg:w-[8rem] lg:h-[8rem] sm:w-[6rem] sm:h-[6rem] w-[3rem] h-[3rem] rounded-full" src="https://images.unsplash.com/photo-1558281033-19cead6981dc?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHwxMHx8Zmxvd2VyfGVufDB8MHx8fDE3MjA5NDk0NjB8MA&ixlib=rb-4.0.3&q=80&w=1080" alt="Side Image 2" />

<img class="absolute z-20 lg:top-[23rem] sm:top-[20.5rem] top-[10.5rem] left-[2rem] lg:w-[8rem] lg:h-[8rem] sm:w-[6rem] sm:h-[6rem] w-[3rem] h-[3rem] rounded-full" src="https://images.unsplash.com/photo-1490750967868-88aa4486c946?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHwxfHxmbG93ZXJ8ZW58MHwwfHx8MTcyMDk0OTQ2MHww&ixlib=rb-4.0.3&q=80&w=1080" alt="Side Image 3" />

<img
            class="rounded-full relative object-cover right-0 lg:w-[30rem] lg:h-[30rem] sm:w-[25rem] sm:h-[25rem] w-[12rem] h-[12rem] outline sm:outline-offset-[.77em] outline-offset-[.37em] outline-green-500"
            src="https://images.unsplash.com/photo-1507290439931-a861b5a38200?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHwxM3x8Zmxvd2VyfGVufDB8MHx8fDE3MjA5NDk0NjB8MA&ixlib=rb-4.0.3&q=80&w=1080" alt="About us" />
            </div>
            
            <div
                class="lg:w-[60%] p-4 w-full h-full shadow-xl shadow-green-300/40 flex flex-col justify-center items-center sm:px-6 px-4 rounded-xl">
                <h2 class="text-4xl text-center text-green-600 dark:text-green-400 font-bold px-4 py-1 md:mt-0 mt-10">
                    About Us
                </h2>
                <p class="md:text-3xl text-2xl text-center text-gray-800 dark:text-gray-200 font-bold my-5">We are
                    Petal Haven S.C.
                </p>
                <p class="md:text-xl sm:text-lg text-base mt-2 text-justify sm:px-2 dark:text-gray-300">At Petal Haven,
                    we believe in the transformative power of flowers. Our blooms are not just arrangements; they are
                    expressions of beauty, joy, and emotion. From elegant bouquets to enchanting floral designs, we
                    curate every creation with precision and care. Whether it's a celebration, a gesture of love, or a
                    moment of solace, Petal Haven's exquisite flowers speak a language of their own, bringing nature's
                    beauty to your doorstep. Experience the enchantment of Petal Haven and let flowers tell your story.
                </p>

<button class="lg:mt-10 mt-6 lg:px-6 px-4 lg:py-4 py-2 bg-green-600 rounded-sm lg:text-xl text-lg text-white font-semibold">Read More</button>

</div>

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

Related Examples

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

ABDESLAMI ACHRAF

2 years ago

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

Lekhraj Ghimire

1 year ago

1.4k
bugger delivary animation
this playground is responsive and animated bugger delivary

Bonimater

1 year ago

1.4k
About Us Component

KULDEEP

1 year ago

2.1k
Code Editor UI
Simple code editor prototype made with HTML and TailwindCSS. A lightweight template to explore and customize.

Indra

1 year ago

1k
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)

wavy kits

11 months ago

1.4k
basichtml
this is basic html

Anonymous

1 year ago

923
why choose us (features showcase) example

Erik Hyatt

3 years ago

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

Sachin Kannaujiya

1 year ago

1.6k
About Company Section – Animated & Responsive
A modern "About Us" section built with Tailwind CSS and Alpine.js, designed to highlight your company’s story, achievements, and values through a clean and animated layout. This component features smooth scroll animations, responsive design, and a balanced two-column layout — one for text content and one for an image with company stats. It’s perfect for corporate websites, SaaS platforms, or startup landing pages that want to showcase professionalism and credibility. ✨ Key Features Elegant fade-in and slide-up animations using Alpine.js Responsive grid layout optimized for all screen sizes Dark mode support built-in Dynamic stats display (years, team size, countries served) Clean Tailwind CSS design with easy customization

wavy kits

11 months ago

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

Abigail

3 years ago

10.7k
Innovative Rwanda-Canada Transport Services Website
Innovative Rwanda-Canada Transport Services Website

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.1k