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.2k

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