JSFiddle - React, Tailwind, and code Playground

by klierik

HTML

<ol class="list">
  <li class="item">
    <div class="content">
      <a href="#">https://mxtoolbox.com/</a>
      <span class="details">HTML5,CSS3</span>
    </div>
  </li>


  <li class="item">
    <div class="content">
      <a href="#">https://dnschecker.org/</a>
      <span class="details">JavaScript</span>
    </div>
  </li>

  <li class="item">
    <div class="content">
      <a href="#">https://everythingfonts.com/</a>
      <span class="details">PHP</span>
    </div>
  </li>

  <li class="item">
    <div class="content">
      <a href="#">https://cloudconvert.com/</a>
      <span class="details">Node.js</span>
    </div>
  </li>
</ol>

SCSS

.list {
  .item {
    &:not(:first-child) {
      margin-top: 10px;
    }

    .content {
      display: flex;
      justify-content: space-between;
      color: #666;

      &::before {
        flex: 1 0 0;
        margin: 0 5px 0 20px;
        order: 20;
        content: '';
        border-bottom: 1px dashed;
      }

      a {
        order: 10;
        color: inherit;
        text-decoration: none;

        &:hover {
          text-decoration: underline;
        }
      }

      span {
        order: 30;

        &::before,
        &::after {
          font-weight: bold;
          color: #333;
        }

        &::before {
          content: '[ ';
        }

        &::after {
          content: ' ]';
        }
      }
    }
  }
}