JSFiddle - React, Tailwind, and code Playground

HTML

<header class="sliderHeader"> hello </header>
<!--     <h2 class="sliderHeader">
        <span>30 mins</span>
    </h2> -->

CSS

header {
      text-align: center;
      height: 5rem;
      width: 100%;
      background-color: black;
      color: white;
      margin: 0;
      padding: 0;
      border: 0;
    }
    
    h2 {
        margin: 0;
        text-transform: lowercase;
        height: 120px;
        position: relative;
        background: #000;
    }
    
    h2 span {
        color: #FFF;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
    }