JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="table">
  <div class="cell">
    <a href="#myModal" data-toggle="modal">Abrir Modal</a>
  </div>
</div>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1">
  <div class="modal-dialog">
    <h1 style="margin: 0 auto; text-align: center;">Carrinho &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;R$99,90</h1>
    <div class="modal-content">
      <div class="modal-body">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        
   
  <div class='md-content google'>
   
    <p>
      <div>
        <p>
       <img width="30" src="https://media-www-needforspeed.spark.ea.com/content/c-need-for-speed/pt_BR/_global/_jcr_content/things/globalmenu_3/items/globalmenuitem/image.img.jpg"> 1x Need For Speed 2016
        </p>
        
        <h2 class="entrega">Modo de Entrega 
          <h2 class="entrega about">Instantânea por e-mail</h2>
        </h2>
        
         <h2 class="entrega">Disponibilidade
          <h2 class="entrega about">Em estoque</h2>
        </h2>
        <h2 class="entrega" style="width: 100%;">Forma de pagamento</h2>
        <div class="tabs-holder">
  <input type="radio" name="toggle" id="tab-one" checked="">
  <input type="radio" name="toggle" id="tab-two">
  <input type="radio" name="toggle" id="tab-three">
  <div class="tabs">
    <label for="tab-one" style="border-radius: 30px 0px 0px 30px;">PagSeguro</label>
    <label for="tab-two" style="border-radius: 0px 30px 30px 0px;">PayPal</label>
  </div>
  <div class="tab-content">
    <div class="tab-one-content">
      <br>
  <!-- PagSeguro -->
<form target="pagseguro" action="https://pagseguro.uol.com.br/checkout/v2/cart.html?action=add" method="post">
<!-- NÃO EDITE OS COMANDOS DAS LINHAS ABAIXO -->
<!--<input type="hidden" name="itemCode" value="55E40672898907733452AFB858FD0EFE"> <!-- 96F8C6489D9D0422245B4FBF27B95C50 -->
<input type="submit"...

CSS

@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900');

/* General styles for the modal */
/* 
Styles for the html/body for special modal where we want 3d effects
Note that we need a container wrapping all content on the page for the 
perspective effects (not including the modals and the overlay).
*/
body {
  font-family: 'Roboto';
  color: #fff;
  background: #fff;
}

.table {
  display: table;
  width: 100%;
  height: 100%;
}

.cell {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.close {
  float: right;
  font-size: 21px;
  font-weight: bold;
  line-height: 1;
  color: #000000;
  text-shadow: 0 1px 0 #ffffff;
  opacity: 0.2;
  filter: alpha(opacity=20);
}

.close:hover,
.close:focus {
  color: #000000;
  text-decoration: none;
  cursor: pointer;
  opacity: 0.5;
  filter: alpha(opacity=50);
}

button.close {
  padding: 0;
  cursor: pointer;
  background: transparent;
  border: 0;
  -webkit-appearance: none;
}

.modal-open {
  overflow: hidden;
}

.modal {
  font-size: 0.875em;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  outline: none;
  height: 100%;
  width: 100%;
  z-index: 1040;
  overflow: auto;
  overflow-y: scroll;
  visibility: hidden;
  display: table;
}
.modal.in {
  visibility: visible;
}

.modal.fade .modal-dialog {
  opacity: 0;
  transform: scale(0.8) translateZ(0);
  transition: all 250ms;
}

.modal.in .modal-dialog {
  opacity: 1;
  transform: scale(1) translateZ(0);
}

.modal-dialog {
  z-index: 1050;
  display: table-cell;
  vertical-align: middle;
}

.modal-content {
  position: relative;
  background-color: #ffffff;
  
  border-radius: 3px;
  outline: none;
  background-clip: border-box;
  width: 50%;
  max-width: 450px;
  min-width: 300px;
  margin: auto;
}

.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1030;
  background-color: #000000;
  visibility: hidden;
  transition: all 250ms;
}

.modal-backdrop.fade {
 ...

JavaScript

(function($){
  
  $.modal = function (el, options) {
      this.options = options;
      this.$el = $(el);
      this.$target = $(el.hash || this.$el.attr('data-target'));
      this.$backdrop = $('.modal-backdrop');
    
      if (this.$target.length) {
        this.$el.data("modal", this);
        this.init();
      }
    };  

  
  $.modal.prototype = {
    
    init: function() {
      var self = this,
          settings,
          backdrop = $('<div/>').addClass('modal-backdrop fade');
    
      if (!self.$backdrop.length) {
        self.$backdrop = backdrop.appendTo('body');
      }
    
      self.settings = settings = $.extend({}, self.defaults, self.options);
      
      self.$target.on('click', function(e) { self.hide(e) });
      self.$el.on('click', function(e) { self.show(e) }); 
      
      
    },
    
    toggle: function(e) {
      return (this.$target.hasClass('in')) ? this.hide(e) : this.show(e); 
    },
    
    show: function(e) {
      e.preventDefault();
      e.stopPropagation();
      this.$target.addClass('in');
      this.$backdrop.addClass('in');
      $('body').addClass('modal-open');
    },
    
    hide: function(e) {
      e.preventDefault();
      e.stopPropagation();
      
      var className = e.target.className;

      if (className == 'modal-dialog' || className == 'close') {
        this.$target.removeClass('in');
        this.$backdrop.removeClass('in');
        $('body').removeClass('modal-open');
      }
    },
    
    defaults: {
    
    }
    
  };
  
  $.fn.modal = function(options) {
    return this.each(function() {
      new $.modal(this, options);
    });
  };  
  
  // self-instantiate on elements with
  // data-toggle='popover'
  $(document).ready(function() {
    $('[data-toggle=modal]').modal();
  });
}(jQuery));

/*
* Close
*/