JSFiddle - React, Tailwind, and code Playground

by zazvorniki

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

<div class="container">
  <div class="row">
  <div class='titleContain'>
    <label class='tags'>Pick your background color: </label>
  <select name="colorpicker">
   <option value="#fff">White</option>
  <option value="#ecfefe">Light Blue</option>
  <option value="#f4fef7">Light Green</option>
  <option value="#fcecf6">Light Pink</option>
  <option value="#fcf8fd">Light Purple</option>
  <option value="#fef9fc">Light Violet</option>
  <option value="#fffafa">Light Red</option>
  <option value="#f7f7fe">Light Navy</option>
  <option value="#f8fbfb">Light Teal</option>
  <option value="#fbf9f8">Light Brown</option>
  <option value="#fefbfa">Light Orange</option>
  <option value="#fefaea">Light Yellow</option>
  <option value="#fcfbfc">Light Gray</option>
</select>
  </div>

<div id='pageBackground'>
  <div id='pageHeader'>
    <span><img id='companyLogo' src='https://pngimage.net/wp-content/uploads/2018/06/logo-placeholder-png.png' /></span>
    
    <ul class='nav'>
      <li><a href='#'>Link 1</a></li>
      <li><a href='#'>Link 2</a></li>
      <li><a href='#'>Link 3</a></li>
      <li><a href='#'>Link 4</a></li>
    </ul>
  </div>
  <div id='pageContent'>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Si qua in iis corrigere voluit, deteriora fecit. Num igitur eum postea censes anxio animo aut sollicito fuisse? Sin aliud quid voles, postea. Duo Reges: constructio interrete. Cur igitur, inquam, res tam dissimiles eodem nomine appellas?...

CSS

/*!
 * Very simple jQuery Color Picker
 * https://github.com/tkrotoff/jquery-simplecolorpicker
 *
 * Copyright (C) 2012-2013 Tanguy Krotoff <[email protected]>
 *
 * Licensed under the MIT license
 */

/**
 * Inspired by Bootstrap Twitter.
 * See https://github.com/twbs/bootstrap/blob/master/less/navbar.less
 * See https://github.com/twbs/bootstrap/blob/master/less/dropdowns.less
 */

.simplecolorpicker.picker {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1051; /* Above Bootstrap modal (@zindex-modal = 1050) */
  display: none;
  float: left;

  min-width: 160px;
  max-width: 283px; /* @popover-max-width = 276px + 7 */

  padding: 5px 0 0 5px;
  margin: 2px 0 0;
  list-style: none;
  background-color: #fff; /* @dropdown-bg */

  border: 1px solid #ccc; /* @dropdown-fallback-border */
  border: 1px solid rgba(0, 0, 0, .15); /* @dropdown-border */

  -webkit-border-radius: 4px; /* @border-radius-base */
     -moz-border-radius: 4px;
          border-radius: 4px;

  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
     -moz-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
          box-shadow: 0 6px 12px rgba(0, 0, 0, .175);

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

.simplecolorpicker.inline {
  display: inline-block;
  padding: 6px 0;
}

.simplecolorpicker span {
  margin: 0 5px 5px 0;
}

.simplecolorpicker.icon,
.simplecolorpicker span.color {
  display: inline-block;

  cursor: pointer;
  border: 1px solid transparent;
}

.simplecolorpicker.icon:after,
.simplecolorpicker span.color:after {
  content: '\00a0\00a0\00a0\00a0'; /* Spaces */
}

.simplecolorpicker span.color[data-disabled]:hover {
  cursor: not-allowed;
  border: 1px solid transparent;
}

.simplecolorpicker span.color:hover,
.simplecolorpicker span.color[data-selected],
.simplecolorpicker span.color[data-selected]:hover {
  border: 1px solid #222; /* @gray-dark */
}
.simplecolorpicker...

JavaScript

/*!
 * Very simple jQuery Color Picker
 * https://github.com/tkrotoff/jquery-simplecolorpicker
 *
 * Copyright (C) 2012-2013 Tanguy Krotoff <[email protected]>
 *
 * Licensed under the MIT license
 */

(function($) {
  'use strict';

  /**
   * Constructor.
   */
  var SimpleColorPicker = function(select, options) {
    this.init('simplecolorpicker', select, options);
  };

  /**
   * SimpleColorPicker class.
   */
  SimpleColorPicker.prototype = {
    constructor: SimpleColorPicker,

    init: function(type, select, options) {
      var self = this;

      self.type = type;

      self.$select = $(select);
      self.$select.hide();

      self.options = $.extend({}, $.fn.simplecolorpicker.defaults, options);

      self.$colorList = null;

      if (self.options.picker === true) {
        var selectText = self.$select.find('> option:selected').text();
        self.$icon = $('<span class="simplecolorpicker icon"'
                     + ' title="' + selectText + '"'
                     + ' style="background-color: ' + self.$select.val() + ';"'
                     + ' role="button" tabindex="0">'
                     + '</span>').insertAfter(self.$select);
        self.$icon.on('click.' + self.type, $.proxy(self.showPicker, self));

        self.$picker = $('<span class="simplecolorpicker picker ' + self.options.theme + '"></span>').appendTo(document.body);
        self.$colorList = self.$picker;

        // Hide picker when clicking outside
        $(document).on('mousedown.' + self.type, $.proxy(self.hidePicker, self));
        self.$picker.on('mousedown.' + self.type, $.proxy(self.mousedown, self));
      } else {
        self.$inline = $('<span class="simplecolorpicker inline ' + self.options.theme + '"></span>').insertAfter(self.$select);
        self.$colorList = self.$inline;
      }

      // Build the list of colors
      // <span class="color selected" title="Green" style="background-color: #7bd148;" role="button"></span>
      self.$select.find('>...