Home
Anum Shahana
Responsive Progress bars

Responsive Progress bars

This tailwind example is contributed by Anum Shahana, on 03-Dec-2024. Component is made with Tailwind CSS v3. It is responsive.

Progress Bar

Author Anum Shahana

1.2k

Fork Fullscreen

<div class="flex flex-col md:flex-row p-6 space-y-2 md:space-y-0 md:space-x-4 mt-20">
   
  <div class="w-[271px]">
    <div class="flex justify-between mb-1">
      <p class="text-gray-700 font-semibold">Web Design</p>
    </div>
    <div class="h-2 rounded-full overflow-hidden bg-gray-300">
      <div class="h-full rounded-full bg-orange-600 w-[75%]"></div>
    </div>
  </div>
  
   
  <div class="w-[271px]">
    <div class="flex justify-between mb-1">
      <p class="text-gray-700 font-semibold">Development</p>
    </div>
    <div class="h-2 rounded-full overflow-hidden bg-gray-300">
      <div class="h-full rounded-full bg-orange-600 w-[50%]"></div>
    </div>
  </div>

<div class="w-[271px]">
    <div class="flex justify-between mb-1">
      <p class="text-gray-700 font-semibold">SEO</p>
    </div>
    <div class="h-2 rounded-full overflow-hidden bg-gray-300">
      <div class="h-full rounded-full bg-orange-600 w-[85%]"></div>
    </div>
  </div>

<div class="w-[271px]">
    <div class="flex justify-between mb-1">
      <p class="text-gray-700 font-semibold">Marketing</p>
    </div>
    <div class="h-2 rounded-full overflow-hidden bg-gray-300">
      <div class="h-full rounded-full bg-orange-600 w-[60%]"></div>
    </div>
  </div>

<div class="w-[271px]">
    <div class="flex justify-between mb-1">
      <p class="text-gray-700 font-semibold">Content</p>
    </div>
    <div class="h-2 rounded-full overflow-hidden bg-gray-300">
      <div class="h-full rounded-full bg-orange-600 w-[90%]"></div>
    </div>
  </div>
</div>

Related Examples

Responsive Progress Bar
This progress bar visually represents proficiency in Web Design, showing an 85% skill level. The text labels above indicate the skill area on the left and the percentage on the right for easy interpretation.

Author:
Anum Shahana

1 year ago

1.4k
Radial Progress Indicator with TailwindCSS
A sleek and customizable radial progress indicator built with SVG and styled using TailwindCSS. The progress bar is animated with smooth transitions, featuring a circular background, dynamic progress, and centered text or optional imagery. Perfect for showcasing percentages, stats, or any progress-related metrics in your projects.

Author:
SHARIFUL ISLAM

8 months ago

1.7k
Multi-Step Form with Progress Indicator
reusable "Multi-Step Form with Progress Indicator" component built with HTML, CSS, and Tailwind CSS. It’s a practical component for forms like signups, surveys, or checkout processes.

Author:
Ayyamperumal S

9 months ago

1.7k
Progress bar

Author:
Rajesh Maheshwari

8 months ago

892
Animated Profile Card
Animated profile card with profile completion circle

Author:
Shivam Vishwakarma

9 months ago

1.4k
PrimeCorp | Professional Business Solutions
We deliver cutting-edge business solutions through strategic consulting, tailored services, and continuous support. Partner with us to optimize operations, drive growth, and achieve sustainable success in today's competitive market.

Author:
Code Master(Mfuranziza Dusabe Hamza)

5 months ago

695
Progress spinner

Author:
Md. Tofayel islam

1 year ago

2.9k
Amazing 3D Login and Registiration Aniamation Form
create a stunning 3D animated background with floating geometric shapes, particle effects, and interactive elements using React, Three.js, and Tailwind CSS. This will be fully responsive and visually captivating.

Author:
Nicole Shalom

5 months ago

785
Progress Bar
Simple Progress bar

Author:
Prajwal Hallale

3 years ago

10.4k
Gradient progress bar
A progress bar with gradient

Author:
Dujardin Emmanuel

6 months ago

341
Simple progress bar component

Author:
Prajwal Hallale

2 years ago

7.4k
Personal Portfolio Website
Nziza HAMZY 😎! Reka dukore full TailwindCSS Portfolio yuzuye na: Hero Section About Section Projects Section (cards) Contact Form Animations & hover effects Fully responsive for mobile

Author:
Code Master(Mfuranziza Dusabe Hamza)

2 months ago

428

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components