JSFiddle - React, Tailwind, and code Playground

by alexb

HTML

<div class="nav">
  <div class="action">
    <div class="action-wrapper">Lorem</div>
    <div class="ripple"></div>
  </div>
  <button class="action">
    <div class="action-wrapper">Ipsum</div>
    <div class="ripple"></div>
  </button>
  <button class="action">
    <div class="action-wrapper">Dolar</div>
    <div class="ripple"></div>
  </button>
</div>

CSS

.nav {
  background: cornflowerblue;
  
    left: 0;
    right: 0;
    border: 1px solid rgba(0, 0, 0, 0.12);
    bottom: 0;
    z-index: 1100;
    position: fixed;
  
    height: 56px;
    display: flex;
    justify-content: center;
}

.action {
  
  
  flex: 1;
  padding: 6px 12px 8px;
  max-width: 168px;
  min-width: 80px;
  transition: color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,padding-top 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  

  /* button base */
  color: inherit;
  margin: 0;
  display: inline-flex;
  outline: 0;
  padding: 0;
  position: relative;
  /* align-items: center; */
  align-items: flex-start;
}

.action-wrapper {
  background: orangered;
  display: inline-flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}

.ripple {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    overflow: hidden;
    position: absolute;
    border-radius: inherit;
    pointer-events: none;
}