JSFiddle - React, Tailwind, and code Playground

by talkhabi

HTML

<div class="box">
  <div class="label">
    <span>برچسب</span>
  </div>
  <div class="content">
    <p>محتوا</p>
    <p>محتوا</p>
  </div>
</div>

SCSS

* {
  box-sizing: border-box;
}
body {
  height: 100%;
  padding: 10px;
  background: #f5f5f5;
  direction: rtl;
  text-align: right;
  font-family: Tahoma;
}
.box {
  border-radius: 20px;
  position: relative;
  box-shadow: -3px 3px 5px rgba(black, 0.1);
  margin: 50px;
  width: 300px;
  background: white;
  color: #777;
  padding-right: 20px;
  .label {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: #777;
    color: white;
    border-radius: 0 20px 20px 0;
    width: 20px;
    font-size: 11px;
    span {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) rotate(90deg);
    }
  }
  .content {
    padding: 15px;
  }
}