JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body>
  
    <h1>Heading 1</h1>
    <p>heading 2</p>
    <a href="#signupModal" data-toggle="modal">Sign-Up</a>
  
    <div class="modal" id="signupModal"
         role="dialog" aria-labelledby="myModalLabel"
         aria-hidden="true">
  
        <div class="modal-dialog">
            <div class="modal-content">
  
                <!-- Modal root -->
                <div class="m-header">
                    <button class="close" data-dismiss="modal">Ă—</button>
                    <h2 class="myModalLabel">Sign Up</h2>
                </div>
  
                <!-- Modal body -->
                <div class="inputs">
                
                    <!-- username input -->
                    <div class="form-group input-group">
                        <label for="username" class="sr-only">
                          Username
                        </label>
                        <span class="input-group-addon">
                          <i class="fa fa-user"></i>
                        </span>
                        <input type="text" class="form-control" 
                               id="username" placeholder="Username">
                    </div>
  
                    <!-- Email input -->
                    <div class="form-group input-group">
                        <span class="input-group-addon">
                          <i class="fa fa-envelope"></i>
                        </span>
                        <label for="email" class="sr-only">
                          Email
                        </label>
                        <input type="email"...

CSS

body {
  text-align: center;
}


.modal .modal-content {
  height: 100%;
}


.modal-dialog {
  display: inline-block;
  vertical-align: middle;
  width: 80% !important;
  height: 80% !important;
}

.modal .modal-content {
  padding: 0px 20px 20px 20px;
}