JSFiddle - React, Tailwind, and code Playground

by Ernesto1

HTML

<div class="columns">
	  <div class="box">
    <div class="ribbon-wrapper">
      <div class="ribbon">
      </div>
    </div>
  </div>
  <div class="box">
    <div class="ribbon-wrapper">
      <div class="ribbon">
      </div>
    </div>
  </div>
  <div class="box">
    <div class="ribbon-wrapper">
        <div class="ribbon">
      </div>
    </div>
  </div>
  <div class="box">
    <div class="ribbon-wrapper">
      <div class="ribbon">
      </div>
    </div>
  </div>
  <div class="box">
    <div class="ribbon-wrapper">
      <div class="ribbon">
      </div>
    </div>
  </div>
  <div class="box">
    <div class="ribbon-wrapper">
      <div class="ribbon">
      </div>
    </div>
  </div>
</div>

CSS

.columns {
  -webkit-column-width: 250px;
  column-width: 250px;
  width: 95%;
  height: 440px;
}

body {
background: #ccc;
}

.box {
  background: white;
  position: relative;
  width: 70px;
  height: 100px;
  margin: 10px 0;
}

.ribbon-wrapper {
  width: 32px;
  height: 12px;
  overflow: hidden; /* remove this and the ribbons appear */     
  position: absolute;
  right: -10px;
  top: 0px;
   -webkit-transform: rotate(45deg);
  -moz-transform:    rotate(45deg);
  -ms-transform:     rotate(45deg);
  -o-transform:      rotate(45deg);
}

.ribbon {
  font: bold 15px Sans-Serif;
  font-size: 8px;
  text-align: center;
  width: 20px;
  -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
  -moz-box-shadow:    0px 0px 3px rgba(0,0,0,0.3);
  box-shadow:         0px 0px 3px rgba(0,0,0,0.3);
  border-bottom: 6px solid red;
  border-top: 6px solid transparent;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
}