JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.9.6/angular-material.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.0/ui-bootstrap-tpls.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.9.6/angular-material.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-aria.js"></script>
<div ng-app="myApp">
  <div ng-controller="myController">
    <script type="text/ng-template" id="addNew.html">
      <div class="modal-body">
        <div class="panel panel-default">
          <div class="panel-heading">
            <h3 class="panel-title">Add</h3>
          </div>
          <div class="panel-body">
            <md-tabs md-dynamic-height md-border-bottom>
              <md-tab label="date">
                <div class="form-horizontal">
                  <div class="row">
                    <div class="col-xs-8">
                        <p>&nbsp;</p>
                      <div class="row form-group">
                        <label for="dateStart" class="col-xs-3 control-label">
                          Date&nbsp;Start
                        </label>
                        <div class="col-xs-9">
                          <div class="input-group ui-datepicker">
                            <input type="text"
                                   class="form-control"
                                   name="dateStart"
                                   id="dateStart"
                                   datepicker-popup="{{dateFormat}}"
                                   ng-model="campaign.dateStart"
                               ...

CSS

md-tab-content {
  min-height: 100px;
}
md-tab-content.md-no-scroll {
    overflow: auto;
}
.dropdown-menu[datepicker-popup-wrap] {
  position: fixed;
  top: 50% !important;
  left: 50% !important;
  margin-left: -150px;
  margin-top: -145px;
}
.dropdown-menu[datepicker-popup-wrap]:before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.3);
}

JavaScript

var app = angular
    .module('myApp', ['ui.bootstrap', 'ngAnimate', 'ngAria', 'ngMaterial'])
    .controller('myController', function ($scope, $modal) {
      $scope.showModal = function () {
        var modalInstance;
        modalInstance = $modal.open({
          templateUrl: "addNew.html",
          controller: 'myController2',
          size: 'lg'
        });
      };
      $scope.showModal();
    })
    .controller('myController2', function ($scope, $modal) {
      $scope.datepickers = {
        start: false
      }
    
      $scope.openDatepicker = function ($event, which) {
        $event.preventDefault();
        $event.stopPropagation();
        $scope.datepickers[which] = true;
      };
    
      $scope.dateOptions = {
        formatYear: 'yy',
        startingDay: 1
      };
    
      $scope.dateFormat = 'mediumDate';
    });