JSFiddle - React, Tailwind, and code Playground

HTML

<div class="header-buttons">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
</div>

CSS

.header-buttons {
  text-align:center; 
}

.header-buttons li {
  display: inline-block;
  border:1px solid #ccc;  
}