JSFiddle - React, Tailwind, and code Playground

HTML

<div class="video-trigger">
										<!--Start of Modal -->
										<div class="modal">
											<input id="modal__welcome" type="checkbox" />
											<label for="modal__welcome" class="trigger-btn">
                      <p>Modal Trigger</p></label>
											<div class="modal__overlay">
	 											<div class="modal__wrap">
												<label for="modal__welcome">&#10006;</label>
												<h2>This is the Modal</h2>
												<iframe width="560" height="315" src="https://www.youtube.com/embed/Y1_VsyLAGuk" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
	  											</div>
											</div>
  										</div>
  									<!--End of Modal -->							
									</div>

CSS

/* Start Modal CSS */

.modal {
    display: inline-block;
    z-index: 2 !important;;
  }
  
  @media (min-width: 43.75em) {
    .modal {
      padding: 1.5em;
    }
  }
  
  .modal > label {
    border-radius: .2em;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    padding: 0.75em 1.5em;
    font-size: 20px;
    font-weight: lighter !important;
  }
  
  .modal > label:hover {
    text-decoration: underline;
  }
  
  .modal__overlay {
    background: #fff;
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    text-align: center;
    text-shadow: none;
    top: 0;
    z-index: 600;
  }
  
  .modal__wrap {
    padding: 1em 0;
    position: relative;
    margin: 0 auto;
    width: 90%;
    z-index: 2 !important;
  }
  
  @media (min-width: 50em) {
    .modal__wrap {
      padding: 1.75em;
    }
  }
  
  @media (min-height: 37.5em) {
    .modal__wrap {
      left: 50%;
      position: absolute;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  }
  
  .modal__wrap label {
    background: #FFD300;
    border-radius: 50%;
    color: #000000;
    cursor: pointer;
    display: inline-block;
    height: 1.5em;
    line-height: 1.5;
    position: absolute;
    right: .5em;
    top: .5em;
    width: 1.5em;
  }
  
  .modal__wrap h2 {
    color: #FFD300;
    margin-bottom: 1em;
    text-transform: uppercase;
  }
  
  .modal__wrap p {
    color: #FFD300;
    text-align: justify;
  }
  
  .modal input:focus ~ label {
    transform: scale(0.97);
  }
  
  input {
    position: absolute;
    top: -1000px;
  }
  
  .modal__overlay {
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.75s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    z-index: -100;
  }
  
  input:checked ~ .modal__overlay {
    opacity: 1;
    transform: scale(1);
    z-index: 800;
  }

  .modal {
      z-index: 10101 !important;
  }

.is-blue label  {
    color: #005e7f !important;
  }

.trigger-btn p {
  color: red;
}

  /* END Modal CSS */