JSFiddle - React, Tailwind, and code Playground

by karlovac

HTML

<div id="ui-tooltip-configure_c1525_p_20731-display-Left_Front_Left-areaMap_tooltip" class="ui-tooltip qtip ui-helper-reset ui-tooltip-default ui-tooltip-light configure-tooltipOverProductImagery configure-tooltip-container-template  ui-tooltip-pos-bc" tracking="true" role="alert" aria-live="polite" aria-atomic="false" aria-describedby="ui-tooltip-configure_c1525_p_20731-display-Left_Front_Left-areaMap_tooltip-content" aria-hidden="true" style="z-index: 15022; width: 107px;">
    <div class="ui-tooltip-tip" style="border: 0px !important; height: 8px; width: 8px; left: 50%; margin-left: -4px; bottom: -8px; background-color: transparent !important;">
        <canvas style="border: 0px !important; background-color: transparent !important;" height="8" width="8">
        </canvas>
    </div>    <div class="ui-tooltip-content" id="ui-tooltip-configure_c1525_p_20731-display-Left_Front_Left-areaMap_tooltip-content" aria-atomic="true">Palm - No Padding: Pearl <div class="configure-selected-value-header" style="display: block; background: rgb(230, 231, 232) !important;"> </div>
    </div>
</div>
~

CSS

/** Accordion **/
.ui-accordion-content {
  font-size: 15px;
  color: #2e2e2e;
  font-family: 'DINNextLTPro-BoldCondensed', 'DIN Next LT Pro', Arial, sans-serif;
  font-weight: normal;
}

.configure-accordion-swatch-wrapper .configure-product-attribute-text-restriction {
  display: block;
  font-size: 18px;
}
.configure-accordion-swatch-wrapper input {
  font-size: 18px !important;
}

.configure-controls-area {
  left: 0px;
  display: inline-block;
  vertical-align: top;
  position: relative;
}
.configure-controls-area .configure-hopup-accordion-container {
  background: #fff;
  color: #2e2e2e;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
  border: none;
}
.configure-controls-area .configure-hopup-accordion-container .ui-accordion {
  width: 231px !important;
  height: 460px;
}
body.pagetype-vpdp .configure-controls-area .configure-hopup-accordion-container .ui-accordion {
  display: none;
}
.configure-controls-area .configure-hopup-accordion-container .ui-accordion .kineticContainer {
  padding-left: 3px;
}
.configure-controls-area .configure-hopup-accordion-container .ui-accordion .configure-accordion-header {
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
  border: solid #000;
  border-width: 0px 0px 2px 0px;
  background: #ffffff;
  height: 36px;
  font-family: 'DINNextLTPro-BoldCondensed', Arial, sans-serif;
  font-size: 20px;
  letter-spacing: 2px;
  font-weight: normal;
  text-transform: uppercase;
}
.configure-controls-area .configure-hopup-accordion-container .ui-accordion .configure-accordion-header a {
  padding: 0 0 0 32px;
  color: #2e2e2e;
}
.configure-controls-area .configure-hopup-accordion-container .ui-accordion .configure-accordion-header.ui-state-active {
  border-top: solid #000;
  border-bottom: dashed #ccc;
  border-width: 0px 0px 1px 0px !important;
}
.configure-controls-area .configure-hopup-accordion-container .ui-accordion .configure-accordion-header.ui-state-active a {
 ...