JSFiddle - React, Tailwind, and code Playground

by mobidevelop

HTML

<ul class="menu">
  <li>
    <a class="menu-item" href="https://www.choicehotels.com/support/faq/" target="_blank">
      <img class="menu-item-icon" src="https://placehold.it/42x42" />
      <span class="menu-item-text">Travel Advisory</span>
      <img class="menu-item-hint" src="https://placehold.it/24x24" />
    </a>
  </li>
  <li>
    <a class="menu-item" href="https://www.choicehotels.com/support/faq#choice-hotels" target="_blank">
    <img class="menu-item-icon" src="https://placehold.it/42x42" />
    <span class="menu-item-text">Choice Hotels</span>
    <img class="menu-item-hint" src="https://placehold.it/24x24" />
    </a>
  </li>
  <li>
    <a class="menu-item" href="https://www.choicehotels.com/support/faq#choice-privileges" target="_blank">
    <img class="menu-item-icon" src="https://placehold.it/42x42" />
    <span class="menu-item-text">Choice Privileges</span>
    <img class="menu-item-hint" src="https://placehold.it/24x24" />
    </a>
  </li>
  <li>
    <a class="menu-item" href="https://www.choicehotels.com/support/faq#promotions" target="_blank">
    <img class="menu-item-icon" src="https://placehold.it/42x42" />
    <span class="menu-item-text">Promotions</span>
    <img class="menu-item-hint" src="https://placehold.it/24x24" />
    </a>
  </li>
  <li>
    <a class="menu-item" href="https://www.choicehotels.com/support/faq#reservations" target="_blank">
    <img class="menu-item-icon" src="https://placehold.it/42x42" />
    <span class="menu-item-text">Reservations</span>
    <img class="menu-item-hint" src="https://placehold.it/24x24" />
    </a>
  </li>
  <li>
    <a class="menu-item" href="https://www.choicehotels.com/support/faq#hotel-policies" target="_blank">
    <img class="menu-item-icon" src="https://placehold.it/42x42" />
    <span class="menu-item-text">Hotel Policies</span>
    <img class="menu-item-hint" src="https://placehold.it/24x24" />
    </a>
  </li>
  <li>
    <a class="menu-item"...

CSS

html, body {
  margin: 0;
  padding: 0;
}

.menu * {
  margin: 0;
  padding: 0;
}

.menu {
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu li {
    border-bottom: thin double #e0e0e0;
}

.menu-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  min-height: 48px;
  width: 100%;
  font-size: 14px;
  text-decoration: none;
  color: #424242;
}

.menu-item img {
    margin: 8px 12px;
}

.menu-item .menu-item-text {
  padding: 0;
  font-weight: normal;
  flex-grow: 1;
}

.menu-item .menu-item-icon {
  margin-left: 16px;
}

.menu-item .menu-item-hint {
  margin-right: 16px;
}