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

Social Proof
Composant de preuve sociale👌

Author:
Ousmane CISSE

5 months ago

364
Simple progress bar component

Author:
Prajwal Hallale

2 years ago

7.7k
Responsive Working Process Section
This modern and responsive "Our Working Process" section adapts seamlessly to all screen sizes, ensuring a smooth user experience. The design follows a structured step-by-step layout with clear typography, bold colors, and interactive elements, making it perfect for showcasing business processes or workflows.

Author:
ABDO-SY

11 months ago

1.1k
progress bar

Author:
Md. Tofayel islam

1 year ago

1.4k
progress-bar with Tailwind CSS and Alpinejs

Author:
Quêmia

1 year ago

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

7 months ago

725
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)

10 months ago

971
Gradient progress bar

Author:
Kofi Osei

3 years ago

15.4k
Working reading progress bar
show how much of the page has been scrolled

Author:
Freja Jensen

3 years ago

13k
Portfolio About & Skills

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

1 year ago

2.5k
progress-bar with Tailwind CSS and Alpinejs

Author:
Michael Andreuzza

1 year ago

2.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components