<div class="flex justify-around bg-white border-b border-gray-400">
  <div class="px-4 py-2 text-teal-500 border-b-4 border-teal-500">
    <div class="ion-md-home text-2xl"></div>
  </div>
  <div class="px-4 py-2 text-gray-600">
    <div class="ion-md-compass text-2xl"></div>
  </div>
  <div class="px-4 py-2 text-gray-600">
    <div class="ion-md-notifications text-2xl"></div>
  </div>
  <div class="px-4 py-2 text-gray-600">
    <div class="ion-md-heart text-2xl"></div>
  </div>
  <div class="px-4 py-2 text-gray-600">
    <div class="ion-md-person text-2xl"></div>
  </div>
</div>

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  background-color: #EDF2F7;
}

body, * {
  box-sizing: border-box;
}