JSFiddle - React, Tailwind, and code Playground

by Константин Дралюк

HTML

<style>
/* ignore */
html {font-family: "Manrope", Arial, "Helvetica Neue", Helvetica, sans-serif;font-size: 10px;padding: 100px 0;}
</style>

<div class="s-detail-palette">
  <div class="s-detail-palette__links">
    <a href="#" class="s-detail-palette__link is-active" style="background: #e91e63" role="tooltip" data-microtip-position="top" aria-label="Pink"></a>
    <a href="#" class="s-detail-palette__link" style="background: #0d9687" role="tooltip" data-microtip-position="top" aria-label="Teal"></a>
    <a href="#" class="s-detail-palette__link" style="background: #4051b5" role="tooltip" data-microtip-position="top" aria-label="Indigo"></a>
    <a href="#" class="s-detail-palette__link" style="background: #fec008" role="tooltip" data-microtip-position="top" aria-label="Amber"></a>
    <a href="#" class="s-detail-palette__link" style="background: #8bc24a" role="tooltip" data-microtip-position="top" aria-label="Light Green"></a>
    <a href="#" class="s-detail-palette__link" style="background: #14bcd4" role="tooltip" data-microtip-position="top" aria-label="Cyan"></a>
    <a href="#" class="s-detail-palette__link" style="background: #ffeb3b" role="tooltip" data-microtip-position="top" aria-label="Yellow"></a>
    <a href="#" class="s-detail-palette__link" style="background: #cddc39" role="tooltip" data-microtip-position="top" aria-label="Lime"></a>
    <a href="#" class="s-detail-palette__link" style="background: #fe5721" role="tooltip" data-microtip-position="top" aria-label="Deep Orange"></a>
  </div>
</div>

<div class="s-detail-palette">
  <div class="s-detail-palette__links">
    <span class="s-detail-palette__link" style="background: #14bcd4"></span>
    <span class="s-detail-palette__link" style="background: #ffeb3b"></span>
    <span class="s-detail-palette__link" style="background: #cddc39"></span>
    <span class="s-detail-palette__more">+10</span>
  </div>
</div>

CSS

.s-card__color-title span {
  color: #212121;
  margin-left: .2em;
}

.s-product .s-detail-palette {
  margin-top: 1rem;
}

.s-detail-palette {
}

.s-detail-palette__links {
  display: flex;
  flex-wrap: wrap;
  margin: -.4rem -.3rem;
  align-items: center;
}

.s-detail-palette__link {
  width: 2.4rem;
  height: 2.4rem;
  flex-shrink: 0;
  border-radius: 50%;
  margin: .4rem .3rem;
  transition: .15s;
  box-shadow: inset 0 0 0 1px transparent;
}

.s-detail-palette__link:link:hover {
  box-shadow: inset 0 0 0 1px #000;
}

.s-detail-palette__link.is-active {
  box-shadow: inset 0 0 0 1px #000, inset 0 0 0 .4rem #fff;
  pointer-events: none;
}

.s-detail-palette__more {
  margin: 0 .3rem;
  font-size: 1.6rem;
  cursor: default;
  font-weight: 400;
  color: #666;
  line-height: 1;
}

@media (max-width: 767px) {
  .s-detail-palette__link {
    width: 3.2rem;
    height: 3.2rem;
  }
  .s-detail-palette__link.is-active {
    box-shadow: inset 0 0 0 1px #000, inset 0 0 0 .6rem #fff;
  }
}


/* Microtip vendor */
[aria-label][role~="tooltip"]{position:relative}[aria-label][role~="tooltip"]::before,[aria-label][role~="tooltip"]::after{transform:translate3d(0,0,0);-webkit-backface-visibility:hidden;backface-visibility:hidden;will-change:transform;opacity:0;pointer-events:none;transition:all var(--microtip-transition-duration,.18s) var(--microtip-transition-easing,ease-in-out) var(--microtip-transition-delay,0s);position:absolute;box-sizing:border-box;z-index:10;transform-origin:top}[aria-label][role~="tooltip"]::before{background-size:100% auto!important;content:""}[aria-label][role~="tooltip"]::after{background:rgba(17,17,17,.9);border-radius:4px;color:#fff;content:attr(aria-label);font-size:var(--microtip-font-size,13px);font-weight:var(--microtip-font-weight,normal);text-transform:var(--microtip-text-transform,none);padding:.5em...