JSFiddle - React, Tailwind, and code Playground

HTML

<div id="navHolder">
    <div id="nav">
    sdfdsfs
    </div>
</div>
<div class="openStartAuditButton" onclick="alert('test');">asdf</div>

CSS

#navHolder {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 99;
  overflow: hidden; }

#nav {
  width: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  padding: 13px; }

.openStartAuditButton{
    height:300px;
    width:300px;
    margin-top:20px;
    font-size:24px;
    background-color:grey;
    color:white;       
    margin-left:auto;
    margin-right:auto;
    text-align:center;
}

.openStartAuditButton:hover{
    background-color:red;
}

/* I also have box sizing set on all elements, but removing this does nothing: */

* {
  -webkit-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box; 
}