JSFiddle - React, Tailwind, and code Playground

by Fiddel

HTML

<section class="cut">
  <div class="wrap">
  <header>
    <h2 class="maintitle">Test</h2>
    <p class="subtitle">Test</p>
  </header>
  </div>
 </section>

SCSS

// http://codepen.io/rpkoller/pen/omueg

html {

}

section {
  padding-top:4rem;
  width:100%;
  background-color: green;
  height:40em;
}

.wrap {
  background-color:navy;
  width: 50rem;
  margin: 0 auto;
  height: 40rem;
}



.maintitle,
.subtitle {
	height: 3.5rem;
	line-height: 3.5rem;
	position:relative;
}

.maintitle {
	top: -1.77rem;
	text-align: right;
	padding-right:1rem;
  width:15rem;
  background-color:orange;
	&:before {
		content: "";
		position:absolute;
    background-color:red;
    top:0;
		bottom:0;
		width: 999em;
		right:100%;
	}
	&:after {
		content: "";
		position:absolute;
		right:-1.75rem;
		background:transparent;
		border-top: 1.8rem solid transparent;
		border-left: 1.8rem solid red;
		border-bottom: 1.8rem solid transparent;
	}
}

.subtitle {
	text-align: left;
	top: -4.75rem;
	left:17.75rem;
	padding-left: 1rem;
  background-color:grey;
	width:15rem;
  &:before {
		content: "";
		position:absolute;
		left:-1.75rem;
		background:transparent;
		border-top: 1.77rem solid transparent;
		border-right: 1.77rem solid lime;
		border-bottom: 1.77rem solid transparent;
	}
	&:after {
		content: "";
		position:absolute;
    background-color:lime;
		top:0;
		bottom:0;
		width: 999em;
		left:100%;
	}
}