JSFiddle - React, Tailwind, and code Playground

by saadtazi

HTML

<html>
<head>
<style type="text/less">
@bgColor: #ccc;
@avatarHeight: 20px;
@imageWidth: 64px;
body {
  background-color: @bgColor;

}

.container {
  background-color: transparent;
  background-image: url(http://www.gravatar.com/avatar/60d2d59beb0e342e0ed6b223de4822c0?s=64);
  background-repeat: no-repeat;
  background-position: 50%;
  width: @imageWidth;
  height: @avatarHeight;
}
.triangle {
  width: 0;
  height: 0;
  border-top: @avatarHeight/2 solid #ccc;
  border-bottom: @avatarHeight/2 solid #ccc;
  /* change 6x to make the arrow bigger...*/
  border-right: 6px solid transparent; 
  border-left: 0;
  margin: 0;
  padding:0;
}
</style>
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/1.7.0/less.min.js"></script>
</head>
<div class="container">
  <div class="triangle"></div>
</div>
</html>