JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div class="card">Normal Container</div>  
</div>
<div class="container-sm">
  <div class="card">SM Container</div>  
</div>
<div class="container-md">
  <div class="card">MD Container</div>  
</div>
<div class="container-lg">
  <div class="card">LG Container</div>  
</div>
<div class="container-xl">
  <div class="card">XL Container</div>  
</div>

CSS

.container,
.container-sm,
.container-md,
.container-lg,
.container-xl {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 718px) {

  .container,
  .container-sm {
    max-width: 540px;
  }
}

@media (min-width: 1024px) {

  .container,
  .container-sm,
  .container-md {
    max-width: 920px;
  }
}

@media (min-width: 1439px) {

  .container,
  .container-sm,
  .container-md,
  .container-lg {
    max-width: 1140px;
  }
}

@media (min-width: 1920px) {

  .container,
  .container-sm,
  .container-md,
  .container-lg,
  .container-xl {
    max-width: 1440px;
  }
}

.card {
  margin: 10px;
  width: 100%;
  border: 2px solid black;
}