JSFiddle - React, Tailwind, and code Playground

by kachibito

HTML

<div id="foo">
<div id="colorpicker2">Click me!</div>
<input id="colorpicker3" type="text">
    <p>
        CC.BY   <a href="http://andreaslagerkvist.com/jquery/colour-picker/">Tanguy Krotoff</a></p>
</div>

CSS

/**
 * CSS inspired by Bootstrap Twitter.
 * See https://github.com/twitter/bootstrap/blob/master/less/dropdowns.less
 * See http://twitter.github.com/bootstrap/assets/css/bootstrap.css
 */

#colorpicker:before {
  position: absolute;
  top: -7px;
  left: 9px;
  display: inline-block;
  border-right: 7px solid transparent;
  border-bottom: 7px solid #ccc;
  border-left: 7px solid transparent;
  border-bottom-color: rgba(0, 0, 0, 0.2);
  content: '';
}

#colorpicker:after {
  position: absolute;
  top: -6px;
  left: 10px;
  display: inline-block;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #ffffff;
  border-left: 6px solid transparent;
  content: '';
}

#colorpicker {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  float: left;

  min-width: 160px;
  max-width: 209px;

  padding: 4px 0px 0px 4px;
  margin: 1px 0 0;
  list-style: none;
  background-color: #ffffff;

  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.2);

  *border-right-width: 2px;
  *border-bottom-width: 2px;

  -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
          border-radius: 5px;

  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
     -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);

  -webkit-background-clip: padding-box;
     -moz-background-clip: padding;
          background-clip: padding-box;
}

  #colorpicker ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
  }

    #colorpicker ul li {
      float: left;
      margin: 0 4px 4px 0;
    }

      #colorpicker ul li a {
        display: block;

        width: 15px;
        height: 15px;

        text-indent: -100000px;
      }

      #colorpicker ul li a:hover {
        width: 13px;
        height: 13px;

        border: 1px solid black;
}
#foo,
#colorpicker2,p{margin:25px;}

JavaScript

/**
 * Very simple jQuery Color Picker.
 *
 * Copyright (C) 2008-2011 Andreas Lagerkvist
 * Copyright (C) 2012 Tanguy Krotoff
 *
 * Original source code and demo: http://andreaslagerkvist.com/jquery/colour-picker/
 *
 * License: http://creativecommons.org/licenses/by/3.0/
 */

(function($) {

  /**
   * Main color picker function.
   */
  $.fn.colorpicker = function(options) {
    options = $.extend({}, $.fn.colorpicker.defaults, options);

    // Inverts a hex-color
    var colorInvert = function(colorHex) {
      var r = colorHex.substr(0, 2);
      var g = colorHex.substr(2, 2);
      var b = colorHex.substr(4, 2);

      return 0.212671 * r + 0.715160 * g + 0.072169 * b < 0.5 ? 'ffffff' : '000000'
    };

    var dialog = $('#colorpicker');
    if (!dialog.length) {
      dialog = $('<div id="colorpicker"></div>').appendTo(document.body).hide();
    }

    // Remove the color-picker if you click outside it
    $(document).click(function(event) {
      if (!($(event.target).is('#colorpicker') || $(event.target).parents('#colorpicker').length)) {
        dialog.hide(options.delay);
      }
    });

    // For HTML element passed to the plugin
    return this.each(function() {
      var element = $(this);

      // Build the list of colors
      // <li><a href="#" style="background-color: #111fff;">111fff</a></li>
      var colorList = '';
      $.each(options.colors, function(index, color) {
        colorList += '<li><a href="#" style="background-color: #' + color + ';">' + color + '</a></li>';
      });

      // When you click on the HTML element
      element.click(function() {
        // Show the dialog next to the HTML element
        var elementPos = element.offset();
        dialog.html('<ul>' + colorList + '</ul>').css({
          position: 'absolute',
          left: elementPos.left,
          top: elementPos.top + element.outerHeight()
        }).show(options.delay);

        // When you click on a color inside the dialog
        $('a',...