JSFiddle - React, Tailwind, and code Playground

by Pablo Leone

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<b class="caret-up"></b>
<b class="caret-right"></b>
<b class="caret-left"></b>
<b class="caret"></b>

CSS

body {padding: 10px;}

.caret-right {
  border-bottom: 4px solid transparent;
  border-top: 4px solid transparent;
  border-left: 4px solid #000000;
  display: inline-block;
  height: 0;
  vertical-align: middle;
  width: 0;
}

.caret-left {
  border-bottom: 4px solid transparent;
  border-top: 4px solid transparent;
  border-right: 4px solid #000000;
  display: inline-block;
  height: 0;
  vertical-align: middle;
  width: 0;
}

.caret-up {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 4px solid #000000;
  display: inline-block;
  height: 0;
  vertical-align: middle;
  width: 0;
}

.caret {
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid #000000;
    display: inline-block;
    height: 0;
    vertical-align: middle;
    width: 0;
}