JSFiddle - React, Tailwind, and code Playground

by Chris Sun

HTML

<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>  
	<span id="extra" class="header_component">
		<span class="extra_component">Contact Us</span> 
		<span class="extra_component">Forum</span>
		<span class="extra_component"><img src="USA-Flag-Wallpaper-01.JPG" height="42" width="42"/></span>
		<span class="extra_component"><img src="power.PNG"/></span> 
		<BR />
		<input type="text" name="toprocess" width=100px>
		<span class="extra_component"><img src="magn.PNG" /></span>
	</span>
	</div>
	<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>
	<BR />
	<h3> Select your  spending Profile and leave all the 'card searching' to us</h3>
	
   </div>
   <div id="choices">
	 <p class="choice">Business Traveller </p>
	 <p class="choice">Office Supply Purchases</p> 
	 <p class="choice">Stay at home parent</p> 
	 <p class="choice">Entertainment</p>
	 <p class="choice">Profile 6 </p>
	 <p class="choice">Profile 7</p>
   </div>
   <div class="sidebar">
	<img id="laptop" align="middle" src="http://i.imgur.com/s2sT85a.jpg" height = "90" width ="90" /> 
	</div> 
   
   
</body>

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: 11%;
  height: 100px;
      cursor: pointer;

}
#header{ 
	background-image: url("background.PNG");
	  white-space: nowrap;

}
#options {
	background-image: url("back2.PNG");
}
.To_Left {
	text-align:center;
	display: inline-block;
	width:24%;
	padding-top: 10px;
	padding-bottom: 10px;

}
#extra {
	width:33%;
}
.extra_component {
	display: inline-block;
	margin-right: 10px;
	padding-right: 10px;
}

.choice {
	margin-top:0px;
	margin-bottom:4px;
	margin-left:20px;
	text-align:center;
	background-image: url("http://i.imgur.com/qDukXMn.png");
	padding-top:18px;
	padding-bottom:18px;
}

.sidebar {
	display:inline-block;
	vertical-align:top;
	width:70%;
		height:3%;

}
#choices {
	display:inline-block;
}
#laptop {
	width:100%;
	height:3%;
	vertical-align: bottom;
}