JSFiddle - React, Tailwind, and code Playground

HTML

<div class="header section small-padding bg-dark" >
    
			<div id="cf">
			<img class="bottom" src="http://s017.radikal.ru/i437/1604/6b/bceeaf52c0cb.png" />
			<img class="top" src="http://s020.radikal.ru/i717/1604/1d/f5de54045a1b.png" />
      
		</div>

CSS

.header {
padding: 0px;	
padding-top: 20px;
padding-bottom: 20px;
min-width: 500px;
height: 150px;
}



#cf {
  width: 100%;
	text-align: center;
	position:relative;
	height: auto;
	margin:0 auto;
}

#cf img {
  position:absolute;
  left:0;
  -webkit-transition: opacity 0.5s ease-in-out;
  -moz-transition: opacity 0.5s ease-in-out;
  -o-transition: opacity 0.5s ease-in-out;
  transition: opacity 0.5s ease-in-out;
}


#cf img.top:hover {
  opacity:0;
}


.section { 
	position: relative;
	padding: 80px 0; 
}

.small-padding { padding: 40px 0; }
.bg-dark { background-color: #1d1d1d; }