JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
  <div class="no-width">I have no width, and yet I must center</div>
  <div class="width">I, on the other hand, am perfectly in balance</div>
  <div class="inline">I'm inline and also am uncentered</div>
</div>

CSS

div {
  margin-left: auto;
  margin-right: auto;
}

.width {
  width: 150px;
}

.inline {
  display: inline;
}

.wrapper {
  max-width: 768px;
}