JSFiddle - React, Tailwind, and code Playground

by Sergey khorev

HTML

<ul class="drive">
  <li data-name="renderHighway" class="drive-last"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="11" viewBox="0 0 12 11">
      <path fill="#757575" fill-opacity=".54" fill-rule="evenodd" d="M10.037 1.506a.872.872 0 0 0-.83-.59H2.793a.877.877 0 0 0-.83.59L.75 5v4.667c0 .32.262.583.583.583h.584c.32 0 .583-.262.583-.583v-.584h7v.584c0 .32.262.583.583.583h.584c.32 0 .583-.262.583-.583V5l-1.213-3.494zM2.792 7.333a.874.874 0 1 1 0-1.75.874.874 0 1 1 0 1.75zm6.416 0a.874.874 0 1 1 0-1.75.874.874 0 1 1 0 1.75zm-7.29-2.916l.874-2.625h6.416l.875 2.625H1.917z"></path>
    </svg>
    <a data-name="Link" href="#map" class="drive-text2">Деревня Песочнево, Ивановский район</a><span>,&nbsp;<span class="drive-text">11 км от центра Иваново</span></span></li>
</ul>

CSS

.drive {
    margin: 0;
    padding: 0;
    list-style: none;
}
.drive-last:last-child {
    margin-right: 0;
}
.drive-text{
    color: #7a7a7a;
}
.drive-text2 {
    font-size: 16px;
    line-height: 22px;
    color: #182930;
    text-decoration: none;
}