JSFiddle - React, Tailwind, and code Playground

by veer_vin

HTML

<div class="bell">
  <div class="bell-top"></div>
  <div class="bell-bot"></div>
</div>

CSS

.bell {
  position: relative;
}
.bell .bell-top {
  position: relative;
  width: 20px;
  height: 20px;
  background: #ccc;
  border-radius: 20% 20% 0 0;
}
.bell .bell-top:before {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  background: inherit;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
}
.bell .bell-top:after {
  content: "";
  border-bottom: 10px solid #ccc;
  border-left: 8px solid #fff;
  border-right: 8px solid #fff;
  height: 0;
  width: 50px;
  position: absolute;
  left: -8px;
  bottom: -10px;
}
.bell .bell-bot {
  width: 16px;
  height: 8px;
  background: #ccc;
  border-radius: 0 0 16px 16px;
  margin-top:10px;
  margin-left: clac(16px - 50px);
}