JSFiddle - React, Tailwind, and code Playground

by Mostafa Zeinivand

HTML

<div class="card-wrap">
  <div class="card card-left">
    <span class="label">کد تخفیف</span>
    <span class="value">SSLCAM99</span>
  </div>
  
  <div class="card card-right">
    
  </div>
</div>

CSS

.card-wrap {
  width: 27em;
  margin: 3em auto;
  color: #fff;
  font-family: sans-serif;
}

.card {
  background: #ecedef;
  height: 11em;
  float: left;
  position: relative;
  padding: 1em;
  margin-top: 100px;
}

.card-left {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
  width: 6.5em;
}

.card-right {
  width: 16em;
  border-left: 0.18em dashed #fff;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}
.card-right:before, .card-right:after {
  content: "";
  position: absolute;
  display: block;
  width: .9em;
  height: .9em;
  background: #fff;
  border-radius: 50%;
  left: -.5em;
}
.card-right:before {
  top: -.4em;
}
.card-right:after {
  bottom: -.4em;
}