Text Bubble Styled Component

import styled from "styled-components"

const Bubble = styled(div)`
  border-radius: 20px;
  padding: 8px 15px;
  margin-top: 5px;
  margin-bottom: 5px;
  display: inline-block;

  margin-right: 25%;
  background-color: #eee;
  position: relative;

  &:last-child {
    :before {
      content: "";
      position: absolute;
      z-index: 0;
      bottom: 0;
      left: -7px;
      height: 20px;
      width: 20px;
      background: #eee;
      border-bottom-right-radius: 15px;
    }
    :after {
      content: "";
      position: absolute;
      z-index: 1;
      bottom: 0;
      left: -10px;
      width: 10px;
      height: 20px;
      background: white;
      border-bottom-right-radius: 10px;
    }
  }

  transition: transform 0.2s ease-in-out;
  :hover {
    transform: translate(0, -2px) scale(1.01);
  }
  position: relative;
`