JSFiddle - React, Tailwind, and code Playground

HTML

<div className="outer-yellow-area">
        <img className="brand-icon" src={brandIcon} alt="logo" />
        <div class="stage-area">
        Center stage
        <div>below stage</div>
        <div>below stage</div>
        <div>below stage</div>
        <div>below stage</div>
        <div>below stage</div>
        <div>below stage</div>
        <div>below stage</div>
        </div>
      </div>

CSS

.stage-area {
  width: 50%;
  background: #ffffff;
  box-shadow: 0px 24px 34px rgba(0, 0, 0, 0.25);
  border-radius: 80px;
  -webkit-border-radius: 80px;
  -moz-border-radius: 80px;

  display: flex;
  flex-direction: column;
  align-items: center;
  max-height: 60%;
}

body {
  height: 100%;
  margin: 0px;
  background-color: #ffce31;
}

.brand-icon {
  padding: 0 10% 0 10%;
}

.outer-yellow-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
}