JSFiddle - React, Tailwind, and code Playground

by Derek Wood

HTML

<ul class="actions">
    <li>
      <whatever-component>
        <span></span>
      </whatever-component>
    </li>
    <li>two</li>
    <li>three</li>
 </ul>

CSS

ul {
  list-style: none;
  margin: 0;
  padding: 0; /* get rid of the defaults */
}

.actions {
  display: flex; /* use flex! */
  flex-direction: row;
  align-items: center;
}

.actions li {
  padding: 10px;
}

whatever-component { /* just keep this seprate from the layout */
  display: block;
  width: 40px;
  height: 40px;
  background-color: blue;
  border-radius: 50%;
  position: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}