JSFiddle - React, Tailwind, and code Playground

by Сергей Тарасевич

HTML

<div class="ribbon"><div class="ribbon-stitches-top"></div><strong class="ribbon-content"><h1>ВИП МЕН</h1></strong><div class="ribbon-stitches-bottom"></div></div>

CSS

html, body {
  margin: 0;
  padding: 0;
  height: 100vh;
  width: 100vw;
}

.ribbon {
   width: 300px;
   position: absolute;
   text-align: center;
   font-size: 20px!important;
   background: #d64b4b;
   background: -webkit-gradient(linear, left top, left bottom, from(#d64b4b), to(#ab2c2c));
   background: -webkit-linear-gradient(top, #d64b4b, #ab2c2c);
   background: -moz-linear-gradient(top, #d64b4b, #ab2c2c);
   background: -ms-linear-gradient(top, #d64b4b, #ab2c2c);
   background: -o-linear-gradient(top, #d64b4b, #ab2c2c);
   background-image: -ms-linear-gradient(top, #d64b4b 0%, #ab2c2c 100%);
   -webkit-box-shadow: rgba(000,000,000,0.3) 0 1px 1px;
   -moz-box-shadow: rgba(000,000,000,0.3) 0 1px 1px;
   box-shadow: rgba(000,000,000,0.3) 0 1px 1px;
   font-family: 'Helvetica Neue',Helvetica, sans-serif;
   }
.ribbon h1 {
   font-size: 32px!important;
   color: #801111;
   text-shadow: #d65c5c 0 1px 0;
   margin:0px;
   padding: 15px 10px;
   }



.ribbon-stitches-top {
   margin-top:2px;
   border-top: 1px dashed rgba(0, 0, 0, 0.2);
   -moz-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
   -webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
   box-shadow: 0px 0px 2px rgba(255, 255, 255, 0.5);
   }
.ribbon-stitches-bottom {
   margin-bottom:2px;
   border-top: 1px dashed rgba(0, 0, 0, 0.2);
   -moz-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3);
   -webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3);
   box-shadow: 0px 0px 2px rgba(255, 255, 255, 0.3);
   }