JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div class="withdawal-navigation">
  <div class="withdawal-navigation__item withdawal-navigation__item--online">
    <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M7.3125 15H2.25C1.92188 15 1.65234 14.8945 1.44141 14.6836C1.23047 14.4727 1.125 14.2031 1.125 13.875V2.625C1.125 2.29688 1.23047 2.02734 1.44141 1.81641C1.65234 1.60547 1.92188 1.5 2.25 1.5H13.5C13.8281 1.5 14.0977 1.60547 14.3086 1.81641C14.5195 2.02734 14.625 2.29688 14.625 2.625V6.5625C14.6484 6.91406 14.8359 7.10156 15.1875 7.125C15.5391 7.10156 15.7266 6.91406 15.75 6.5625V2.625C15.7266 1.99219 15.5039 1.46484 15.082 1.04297C14.6602 0.621094 14.1328 0.398438 13.5 0.375H2.25C1.61719 0.398438 1.08984 0.621094 0.667969 1.04297C0.246094 1.46484 0.0234375 1.99219 0 2.625V13.875C0.0234375 14.5078 0.246094 15.0352 0.667969 15.457C1.08984 15.8789 1.61719 16.1016 2.25 16.125H7.3125C7.66406 16.1016 7.85156 15.9141 7.875 15.5625C7.85156 15.2109 7.66406 15.0234 7.3125 15ZM12.9375 8.25C13.2891 8.22656 13.4766 8.03906 13.5 7.6875V3.75C13.5 3.42188 13.3945 3.15234 13.1836 2.94141C12.9727 2.73047 12.7031 2.625 12.375 2.625H7.875C7.52344 2.64844 7.33594 2.83594 7.3125 3.1875V6.66797C6.9375 6.80859 6.63281 7.05469 6.39844 7.40625C6.1875 7.75781 6.11719 8.15625 6.1875 8.60156C6.39844 9.28125 6.84375 9.71484 7.52344 9.90234C8.08594 9.99609 8.55469 9.87891 8.92969 9.55078C9.32812 9.22266 9.53906 8.78906 9.5625 8.25C9.51562 7.47656 9.14062 6.94922 8.4375 6.66797V3.75H12.375V7.6875C12.3984 8.03906 12.5859 8.22656 12.9375 8.25ZM7.875 8.8125C7.52344 8.78906 7.33594 8.60156 7.3125 8.25C7.33594 7.89844 7.52344 7.71094 7.875 7.6875C8.22656 7.71094 8.41406 7.89844 8.4375 8.25C8.41406 8.60156 8.22656 8.78906 7.875 8.8125ZM16.875 15C16.5469 15 16.2773 15.1055 16.0664 15.3164C15.8555 15.5273 15.75 15.7969 15.75 16.125C15.75 16.4531 15.8555 16.7227 16.0664 16.9336C16.2773 17.1445 16.5469 17.25 16.875 17.25C17.2031 17.25 17.4727 17.1445 17.6836 16.9336C17.8945...

SCSS

.withdawal-navigation {
  display: flex;
  align-items: center;
  background: #262A31;
  
  &__item {
    height: 60px;
    width: 50%;
    line-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    
    &--text {
      color: white;
      font-weight: 500;
      display: inline-flex;
      margin-left: 9px;
      text-transform: uppercase;
    }
    
    &--stick {
      width: 100%;
      height: 5px;
      background: yellow;
      position: absolute;
      bottom: 0;
      transform: scaleX(0);
      transition: .3s;
    }
  }
}