JSFiddle - React, Tailwind, and code Playground

by the94air

HTML

<div class="cool-shape">
  <span class="border"></span>
  <div class="corners">
    <div class="content">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab saepe sapiente expedita a est consequatur itaque dolorum eum sequi ipsum esse beatae, soluta veritatis minima quisquam totam ratione ipsa nisi.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab saepe sapiente expedita a est consequatur itaque dolorum eum sequi ipsum esse beatae, soluta veritatis minima quisquam totam ratione ipsa nisi.
  </div>
    <span class="left-corner"></span>
    <span class="right-corner"></span>
  </div>
</div>

SCSS

body { margin: 20px; }
.cool-shape {
  position: relative;
  .border {
    content: ' ';
    position: absolute;
    border-top: 3px solid #5e5e5e;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99;
  }
  .corners {
    width: 100%;
    background: #5e5e5e;
    color: #fff;
    margin: auto;
    position: relative;
    overflow: hidden;
    .left-corner {
      overflow: hidden;
      display: none;
      width: 300px;
      height: 500px;
      position: absolute;
      bottom: -330px;
      left: -75px;
      background: #fff;
      border-radius: 50%;
      z-index: 90;
    }
    .right-corner {
      overflow: hidden;
      display: none;
      width: 300px;
      height: 500px;
      position: absolute;
      bottom: -330px;
      right: -75px;
      background: #fff;
      border-radius: 50%;
      z-index: 90;
    }
    .content {
      padding: 15px
    }
    @media (min-width: 991px) {
      .left-corner, .right-corner {
        display: block;
      }
      .content {
        padding: 15px 250px;
      }
    }
  }
}