JSFiddle - React, Tailwind, and code Playground

by denniswaltermartinez

HTML

<div class="modal">
  <div class="modal-content">
    <h1>Test</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita error, voluptates! Rerum, sit facere omnis molestias quis explicabo totam sint! Assumenda quasi, magni fuga dolor, asperiores sed numquam corporis deleniti.</p>
  </div>
</div>

CSS

html,
body {
  height: 100%;
}

.modal {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0;
  left: 0;
}

.modal-content {
  max-width: 50vw; // 100 on mobile
  max-height: 50vw; // 100 on mobile
  background: white;
}