JSFiddle - React, Tailwind, and code Playground

https://teratail.com/questions/361516

by Lhankor_Mhy

CSS

body::after {
  content: "";
  position: fixed;
  bottom: 0;
  width: 100%;
  background: rgba(0, 128, 256, 0.3);
  pointer-events: none;
  height: 50px;
  border-top: 36px solid;
  background-clip: padding-box;
  border-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%220%200%201440%20100%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20style%3D%22fill%3A%20rgba(0%2C%20128%2C%20256%2C%200.3)%22%20d%3D%22M%200%2C90%20C%20360%2C90%20360%2C10%20720%2C10%20S%201080%2C90%201440%2C90%20L1440%2C100%20L0%2C100Z%20%22%2F%3E%3C%2Fsvg%3E")
    100% 0%;
}