JSFiddle - React, Tailwind, and code Playground

by David Kyle

HTML

<div class="wrapper">

<div class="badge-outer">
      <span class="badge-label">
      Local
      </span>
 </div>
 </div>

CSS

body {
  font-family: Verdana, Helvetica, sans-serif;
  background-color: rgb(45, 45, 45);
  color: rgb(225, 225, 225);
  font-size: 12px;
}

.wrapper {
  position: fixed;
  bottom: 100px;
  height: 100px;
  width: 100%;
  overflow: hidden;
  border: solid 1px #ffffff;
}
.badge-outer {
  position: relative;
  display: block;
  height: inherit;
  top: -50px;
  left: -45%;
  text-align: center;
  transform: rotate(-45deg);
  color: #000000;
  background-color: #ab2323;
  box-shadow: 2px 1px 8px #121212;
}

.badge-label {
  display: block;
  position: relative;
  top: 85%;
  text-align: center;
  font-weight: bold;
  text-transform: uppercase;
  transform: translateY(-65%);
  cursor: default;
}