JSFiddle - React, Tailwind, and code Playground

by Adrián Gómez Llorente

HTML

<div class="go-image-bg">
  <img class="go-img" src="https://dummyimage.com/1600x400/000/ffffff"/>
</div>
<div class="go-header">
  <div class="go-header-bar"></div>
  <h1 class="go-header-title">Título de prueba super largo de la muerte, viva mca-go y la madre que lo parió</h1>
</div>

CSS

body {
  margin: 0;
  padding: 0;
  min-width: 1024px;
}

.go-image-bg {
  width: 100%;
  background-color: black;
  text-align: center;
}

.go-header {
  position: relative;
  width: 100%;
  height: 80px;
  top: -40px;
}

.go-header-bar {
  position: absolute;
  background-color: grey;
  width: 100%;
  height: 80px;
  -webkit-transform: skewY(-1deg);
}

.go-header-title {
  color: white;
  position: absolute;
  bottom: 0;
  font-size: 30px;
}