JSFiddle - React, Tailwind, and code Playground
by Che Sampat
HTML
<button>Compose</button>
<div>
d
</div>
CSS
button {
-webkit-font-smoothing: antialiased;
-webkit-user-drag: none;
align-items: center;
background-color: #fafafb;
background-image: -webkit-linear-gradient(top,transparent,transparent);
background-image: linear-gradient(transparent,transparent);
background-image: none;
border-radius: 24px;
border-style: none;
box-shadow: none;
box-shadow: rgba(60,64,67,.3) 0 1px 3px 0,rgba(60,64,67,.15) 0 4px 8px 3px;
color: #3c4043;
cursor: pointer;
display: inline-block;
display: inline-flex;
font-family: "Google Sans",Roboto,RobotoDraft,Helvetica,Arial,sans-serif;
font-size: .875rem;
font-weight: 500;
height: 48px;
letter-spacing: .25px;
line-height: 32px;
margin-right: 0;
min-width: 56px;
outline: 0;
padding: 0 24px 0 0;
position: relative;
text-align: center;
text-shadow: none;
text-transform: none;
transition-delay: 0s,0s;
transition-duration: .08s,.15s;
transition-property: box-shadow,min-width;
transition-timing-function: linear,cubic-bezier(.4,0,.2,1);
user-select: none;
white-space: nowrap;
}#
div {
align-items: center;
display: flex;
height: 32px;
margin-left: 0;
padding: 0 12px 0 26px;
position: relative;
transition-delay: 0s,0s;
transition-duration: .15s,.15s;
transition-property: margin,padding;
transition-timing-function: cubic-bezier(.4,0,.2,1),cubic-bezier(.4,0,.2,1);
}