JSFiddle - React, Tailwind, and code Playground

by elizabethkmathew

HTML

<nav class="menu-lists">
    <ul class="menu-lists__list" role="menu">
      <li class="menu-lists__item" role="menuitem">
        <a class="menu__link" href="/catalog/CustomPage.aspx?id=20000492">
          <div class="menu__link-icon">
            <svg viewBox="0 0 16 12" width="16" height="12" class="i" focusable="false"><title>Align left</title><desc>Three vertical lines aligned to the left</desc><path d="M8.4148147,12 L1.05185184,12 C0.471229623,12 0,11.552 0,11 C0,10.448 0.471229623,10 1.05185184,10 L8.4148147,10 C8.99543692,10 9.46666654,10.448 9.46666654,11 C9.46666654,11.552 8.99543692,12 8.4148147,12"></path><path d="M12.2500002,2 L0.816666683,2 C0.365866674,2 0,1.552 0,1 C0,0.448 0.365866674,0 0.816666683,0 L12.2500002,0 C12.7008002,0 13.0666669,0.448 13.0666669,1 C13.0666669,1.552 12.7008002,2 12.2500002,2"></path><path d="M15,7 L1,7 C0.448,7 0,6.552 0,6 C0,5.448 0.448,5 1,5 L15,5 C15.552,5 16,5.448 16,6 C16,6.552 15.552,7 15,7"></path></svg>
          </div>
          <span class="menu__name">View Your Transcript</span>
          <div class="menu__link-progress">
            <div class="pie-progress">
              <svg class="pie-progress__pie" width="21px" height="21px" focusable="false"><circle class="pie-progress__border pie-progress__border--completed" cx="10.5" cy="10.5" r="8.5"></circle><circle class="pie-progress__progress brand--fill" cx="10.5" cy="10.5" r="8.5"></circle></svg>
              <i class="pie-progress__check icon"></i>
            </div>
          </div>
        </a>
      </li>
      <li class="menu-lists__item" role="menuitem">
        <a class="menu__link" href="/catalog/CustomPage.aspx?id=20000493">
          <div class="menu__link-icon">
            <svg viewBox="0 0 16 12" width="16" height="12" class="i" focusable="false"><title>Align left</title><desc>Three vertical lines aligned to the left</desc><path d="M8.4148147,12 L1.05185184,12 C0.471229623,12 0,11.552 0,11 C0,10.448 0.471229623,10 1.05185184,10 L8.4148147,10...

CSS

.logo__wrapper {
    display: block;
}