JSFiddle - React, Tailwind, and code Playground

by Bacher

HTML

<div class="bubble shadow"></div>
<div class="bubble"></div>

CSS

body {
  background-color: gray;
}

.bubble {
  background-color: #bada55;
  width: 300px;
  height: 50px;
  border-radius: 15px;
  position: relative;
}
.bubble:after {
  content: '';
  position: absolute;
  top: 10px;
  color: transparent;
  width: 40px;
  height: 60px;
  border-right: 20px solid #bada55;
  border-radius: 24px;
}

.bubble.shadow {
  position: absolute;
  width: 310px;
  height: 60px;
  background-color: white;
  top: 3px;
  left: 3px;
  border-radius: 18px;
}

.bubble.shadow:after {
  width: 50px;
  height: 74px;
  top: 7px;
  left: -8px;
  border-right-width: 30px;
  border-color: white;
  border-radius: 38px;
}