JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="bold">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
</ul>
<ul class="bold-w-ltrspcing">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
</ul>
<ul class="textshadow">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
</ul>

CSS

body {
    font-family:segoe ui;
}
ul {
    margin:10px;
}
ul li {
    display:inline-block;
    border-left:1px solid silver;
    padding:5px
}
ul li:last-child {
    border-right:1px solid silver;
}
ul.textshadow li:hover {
    text-shadow:1px 0 0 black;
}
ul.bold li:hover {
    font-weight:bold;
}
ul.bold-w-ltrspcing li:hover {
    font-weight: bold;
    letter-spacing: -0.6px;
}