JSFiddle - React, Tailwind, and code Playground

by piiantom

HTML

<div class="button-bar">
  <div class="button selected"><span class="pic-icon pic-heat-map"></span></div>
  <div class="button"><span class="pic-icon pic-cluster"></span></div>
</div>

CSS

.button-bar {
  width: 40px;
  background-color: #fff;
  box-shadow: 0px 0px 10px rgba(185, 186, 207, 0.5), 0 1px 2px rgba(102, 119, 136, 0.3), 0 3px 6px rgba(18, 11, 96, 0.1);
  border-radius: 4px;
  overflow: hidden;
}

.button-bar .button {
  width: 40px;
  height: 40px;
  position: relative;
  cursor: pointer;
  text-align: center;
}





.button-bar .button:not(:first-of-type):before {
  content: '';
  display: block;
  margin: 0 auto;
  width: 40%;
  height: 1px;
  background-color: rgba(112, 112, 112, .3);
}

.button-bar .button.selected {
  color: #00529B;
}
.button-bar .button.selected:after {
    content: '';
    position: absolute;
    background-color: #00529B;
    width: 3px;
    height: 80%;
    left: 0;
    top: 10%;
}



.button-bar .button span:before {
  line-height: 40px;
}














/* LOAD AND DEFINE THE FONT ICON FAMILY.... ONLY FOR THE DEMO */
@font-face {
  font-family: 'prima-insure';
  src:  url('https://www.piiantom.com/font-prima-insure/prima-icon.eot?jsf7sz');
  src:  url('https://www.piiantom.com/font-prima-insure/prima-icon.eot?jsf7sz#iefix') format('embedded-opentype'),
    url('https://www.piiantom.com/font-prima-insure/prima-icon.ttf?jsf7sz') format('truetype'),
    url('https://www.piiantom.com/font-prima-insure/prima-icon.woff?jsf7sz') format('woff'),
    url('https://www.piiantom.com/font-prima-insure/prima-icon.svg?jsf7sz#prima-icon') format('svg');
  font-weight: normal;
  font-style: normal;
}

.pic-icon {
  /* use !important to prevent issues with browser extensions that change fonts */
  font: normal normal normal 14px/1 'prima-insure';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  letter-spacing: normal;
  display: inline-block;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}





.pic-cluster:before {
  content: "\e937";
}
.pic-heat-map:before {
  content:...