JSFiddle - React, Tailwind, and code Playground

by thmain

HTML

<div class="card">
  <div class="btn-container">
    <button class="my-btn">
      I am horizontally centered!    
    </button>
  </div>
</div>

CSS

.card {
  width: 300px;
  height: 150px;
  background-color: #F0F0F0;
  padding: 20px;
  box-shadow: 0 0 3px #969696;
}

.my-btn {
  margin-left: auto;
  margin-right: auto;
}

.btn-container {
  text-align: center;
}