JSFiddle - React, Tailwind, and code Playground

by John Doe

HTML

<div class="header">
  <div class="logo">
  <a href="javascript:void(0)"><img src="http://vignette1.wikia.nocookie.net/deadliestfiction/images/e/e6/Pokemon_Logo.png/revision/latest?cb=20140709063650"></a>
  </div>
  <div class="hambi"></div>
</div>

CSS

body{
  margin: 0;
}
.header{
  width: 100%
  position: relative;
  background-color: #FFCB05;
  border-bottom: 1px solid #395DA8;
}
.hambi{
  background-color: #395DA8;
  position: absolute;
  top: 15px;
  right: 15px;
  height: 40px;
  width: 40px;
  border-radius: 3px;
}
.logo{
  width: 100%;
  height: auto;
  background-size: cover;
  border: 1px solid red;
}
.logo img{
  box-sizing: border-box;
  width: 100%;
  height: auto;
  padding: 10% 30% 40px 60px;
  
}