JSFiddle - React, Tailwind, and code Playground

by denvdmj

HTML

<a href="https://stackoverflow.com/a/43266702/3019804">https://stackoverflow.com/a/43266702/3019804</a>


<div id="colorWheel">
  <span class="color01"></span>
  <span class="color02"></span>
  <span class="color03"></span>
  <span class="color04"></span>
  <span class="color05"></span>
  <span class="color06"></span>
  <span class="color07"></span>
  <span class="color08"></span>
  <span class="color09"></span>
  <span class="color10"></span>
</div>

CSS

a {
  display: block;
  text-align: center;
}
:root {
  margin: 2rem;
}
body {
  margin: 1rem auto;
  background: #F5F5F7;
  max-width: 600px;
  min-width: 200px;
}

#colorWheel {
  top: 100px;
  height: 100px;
  width: 100px;
  margin: 0 auto;
  position: relative;
  transform-origin: 50px 150px;
  user-select: none;
  transition: all 0.5s linear;
}

#colorWheel span {
  position: absolute;
  transform-origin: 50% 50%;
  border-style: solid;
  border-width: 150px 50px;
  box-sizing: border-box;
}

#colorWheel span.color01 {
  transform: rotate(0deg);
  border-color: #43a1cd transparent transparent transparent;
}

#colorWheel span.color02 {
  transform: rotate(36deg);
  border-color: #639b47 transparent transparent transparent;
}

#colorWheel span.color03 {
  transform: rotate(72deg);
  border-color: #9ac147 transparent transparent transparent;
}

#colorWheel span.color04 {
  transform: rotate(108deg);
  border-color: #e1e23b transparent transparent transparent;
}

#colorWheel span.color05 {
  transform: rotate(144deg);
  border-color: #f7941e transparent transparent transparent;
}

#colorWheel span.color06 {
  transform: rotate(180deg);
  border-color: #ba3e2e transparent transparent transparent;
}

#colorWheel span.color07 {
  transform: rotate(216deg);
  border-color: #9a1d34 transparent transparent transparent;
}

#colorWheel span.color08 {
  transform: rotate(252deg);
  border-color: #662a6c transparent transparent transparent;
}

#colorWheel span.color09 {
  transform: rotate(288deg);
  border-color: #272b66 transparent transparent transparent;
}

#colorWheel span.color10 {
  transform: rotate(324deg);
  border-color: #2d559f transparent transparent transparent;
}

#colorWheel:before {
  content: "";
  width: 300px;
  height: 300px;
  overflow: hidden;
  position: absolute;
  top: -30px;
  left: -130px;
  border-radius: 100%;
  border: 30px solid #ffffff;
  z-index: 100;
}

#colorWheel:after {
  content: "";
  width: 100px;
  height: 100px;
  overflow:...