JSFiddle - React, Tailwind, and code Playground

by Aleksandr Ryabov

HTML

<ul>
  <li>
    Photoshop
    <div class="progressbar_wrapper">
      <div class="progressbar" style="width: 90%">
          <div class="progressbar_text">100%</div>
      </div>
    </div>
   </li>
  <li>
    Illustrator
    <div class="progressbar_wrapper">
      <div class="progressbar" style="width: 80%">
        <div class="progressbar_text">100%</div>
      </div>
    </div>
  </li>
  <li>
    HTML / CSS
    <div class="progressbar_wrapper">
      <div class="progressbar" style="width: 90%">
        <div class="progressbar_text">100%</div>
      </div>
    </div>
  </li>
  <li>
    PHP / MySQL
    <div class="progressbar_wrapper">
      <div class="progressbar" style="width: 70%">
        <div class="progressbar_text">100%</div>
      </div>
    </div>
  </li>
</ul>

SCSS

ul {
  margin: 15px;

  li {
    text-transform: uppercase; 
  }
}

.progressbar {
  &_wrapper {
    max-width: 300px;
    height: 15px;
    background-color: #f2f2f1;
    margin: 5px 0 15px;
  }
  
  &_text {
    color: white;
    padding: 1.5px;
    padding-right: 10px;
    line-height: 12px;
    text-align: right;
  }

  background-color: #00cd6b;
  width: 0;
  max-width: 100%;
  height: 100%;
}