JSFiddle - React, Tailwind, and code Playground

by jorgeluis

HTML

<ul>

  <li class="">
    <a href="#">Long name here</a>
  </li>
  
  <li class="">
    <a href="#">one</a>
  </li>
  
  <li class="">
    <a href="#">two</a>
  </li>

</ul>

CSS

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

ul {
  display: flex;
  flex-direction: column;
  list-style: none;
  align-items: unset;
}
li > a {
  display: block;
  padding: 1rem;
  background: pink;
}
li > a:hover {
  background: red;
}