JSFiddle - React, Tailwind, and code Playground

by ashraf_sabry_m

HTML

<div>
<div class="dodo"></div>
</div>

CSS

*,
*::after,
*::before
{
    box-sizing: border-box;
}

div
{
  width: 370px;
  height: 205px;
}

.dodo {
  overflow:hidden;
  position: relative;
 background: #074A56;
 padding: 0 15%;
 background-clip: content-box;
}

.dodo::before {
  content: " ";
  position: absolute;
  top: 50%;
  right: 0;
  height: 250%;
  width: 15%;
  background: radial-gradient(ellipse farthest-side at 200% center, rgba(7,74,86,0) 0%, #074A56 100%);
  transform: translateY(-50%);
}