JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<div class="myHeader" id="d-header">
        <div class="special-headline-wrap" style="width: 526px;">
            <h1 class="special js-done">HEADLINE</h1>
        </div>
        <p>Aenean lacinia nulla sed consectetur. Cras mattis consectetur purus sit amet fermentum. Maecenas faucibus mollis interdum.</p>

        <div id="date-tab-wrapper" class="header-sticky">
            <div class="date">2017</div>

            <div class="tab-container">
                <div class="tabs" style="margin-left: 9.1%;">Tab 1</div>
                <div class="tabs">Tab 2</div>
                <div class="tabs">Tab 3</div>
            </div>
        </div>
    </div>
</body>

CSS

body {
  padding: 50px;
}
#d-header {
  height: 400px;
  position: relative;
  padding-bottom: 55px;
  background-color: blue;
  margin-bottom: 0px !important;
  box-shadow: 2px 5px 3px 0 rgba(0,0,0,0.16);
  z-index: 1;
}

.tab-container {
  position: absolute;
  width: 100%;
  bottom: 10px;
  height: 55px;
  letter-spacing: 1px;
}

.tabs {
    background-color: orange;
    color: white;
    text-transform: uppercase;
    width: 26.8%;
    height: 50px;
    line-height: 50px;
    float: left;
    text-align: center;
    margin-left: 10px;
  }

.date {
  position: absolute;
  font-size: 72px;
  text-align: center;
  left: 0;
  right: 0;
  bottom: 65px;
}

.header-sticky {
  position: fixed;
  top: 83px;
  width: 100%;
  height: 205px;
  background-color: white;
  box-shadow: 0 5px 4px 0 rgba(0,0,0,0.16),0 0px 0px 0 rgba(0,0,0,0.12);
  border: 1px solid black;
}