JSFiddle - React, Tailwind, and code Playground

by Abdul Ahmad

HTML

<div class='phone'>
  <div class='screen'>
    <header class='nav-header'>
      <div class='nav-row'>
        <div class='item'>
          <div class='x-icon'>
            +
          </div>
        </div>
      </div>
      <div class='nav-row'>
        <div class='item back-arrow first'>
          <
        </div>
        <div class='item center'>
          Title
        </div>
        <div class='item last'>
          Next
        </div>
      </div>
    </header>
  </div>
</div>

SCSS

.x-icon {
  display: inline-block;
  transform: rotate(45deg);
  font-size: 40px;
  line-height: 14px;
  margin: 0 -3px;
}

.back-arrow {
  font-size: 30px;
}


.phone {
  font-family: arial;
  margin: 30px auto;
  width: 400px;
  height: 800px;
  border-radius: 30px;
  border: 1px solid #ddd;
  display: flex;
  justify-content: center;
  align-items: center;
  
  .screen {
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    border: 1px solid #eee;
    border-radius: 20px;
  }
}


.nav-header {
  border-bottom: 1px solid #eee;
  min-height: 50px;
}

.nav-row {
  display: flex;
  // justify-content: space-between;
  box-sizing: border-box;
  padding: 15px 20px;
  // border: 1px solid red;
  
  &:first-child {
    padding-top: 30px;
  }
  
  &:last-child {
    padding-bottom: 10px;
  }
  
  .item {
    display: flex;
    align-items: center;
    flex: 1;
    // border: 1px solid red;
    
    &.center {
      justify-content: center;
    }
    
    &.last {
      justify-content: flex-end;
    }
  }
}