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

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

The Free AI Tools Grid Section (210+ Tools, No Signup)
A responsive and SEO-optimized grid section showcasing over 210 free AI tools. Designed with Tailwind CSS, fully responsive, fast-loading, and built for high user engagement. No sign-up required, privacy-friendly, and optimized for performance and discoverability.https://www.thefreeaitools.com/

Author:
Achraf Testq

2 weeks ago

307
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

1 year ago

3k
Progress bars

Author:
Sophia Baker

3 years ago

10.9k
The Free AI Tools Grid Section (210+ Tools, No Signup)
A responsive and SEO-optimized grid section showcasing over 210 free AI tools. Designed with Tailwind CSS, fully responsive, fast-loading, and built for high user engagement. No sign-up required, privacy-friendly, and optimized for performance and discoverability.https://www.thefreeaitools.com/

Author:
Hasan AlDoy (McDoy)

1 week ago

64
Social Proof
Composant de preuve sociale👌

Author:
Ousmane CISSE

6 months ago

364
Gradient progress bar
A progress bar with gradient

Author:
Dujardin Emmanuel

1 year ago

881
Skill showcase section for resume / porfolio website
show skill progression

Author:
Ava Brown

2 years ago

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

1 year ago

2.3k
Progress spinner

Author:
Md. Tofayel islam

2 years ago

3.1k
chat bar
live chat

Author:
gidy

11 months ago

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

11 months ago

1k
Progress Bar
Simple Progress bar

Author:
Prajwal Hallale

3 years ago

10.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components