JSFiddle - React, Tailwind, and code Playground

by robertirish

HTML

<div class="header">
  <div class="featured-image">
    <!-- this is in place of the featured image -->
  </div>
  
  <div class="title-container">
    <h1>Title<br />goes<br />here</h1>
  </div>
</div>

<div class="article-body">
  <p>There is too much space above class="article-body". I want the content to flow on naturally after class="title-container", however using translateY is purely visual so an alternate method of moving the yellow block up by 50% of its own height is necessary.</p>
</div>

CSS

.header {
  width: 100%.
  position: relative;
}

.featured-image {
  width: 100%;
  height: 200px;
  background-color: blue;
}

.title-container {
  width: 50%;
  margin: 0 auto;
  transform: translateY(-50%);
  background-color: yellow;
}