JSFiddle - React, Tailwind, and code Playground

by mrleroylee

HTML

<h1>blog</h1>

CSS

h1 { position: relative; margin-top:40px; margin-left: 19px; height: 66px; width: 242px; 
    background: #fba328; /* Old browsers */
    background: -moz-linear-gradient(top, #fba328 0%, #fdb547 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fba328), color-stop(100%,#fdb547)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #fba328 0%,#fdb547 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #fba328 0%,#fdb547 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(top, #fba328 0%,#fdb547 100%); /* IE10+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fba328', endColorstr='#fdb547',GradientType=0 ); /* IE6-9 */
    background: linear-gradient(top, #fba328 0%,#fdb547 100%); /* W3C */ }
.contSection .secTitle a { display: block; margin: 0 35px; color: #fff; font-size: 26px; font-weight: bold; line-height: 40px; text-align: right; text-transform: lowercase; }

h1:before { display: block; content: ''; position: absolute; top: 0; left: 0;
    width:0px; 
  height:0px; 
  border-bottom:33px solid transparent;  /* left arrow slant */
  border-top:33px solid transparent; /* right arrow slant */
  border-left:12px solid #fff; /* bottom, add background color here */
  font-size:0px;
  line-height:0px}