JSFiddle - React, Tailwind, and code Playground

by abernov

HTML

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<div class="top-container">
  <i class="fas fa-bars"></i>
  <span class="text-container">Website Title</span>                  
  <i class="fas fa-bars iclo"></i>
</div>

CSS

body {
  margin: 0;
}

.cont {
  background-color: yellow;
  width: 100%;
  height: 100px;
}

.top-container {
  box-sizing: border-box;
  padding: 20px;
  margin: 0;
  display: inline-block;
  width: 100%;
  color: rgb(255, 255, 255);
  background-color: rgba(0, 0, 0, 0.75);
  font-size: 2em;
  font-weight: bold;
}
    
.text-container {
  font-size: 2em;
  font-weight: bold;
  text-align: start;
  overflow: hidden;
  display: inline-block;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding-left: 50px;

  position: absolute; /* Sit on top of the page content */
  width: 100%; /* Full width (cover the whole page) */
  height: 100%; /* Full height (cover the whole page) */
  top: 0; 
  left: 0;
  right: 0;
  bottom: 0;  
}   
    
.top-container i {
  color: red;
  display: inline-block;
}

.iclo {
  float: right;  
}

.top-container3 i {
  position: absolute;
  /* Adjust these values accordingly */
  top: 5px;
  left: 5px;
  margin-right: 100px;
}
    
.top-container2 i {  
  position: absolute;
  float: right;
}