Skill showcase section for resume / porfolio website

show skill progression

This tailwind example is contributed by Ava Brown, on 12-May-2023. Component is made with Tailwind v3.4. It is responsive. It supports dark mode.

Other Progress Bar

Author Ava Brown

Tailwind v3.4 14.6k 17

Fork Fullscreen

<h4 class="text-3xl md:text-5xl dark:text-white font-bold mb-6">Skills</h4>

<div class="mb-7">
            <div class="flex justify-between py-1">
                <span class="text-base text-gray-lite font-semibold dark:text-[#A6A6A6]">Web Design</span>
                <span class="text-base font-semibold text-gray-lite pr-5 dark:text-[#A6A6A6]">80%</span>
            </div>
            <svg class="rc-progress-line" viewBox="0 0 100 1" preserveAspectRatio="none">
                <path class="rc-progress-line-trail" d="M 0.5,0.5
         L 99.5,0.5" stroke-linecap="round" stroke="#D9D9D9" stroke-width="1" fill-opacity="0"></path>
                <path class="rc-progress-line-path" d="M 0.5,0.5
         L 99.5,0.5" stroke-linecap="round" stroke="#FF6464" stroke-width="1" fill-opacity="0"
                    style="stroke-dasharray: 79.2px, 100px; stroke-dashoffset: 0px; transition: stroke-dashoffset 0.3s ease 0s, stroke-dasharray 0.3s ease 0s, stroke 0.3s linear 0s, 0.06s;">
                </path>
            </svg>
        </div>

<div class="mb-7">
            <div class="flex justify-between py-1">
                <span class="text-base text-gray-lite font-semibold dark:text-[#A6A6A6]">Mobile App </span>
                <span class="text-base font-semibold text-gray-lite pr-5 dark:text-[#A6A6A6]">95%</span>
            </div>
            <svg class="rc-progress-line" viewBox="0 0 100 1" preserveAspectRatio="none">
                <path class="rc-progress-line-trail" d="M 0.5,0.5
         L 99.5,0.5" stroke-linecap="round" stroke="#D9D9D9" stroke-width="1" fill-opacity="0"></path>
                <path class="rc-progress-line-path" d="M 0.5,0.5
         L 99.5,0.5" stroke-linecap="round" stroke="#9272D4" stroke-width="1" fill-opacity="0"
                    style="stroke-dasharray: 94.05px, 100px; stroke-dashoffset: 0px; transition: stroke-dashoffset 0.3s ease 0s, stroke-dasharray 0.3s ease 0s, stroke 0.3s linear 0s, 0.06s;">
                </path>
            </svg>
        </div>

<div class="mb-7">
            <div class="flex justify-between py-1">
                <span class="text-base text-gray-lite font-semibold dark:text-[#A6A6A6]">Illustrator</span>
                <span class="text-base font-semibold text-gray-lite pr-5 dark:text-[#A6A6A6]">65%</span>
            </div>
            <svg class="rc-progress-line" viewBox="0 0 100 1" preserveAspectRatio="none">
                <path class="rc-progress-line-trail" d="M 0.5,0.5
         L 99.5,0.5" stroke-linecap="round" stroke="#D9D9D9" stroke-width="1" fill-opacity="0"></path>
                <path class="rc-progress-line-path" d="M 0.5,0.5
         L 99.5,0.5" stroke-linecap="round" stroke="#5185D4" stroke-width="1" fill-opacity="0"
                    style="stroke-dasharray: 64.35px, 100px; stroke-dashoffset: 0px; transition: stroke-dashoffset 0.3s ease 0s, stroke-dasharray 0.3s ease 0s, stroke 0.3s linear 0s, 0.06s;">
                </path>
            </svg>
        </div>

<div class="mb-7">
            <div class="flex justify-between py-1">
                <span class="text-base text-gray-lite font-semibold dark:text-[#A6A6A6]">Photoshope</span>
                <span class="text-base font-semibold text-gray-lite pr-5 dark:text-[#A6A6A6]">75%</span>
            </div>
            <svg class="rc-progress-line" viewBox="0 0 100 1" preserveAspectRatio="none">
                <path class="rc-progress-line-trail" d="M 0.5,0.5
         L 99.5,0.5" stroke-linecap="round" stroke="#D9D9D9" stroke-width="1" fill-opacity="0"></path>
                <path class="rc-progress-line-path" d="M 0.5,0.5
         L 99.5,0.5" stroke-linecap="round" stroke="#CA56F2" stroke-width="1" fill-opacity="0"
                    style="stroke-dasharray: 74.25px, 100px; stroke-dashoffset: 0px; transition: stroke-dashoffset 0.3s ease 0s, stroke-dasharray 0.3s ease 0s, stroke 0.3s linear 0s, 0.06s;">
                </path>
            </svg>
        </div>

</div>
</div>

Related Examples

background animation
background animation

Anonymous

3 years ago

53k
Typewriter effect
using javascript

Samuel Dawson

3 years ago

43.6k
Typewriter animation effect
Build using only Tailwind CSS; no JavaScript is required. This is a continuous typing effect. If you want to stop it after the text is typed for the first time, then you can remove 'infinite' from [typing: 'typing 2s steps(20) infinite alternate, blink .7s infinite'] from the config file.

Samuel Dawson

3 years ago

22k
Progress Bar
Simple Progress bar

Prajwal Hallale

4 years ago

10.7k
Sponsors section with icon

Sienna

3 years ago

13.7k
Progress bars

Sophia Baker

3 years ago

11.4k
Gradient progress bar

Kofi Osei

3 years ago

15.8k
Google map iframe with tailwind

Kofi Osei

3 years ago

22.4k
Simple progress bar component

Prajwal Hallale

3 years ago

7.8k
cards
cards with background animation

Anonymous

3 years ago

12.6k
Progress Bar
Simple Progress bar

anjali pandith

2 years ago

6.5k
Responsive layout with header, main body, aside (sidebar) and footer

Ahmed Malik

3 years ago

13k