JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<div id="overlayTY" class="sessionTimeout-overlay"></div>
<div id="modal-session-timeout" aria-hidden="true" aria-labelledby="modal-timeout-title" aria-describedby="modal-session-timeout-description" role="dialog" class="modal modal-overlay modal-session-timeout mfa">
  <div role="document">
    <div id="modal-session-timeout-description" class="screen-reader-offscreen">
      Session Timeout
    </div>
    <h2 class="modal-header-title" tabindex="0" data-modal-header="">
            Session Timeout
        </h2>
    <div class="wrapper modal-details">
      <p>Due to inactivity, your session will expire in 2 minutes.</p>
      <p>If additional time is required, please click "Yes". To allow this session to end, click "No". </p>
      <div class="grid-container desktop modal-cta">
        <div class="grid-100 grid-mobile-100 js-btn-boolean" data-state="">
          <a href="#" class="btn btn-boolean-group btn-yes-modal omniture-modal-session-timeout-yes js-timeout-refresh" role="button">Yes</a>
          <a href="#" class="btn btn-boolean-group btn-no-modal omniture-modal-session-timeout-no js-timeout-session-end" role="button">No</a>
        </div>
      </div>
    </div>
    <button class="modal-close-button omniture-modal-session-timeout-close" aria-label="Close Modal Window" tabindex=""><i class="icon icon_x"></i></button>
  </div>
</div>

CSS

#overlayTY {
      width:100%;
	height:100%;
	z-index:9999; /* places the modal overlay between the main page and the modal dialog*/
	background-color:#666;
	opacity:0.5;
	position:fixed;
	top:0;
	left:0;
	display:none;
	margin:0;
	padding:0;
    }
.modal-session-timeout {
    width: 100%;
    padding: 0;
    background-color: #fff;
    z-index: 9998;
    display: none;
  }

  @media (min-width: 960px) {
   .modal-session-timeout {
      width: 750px;
      height: auto;
      box-shadow: 3px 5px 10px #444;
      z-index: 10001;
    }
  }

  .modal-session-timeout {
    max-width: 520px;
    left:0px !important;
  }

  .modal-session-ended {
    max-width: 370px;
  }

  @media (max-width: 959px) {
   .modal-session-timeout {
      max-width: 100%;
      top: 0;
      position: absolute;
      z-index: 9998;
    }
  }

  .modal-overlay {
    text-align: center;
    margin:0px auto;
  }

  .modal-overlay p {
    margin: 0;
  }

  .modal-overlay .wrapper {
    padding: 30px 50px;
  }

  .modal-overlay .btn{
    margin-bottom: 5px;
    min-width: 150px;
    margin-right: 10px;
  }

  .modal-overlay .title {
    outline: none;
  }

  .modal-overlay .modal-header-title {
    padding-left: 50px;
    padding-right: 50px;
  }

  .modal-header-title {
    display: block;
    position: relative;
    background-color: #303030;
    text-transform: uppercase;
    text-align: center;
    margin: 0;
    outline: 0;
    color: #fff;
    font-family: "InterstateRegular", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
    border: 0;
    font-size: 1.375em;
    padding: 17px 0;
  }

  @media (min-width: 768px) {
    .modal-header-title {
      padding: 17px 0;
    }
  }

  @media (max-width: 959px) {
    .modal-header-title {
      font-size: 0.9375em;
    }
  }


  .modal-content {
    text-align: center;
    padding: 22px 20px 28px;
  }

  @media (min-width: 768px) {
    .modal-content {
      padding:0px 50px;
    }
  }

JavaScript

//Modal plugin
AccessibleModal = function(settings) {
	if(!settings.modal){
		console.warn("modal property required for AccessibleModal");
		return false;
	}
	
	var _defaultSettings = {
		mainPage:$('#oc-container'),
		overlay:$('#modal-overlay'),
		closeButton:settings.modal.find('.modal-close-button'),
		onOpen:undefined,
		onClose:undefined
	}
	var _body = $('body');
	
	var _settings = $.extend({}, _defaultSettings, settings);

	// $ formatted selector to search for focusable items
	var _focusableElementsString = "*[data-modal-header], a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed,  *[contenteditable]";

	// store the item that has focus before opening the modal window
	//var _focusedElementBeforeModal;
	
	
	function init() {
		
		_settings.overlay.bind('click', function(e){
			_hideModal()
		});
	

	  _settings.closeButton.bind('click', function(e) {
	      _hideModal();
	  });
	
	  _settings.modal.bind('keydown', function(e) {
	      _trapTabKey(_settings.modal, e);
	  })
	
	  _settings.modal.bind('keydown', function(e) {
	      _trapEscapeKey(_settings.modal, e);
	  })
		
		_showModal();
	}

	function _trapEscapeKey(obj, evt) {
	    // if escape pressed
	    if (evt.which == 27) {
	        _settings.closeButton.click();
	        evt.preventDefault();
	    }

	}

	function _trapTabKey(obj, evt) {

	    // if tab or shift-tab pressed
	    if (evt.which == 9) {

	        // get list of all children elements in given object
	        var o = obj.find('*');

	        // get list of focusable items
	        var focusableItems;
	        focusableItems = o.filter(_focusableElementsString).filter(':visible')

	        // get currently focused item
	        var focusedItem;
	        focusedItem = $(':focus');

	        // get the number of focusable items
	        var numberOfFocusableItems;
	        numberOfFocusableItems = focusableItems.length

	        // get the index of...