Home
Abdul Baset Bappy
Responsive About Section with Tailwind CSS

Responsive About Section with Tailwind CSS

Built a sleek and fully responsive About Section for my portfolio using Tailwind CSS! 🚀 Designed for smooth adaptability across all screen sizes with a modern and minimal aesthetic. Perfect for showcasing skills, experience, and a personal touch!

This tailwind example is contributed by Abdul Baset Bappy, on 26-Mar-2025. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example are CTA,banner,about me

Call to Action Other About us

Author Abdul Baset Bappy

1.1k

Fork Fullscreen

<div class="w-full md:w-7/12 text-center md:text-left relative">
    
    <div class="absolute left-[40%] -top-6 md:-left-16  lg:top-0 md:top-6 rotate-0 md:rotate-[-90deg] text-sm tracking-widest">
      <div class="flex items-center justify-center gap-2">
        <div class="w-16 h-[2px] bg-white"></div>
        <p>MORE ABOUT</p>
      </div>
    </div>

<h2 class="text-3xl md:text-5xl font-bold leading-tight mb-4 pl-10">
      A Passionate <br> Software Developer
    </h2>

<p class="text-gray-300 mb-6 text-sm md:text-base leading-relaxed max-w-2xl mx-auto md:mx-0">
      I’m Abdul Baset, a passionate Software Developer with expertise in Vue.js, Laravel, & modern web technologies. I specialize in building user-friendly applications that solve real-world problems. With a deep understanding of frontend development, state management, and API integration, I can bring your ideas to life.
    </p>

<div class="flex flex-col sm:flex-row gap-4 justify-center md:justify-start">
      <a href="#" class="bg-tertiary text-white font-semibold py-2 px-4 rounded-lg hover:bg-tertiary/80 text-center">
        See Projects
      </a>
      <a href="#" class="border border-tertiary text-white font-semibold py-2 px-4 rounded-lg hover:bg-tertiary/10 text-center">
        More Details
      </a>
    </div>
  </div>
</section>

Related Examples

Chat Bot
Simulation of a chat bot that can be used for conversations as a sketch idea

Author:
Ameth Galarcio

1 year ago

3.2k
Modern Responsive Footer with Tailwind CSS
This sleek and modern responsive footer is built using HTML and Tailwind CSS. It features three sections: brand information, useful links, and social media icons. The footer includes smooth hover effects, subtle fade-in animations, and a fully responsive design that adapts seamlessly to different screen sizes. Perfect for websites looking for a professional and stylish footer section.

Author:
Ayyamperumal S

8 months ago

1.4k
Clean & Responsive Footer Design with Tailwind CSS With CTA Button
modern and responsive footer built with Tailwind CSS to enhance website navigation, accessibility, and user experience. Featuring quick links, social media icons, copyright info, and a sleek layout, this SEO-friendly footer improves engagement and usability across all devices. Perfect for portfolios, business websites, and eCommerce stores!

Author:
Abdul Baset Bappy

6 months ago

645
ArtoGallery
Explore a curated selection of contemporary and classic artwork, connecting collectors and creators in an inspiring online space.

Author:
ORGIN_DREAMS

4 months ago

740
Heading Style

Author:
KULDEEP

4 months ago

352
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

4 months ago

599
Testimonial that What Client Says

Author:
Abdul Baset Bappy

3 months ago

433
Hero Section
Responsive Hero Section for you Project Background Image: A stunning, high-quality Unsplash photo that creates a unique visual impact. Overlay: Semi-transparent black overlay with blur effect for readability and a modern aesthetic. Content Area: Centered with a gradient background overlay for contrast, bold headline, engaging subtext. Buttons: Vibrant gradient and clean border with smooth hover animations to draw attention. Responsive Design: Looks great on all screen sizes with adaptable padding and font sizes.

Author:
KULDEEP

3 months ago

918
About Us Component

Author:
KULDEEP

3 months ago

668
Contact us Form with Responsive

Author:
KULDEEP

3 months ago

319
about video
about kelaplus video

Author:
Omer fils ELENGA

3 months ago

336
CTA Responsive
Gradient Style CTA

Author:
KULDEEP

3 months ago

252

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components