JSFiddle - React, Tailwind, and code Playground

by Shank09

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/js/materialize.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/tippy.css">
<script src="https://unpkg.com/[email protected]/dist/tippy.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">
<body ng-controller="AppCtrl">
Hello {{status}}
  <i class="material-icons tippy c-pointer" id="html-tippy" data-theme="light" data-trigger="click" data-interactive="true" data-animatefill="false" data-arrow="true">settings</i>

  <div id="my-template-id" style="display: none">
    <ul class="collection">
      <li class="collection-item">
        <div class="col s6">Items Per Page</div>
        <div class="col s6">
          <form action="#">
            <p class="range-field">
              <input type="range" min="10" max="25" value="12" />
            </p>
          </form>
        </div>
      </li>
      <li class="collection-item">
        <div class="col s6">Cache</div>
        <div class="col s6">
          <div class="switch">
            <label>
              Off
              <input checked type="checkbox">
              <span class="lever"></span> On
            </label>
          </div>
        </div>
      </li>
      <li class="collection-item">
        <div class="col s6">Refresh</div>
        <div class="col s6">
          <div title="Refresh the Preview" id="funds-refresh">
            <i class="material-icons">refresh</i>
          </div>
        </div>
      </li>
    </ul>
  </div>
  </body>

CSS

.tippy-tooltip[data-template-id="#my-template-id"] {
  /* Your styling here. Example: */
  padding: 0px;
  width: 250px;
}

#html-tippy {
  margin-left: 155px;
}

input[type=range] + .thumb.active .value {
  color: #fff;
  margin-left: -1px;
  margin-top: 5px;
  font-size: 14px;
}

.switch label input[type=checkbox]:checked+.lever {
  background-color: #80d8ff !important;
}

.switch label input[type=checkbox]:checked+.lever:after {
  background-color: #0091ea !important;
}

input[type=range]+.thumb {
  background-color: #0091ea !important;
}

input[type=range]::-webkit-slider-thumb {
  background-color: #0091ea !important;
}

#funds-refresh {
  display: inline-block;
  vertical-align: middle;
  background-color: #F9F9F9;
  height: 35px;
  width: 35px;
  padding: 5px;
  border-radius: 50%;
  border: solid 2px #eaeaea;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

#funds-refresh .material-icons {
  margin-top: -1.5px;
  margin-left: -0.7px;
  color: #c1c1c1;
  -webkit-transition: .25s ease-out;
  -moz-transition: .20s ease-out;
  -ms-transition: .20s ease-out;
  -o-transition: .20s ease-out;
  transition: .25s ease-out;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition-timing-function: ease-out;
}

#funds-refresh:hover .material-icons {
  color: #646464 !important;
}

.c-pointer {
  cursor: pointer;
}

JavaScript

var app = angular.module('app',[]);

//app.directive('appDirective', function() {});
//app.factory('appService', function() {});

function AppCtrl($scope) {
    $scope.status = false;
}