JSFiddle - React, Tailwind, and code Playground

by Chris Sun

HTML

<!DOCTYPE html>
<html>
<head>
     <title>American Express</title>
</head>
<body>
  <div id="header">
  
	<img class="header_component" src="Logo.PNG" />
	<span class="header_component">
		<div class="inner">
			<img src="MyAccount.PNG"/><br />
			My Account
		</div>
	</span>
	<span class="header_component">
    <div class="inner">
      <img src="Cards.PNG"/><br />
		Cards
	</div>
	</span>
	<span class="header_component">
		<div class="inner">
		<img src="Cards.PNG"/><br />
		Travel
		</div>
	</span>
	<span class="header_component">
		<div class="inner">
			<img src="Rewards.PNG"/><br />
			Rewards
		</div>
	</span>
	<span class="header_component">
		<div class="inner">
		<img src="Business.PNG"/><br />
		Business
		</div>
	</span>
	<BR />
		<div id="options">
			<span class="To_Left">
				  Pick a Spending Profile 
			</span>
			<span class="To_Left">
				  Find me suitable cards 
			</span>
			<span class="To_Left">
				View all Cards
			</span>
			<span class="To_Left">
				Compare
			</span>
		</div>
   </div>
</body>
</html>

CSS

.header_component div {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}
.header_component {
	color: white;
  text-align: center;
  white-space: nowrap;
  display: inline-block;
  vertical-align: middle;
  width: 100px;
  height: 100px;
      cursor: pointer;

}
#header{ 
	background-image: url("http://i.imgur.com/EuMb532.png");
}
#options {
	margin-top:20px;
	background-image: url("http://i.imgur.com/EuMb532.png");
}
.To_Left {
	text-align:center;
	float:left;

	width:25%;
}