JSFiddle - React, Tailwind, and code Playground

by Rajesh Patadiya

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<body>

<header>
  <!-- icons for settings, change pwd and list of active sessions -->
  <div id="menuIcons"> 
    <i class="fa fa-cog" title="Settings"></i>
    <i class="fa fa-user" title="User"></i>
    <i class="fa fa-lock" title="Lock"></i>
  </div>
  
  <!-- display welcome text -->
  <div id="welcomeText" title="Welcome Harriet">
    <p>Welcome Harriet</p>
  </div>
  
</header>

CSS

body {
  background: #FFFFCC;
}
#welcomeText {
  display: inline-block;
  float: right;
  font-family: Tahoma;
  color:purple;
  font-size: 14px;
  margin-right: 100px;
  background: #ffff94;
  padding-left: 10px;
  padding-right: 10px;
}
#menuIcons {
  display: block;
  float: right;
  color:purple;
  font-size: 14px;
  margin-right: 100px;
  background: #ffff94;
  padding-left: 10px;
  padding-right: 10px;
  margin-top: 20px;
}