JSFiddle - React, Tailwind, and code Playground

HTML

<div class="slider">
  <img src="https://c1.staticflickr.com/3/2080/2322871909_dae89c3649_b.jpg" alt="Lion">
  <div class="footer">
    <p>
      National Geographic
    </p>
  </div>
</div>

CSS

.slider {
  width: 90%;
  height: 90%;
  margin: 0 auto;
}

img {
  width: 90%;
  height: 100%;
  margin-left: 5%;
}

.footer {
  width: 100%;
  height: 0;
  position: relative;
  bottom: 0;
  text-align: center;
  color: #666;
  font-size: 24px;
  border-top: 50px solid #FFF;
  border-radius: 100%;
  margin-top: -20px;
}

p {
  margin-top: -45px;
}