JSFiddle - React, Tailwind, and code Playground

by fuggfuggfugg

HTML

<div class="ribbon">
		<span class="content">Hello</span>
	</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Patua+One);

*{margin:0px;padding:0px;}

html {
  	width:100%;
		height:100%;

  text-align: center;
	}
	
.ribbon {
		padding: .34em 1em;
		margin: 0;
		margin-top: 5%;
		position:relative;
		color: #ffffff;
		font: 20px 'Patua One', sans-serif;
		text-align: center;
		letter-spacing:0.1em;
		text-shadow: 0px -1px 0px rgba(0,0,0,0.3);
		box-shadow: inset 0px 1px 0px rgba(255,255,255,.3),
					inset 0px 0px 20px rgba(0,0,0,0.1),
					0px 1px 1px rgba(0,0,0,0.4);
		 background: -webkit-linear-gradient(top,#1eb2df, #17a7d2);
      display: inline-block;
    transition: all 0.3s ease-in;
	}
	
.ribbon:before{
		content: "";
		width:.2em;
		bottom:-.5em;
		position:absolute;
		display:block;
	
		box-shadow:0px 1px 0px rgba(0,0,0,0.4);
		z-index:-2;
	}
	
.ribbon:before {
		left:-1.35em;
		border-right-width: .75em;
		border-left-color:transparent;
	}
	
	
.content:before {
		content:"";
		bottom:-.5em;
		position:absolute;
		display:block;
		border-style:solid;
		border-color: #0675b3 transparent transparent transparent;
		z-index:-1;
	}
	
.content:before {
	  left: 0;
	  border-width: .5em 0 0 .5em;
	}

.ribbon:hover {
  
      text-shadow: 1px 0px 20px yellow;
}