JSFiddle - React, Tailwind, and code Playground

by Beben Koben

HTML

<h1>jQuery Plugin To Put Lists Elements Around a Circle Extremes</h1>

<div class="flip"><a href="http://ben-tools.blogspot.com/"></a></div>

<ul class="colors">
              <li class="red">Red</li>
              <li class="brick">Brick</li>
              <li class="orange">Orange</li>
              <li class="yellow">Yellow</li>
              <li class="lime">Lime</li>
              <li class="green">Green</li>
              <li class="bondi">Bondi</li>
              <li class="aqua">Aqua</li>
              <li class="blue">Blue</li>
              <li class="navy">Navy</li>
              <li class="purple">Purple</li>
              <li class="violet">Violet</li>
              <li class="pink">Pink</li>
</ul>

            
<ul class="months">
              <li class="winter">January</li>
              <li class="winter">February</li>
              <li class="spring">March</li>
              <li class="spring">April</li>
              <li class="spring">May</li>
              <li class="summer">June</li>
              <li class="summer">July</li>
              <li class="summer left">August</li>
              <li class="fall left">September</li>
              <li class="fall left">October</li>
              <li class="fall left">November</li>
              <li class="winter left">December</li>
</ul>

<ul class="simple">
<li><a href="http://embah-google.blogspot.com/search/label/Blogger">Bio-engineering</a></li>
<li><a href="http://embah-google.blogspot.com/search/label/Browse">Systems Design</a></li>
<li><a href="http://embah-google.blogspot.com/search/label/Coded">Systems Architecture</a></li>
<li><a href="http://embah-google.blogspot.com/search/label/Info">Human Computer Interaction</a></li>
<li><a href="http://beben-koben.blogspot.com/search/label/Hack">Ergonomics</a></li>
<li><a href="http://beben-koben.blogspot.com/search/label/CSS">Human Factors</a></li>
<li><a href="http://beben-koben.blogspot.com/search/label/HTML">Interaction Design</a></li>
<li><a...

CSS

*{margin:0;padding:0}
article, aside, footer, header, menu, nav, section { display: block; }
body{background:#debe94;color:#555;display:block;font:13px/1.3 'Segoe...

JavaScript

$.fn.extremes = function(options) {
    var defaults = {
        diameter: false,
        background: false
    };
    var options = jQuery.extend(defaults, options);
    return this.each(function() {
      var diagram = $(this);
      // Apply a rotation to offset awkward initial states
      // 'this' is the selector
       diagram.css({
         position: "relative"
       });
       if (defaults.rotate) {
         diagram.css({
           '-webkit-transform': "rotate(" + options.rotate + "deg)",
           '-moz-transform': "rotate(" + options.rotate + "deg)",
           '-ms-transform': "rotate(" + options.rotate + "deg)",
           '-o-transform': "rotate(" + options.rotate + "deg)",
           'transform': "rotate(" + options.rotate + "deg)",
           });
       }
       var elements = $(this).children();
       var length = elements.length;
       $(this).css({
         "display" : "block",
         "position:" : "relative"
       });
       var maxWidth = 0;
       elements.css("float", "left");
       elements.each(function(i){
         var width = $(this).width();
         if (width > maxWidth) {
           maxWidth = width;
         }
         
         var element = $(this);
         var height = $(this).height();
         var degrees =  i/length * 360 - 90;
         var position = "0 50%";
         var indent = (defaults.diameter) ? "0 0 0 " + defaults.diameter + "px" : "0 0 0 " + height * (length /6) + "px";
         element.wrap("<div class='extremes-div'><div class='extremes-inner' /></div>");
         $(this).parent().parent().css({
           "-webkit-transform-origin": position,
           "-moz-transform-origin":    position,
           "-o-transform-origin":      position,
           "-ms-transform-origin":     position,
           "transform-origin":         position,
           "-webkit-transform":        "rotate(" + degrees + "deg)",
           "-moz-transform":           "rotate(" + degrees + "deg)",
           "-o-transform":        ...