JSFiddle - React, Tailwind, and code Playground

by dumptyd

HTML

<div class="box">
  <div class="ribbon-container">
    <div class="ribbon"></div>
    <div class="some-icon"></div>
  </div>
  stuff goes here
</div>

CSS

.box  {
  height: 200px;
  width: 300px;
  border: 2px solid #000;
  position: relative;
}

.ribbon-container {
  position: absolute;
  right: 0;
  height: 100px;
  width: 100px;
}

.ribbon  {
  position: absolute;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 100px 100px 0;
  border-color: transparent #007bff transparent transparent;
}

.some-icon {
  height: 20px;
  width: 20px;
  background: #000;
  border-radius: 50%;
  position: absolute;
  left: calc( 75% - 10px );
  top: calc(25% - 10px);
}