JSFiddle - React, Tailwind, and code Playground

HTML

<div class="block block-1"></div>

<div class="block block-2"></div>

CSS

* {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
}
body {
  margin: 0;
}

.block {
  height: 200px;
  margin-bottom: 20px;
  background: #eee;
}
.block-1 {
  width: 500px;
  margin-left: auto;
  margin-right: auto;
}
.block-2 {
  margin-left: calc(50% - 250px);
}