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

331

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

10 months ago

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

3 months ago

845
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

2 months ago

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

Author:
ORGIN_DREAMS

1 week ago

40
Responsive CTA
Tailwind CTA card

Author:
Dika Rahman

1 year ago

1.8k
Jumbotron card

Author:
Sienna

2 years ago

11.2k
Product review card

Author:
Rama krishnan Subramanian

7 months ago

1.1k
Feature Card
Shows off a feature, great for homepages and grid layout, or can be used in dashboards for "example use" grids. Enjoy! Part of the Coastal UI collection.

Author:
Coastal UI

1 month ago

215
Take a Survey CTA section

Author:
JaxStone

2 years ago

10.6k
Fancy underline

Author:
Simon Scheffer

2 years ago

11.4k
Concert ticket

Author:
Elijah Davis

2 years ago

12.9k
Multi Step form with javascript
A Beautiful multi step form using HTML CSS and JS

Author:
Walid Ahmad

7 months ago

803

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components