JSFiddle - React, Tailwind, and code Playground

HTML

<div class="r-plus-minus-wrapper">
  <div class="r-p-m-item r-plus"></div>
  <div class="r-p-m-item r-minus"></div>
</div>

CSS

@import url('https://fonts.googleapis.com/css2?family=Neucha&display=swap');


* {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'Neucha', cursive;
}
body {
  background: #000;
}

.r-plus-minus-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.r-p-m-item {
  background: #ffffff;
  box-shadow: 0px 0px 20px rgba(228, 236, 241, 0.7);
  border-radius: 15px;
  max-width: 535px;
  width: 100%;
  padding: 20px 30px;
  position: relative;
  border: 1px solid red;
}

.r-p-m-item::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: -10px;
  top: 0;
  background: green;
  border-radius: 15px;
  z-index: -1;
}