JSFiddle - React, Tailwind, and code Playground

by Dmitriy Shvanyk

HTML

<header class="header">
  <div class="container">
    <div class="header-inner">
      <div class="header-item">
        <img src="http://via.placeholder.com/150x250" class="header-img-women" alt="">
      </div>
      <div class="header-item">
        <h1 class="header-title">Main title</h1>
        <h2>Title title text text text text text text text text text text text text text text text</h2>
      </div>
    </div>
  </div>
</header>

CSS

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.container {
  max-width: 960px;
  margin: 0 auto;
  padding: 15px;
}

.header {
  background: #5E5E5E;
  min-height: 265px;
}

.header-inner {
  position: relative;
  border: 5px solid #c00;
  border-bottom: none;
  border-top: none;
  margin: 50px auto;
  max-width: 600px;
  display: flex;
}

.header-inner:before,
.header-inner:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background: #c00;
}

.header-inner:before {
  z-index: 1;
}

.header-inner:after {
  top: auto;
  bottom: 0;
  z-index: 2;
}

.header-item {
  padding: 25px 15px;
  width: 50%;
}

.header-title {
  font-size: 30px;
  font-weight: 700;
  position: absolute;
  top: -15px;
  left: 0;
  width: 100%;
  text-align: center;
}

.header-img-women {
  position: absolute;
  top: -50px;
  left: 10px;
  z-index: 1;
}