Getting started

Components

Navigation

Forms

Tailwind progress bars

Responsive progress bars built with Tailwind. Progress bar is an indicator showing the completion progress, i.e. task or time. Use it with percents, steps & other options.

Basic example

        
            
    <div class="w-full bg-gray-200 h-1">
      <div class="bg-blue-600 h-1" style="width: 45%"></div>
    </div>

Width

        
            
    <div class="w-full bg-gray-200 h-1 mb-6">
      <div class="bg-blue-600 h-1" style="width: 0%"></div>
    </div>
    <div class="w-full bg-gray-200 h-1 mb-6">
      <div class="bg-blue-600 h-1" style="width: 25%"></div>
    </div>
    <div class="w-full bg-gray-200 h-1 mb-6">
      <div class="bg-blue-600 h-1" style="width: 50%"></div>
    </div>
    <div class="w-full bg-gray-200 h-1 mb-6">
      <div class="bg-blue-600 h-1" style="width: 75%"></div>
    </div>
    <div class="w-full bg-gray-200 h-1">
      <div class="bg-blue-600 h-1" style="width: 100%"></div>
    </div>

Labels

25%
        
            
    <div class="w-full bg-gray-200 rounded-full">
      <div class="bg-blue-600 text-xs font-medium text-blue-100 text-center p-0.5 leading-none rounded-l-full" style="width: 25%"> 25%</div>
    </div>

Height

        
            
    <div class="w-full bg-gray-200 h-px mb-6">
      <div class="bg-blue-600 h-px" style="width: 25%"></div>
    </div>
    <div class="w-full bg-gray-200 h-5 mb-6">
      <div class="bg-blue-600 h-5" style="width: 25%"></div>
    </div>

Colors

        
            
    <div class="w-full bg-gray-200 h-1 mb-6">
      <div class="bg-green-500 h-1" style="width: 25%"></div>
    </div>
    <div class="w-full bg-gray-200 h-1 mb-6">
      <div class="bg-blue-400 h-1" style="width: 50%"></div>
    </div>
    <div class="w-full bg-gray-200 h-1 mb-6">
      <div class="bg-yellow-500 h-1" style="width: 75%"></div>
    </div>
    <div class="w-full bg-gray-200 h-1">
      <div class="bg-red-600 h-1" style="width: 100%"></div>
    </div>