JSFiddle - React, Tailwind, and code Playground

by Tim McKay

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap-reboot.min.css">
<div class="container">
  <div class="modal current">
    Current Modal: 600px width
  </div>
  <div class="modal auto">
    Current Modal: Auto
  </div>
  
  <div class="modal px--small">
    Pixel: Small Width (30%)
  </div>
  <div class="modal px--medium">
    Pixel: Medium Width (45%)
  </div>
  <div class="modal px--large">
    Pixel: Large Width (65%)
  </div>
  
  <div class="modal per--small">
    Percentage: Small Width (30%)
  </div>
  <div class="modal per--medium">
    Percentage: Medium Width (45%)
  </div>
  <div class="modal per--large">
    Percentage: Large Width (65%)
  </div>
</div>

SCSS

.container {
  background: #3d3d3d;
  padding: 2rem;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
}

.modal {
  background-color: white;
  border-radius: 0.5rem;
  padding: 2rem;
  text-align: center;
  font-weight: bold;
  margin: 1rem auto;
  max-width: 100%;
  
  &:first-child { margin-top: 0; }
  &:last-child { margin-bottom: 0; }
}

.current { width: 600px; }
.auto { width: auto; }

.px--small { width: 500px; } // 30% of 1200px
.px--medium { width: 675px; } // 45% of 1200px
.px--small { width: 975px; } // 65% of 1200px

@media (min-width : 767px) {
  .per--small { width: 30%; }
  .per--medium { width: 45%; }
  .per--large { width: 65%; }
}