JSFiddle - React, Tailwind, and code Playground

by Sourabh Singh Rathore

HTML

<script src="http://fonts.googleapis.com/css?family=Open+Sans"></script>
<div id='content'>
  <div class='arrow'>Arrow</div>
</div>

CSS

body {
  background: #EBEBEB;
}

html {
  min-height: 100%;
}

#content {
  width: 160px;
  margin: 25px auto;
}

div {
  margin: 20px 0;
  line-height: 34px;
  position: relative;
  cursor: pointer;
    -webkit-user-select: none;
}

div:before, div:after {
content: '';
position: absolute;
height: 0;
width: 0;
border-style: solid;
border-width: 0;
}

div:hover {
  top: -1px;
}
div:active {
  top: 1px;
}

div.arrow {
  background-color: #8d96ed;
    text-align:center;
}
div.arrow:after, div.arrow:before {
  border-width: 17px 0 17px 17px;
}
div.arrow:before {
  border-color: #8d96ed transparent;
  left: -17px;
}
div.arrow:after {
  border-color: transparent #8d96ed;
  right: -17px;
}