PLA tested

code supporting palette & link

by y_duf

HTML

### Tech Palette
like [USSA design](https://www.youtube.com/@ussadesign/videos)

{::nomarkdown}
<div class="palette">
  <!-- Repeat the color boxes and product lists for other colors -->
  <div class="color-box-container">
    <svg class="color-box">
      <rect width="100%" height="100%" fill="white" />
    </svg>
    <div class="product-list">White
      <ul>
        <li><a href="https://www.amazon.fr/gp/product/B017HAIMZU/ref=ppx_yo_dt_b_asin_title_o08_s00?ie=UTF8&psc=1">ICE</a> easy to print - thick 
          - 205° </li>
        <li><a href="https://www.amazon.fr/Verbatim-Printer-Filament-PLA-blanc/dp/B00WRBI59S/ref=sr_1_1?ie=UTF8&qid=1509281347&sr=8-1&keywords=verbatim+pla">Verbatim</a> - very thin/precise print - 205° </li>
      </ul>
    </div>
  </div>

  <!-- Repeat the color boxes and product lists for other colors -->
  <div class="color-box-container">
    <svg class="color-box">
      <rect width="100%" height="100%" class="orange"  />
    </svg>
    <div class="product-list">Orange
      <ul>
        <li><a href="https://www.amazon.fr/gp/product/B017HAIB1A/ref=ppx_yo_dt_b_asin_title_o01_s00?ie=UTF8&psc=1">Obstinate Orange (ICE)</a></li>
      </ul>
    </div>
  </div>

  <!-- Repeat the color boxes and product lists for other colors -->
  <div class="color-box-container">
    <svg class="color-box">
      <rect width="100%" height="100%" fill="red"  />
    </svg>
    <div class="product-list">Red
      <ul>
        <li><a href="https://www.amazon.fr/gp/product/B074PDDPJ7/ref=oh_aui_detailpage_o01_s00?ie=UTF8&psc=1">rouge pompier (dagoma chromatic)</a></li>
      </ul>
    </div>
  </div>

  <!-- Repeat the color boxes and product lists for other colors -->
  <div class="color-box-container">
    <svg class="color-box">
      <rect width="100%" height="100%" class="light-grey"  />
    </svg>
    <div class="product-list">Light Grey 
      <ul>
        <li><span class="circle" style="background-color: #D2D7D3;"></span><a...

CSS

.palette {
            display: flex;
        }

        .color-box-container {
            position: relative;
            margin: 10px;
        }

        .color-box {
            width: 50px;
            height: 50px;
            cursor: pointer;
            transition: transform 0.2s;
            border-radius: 10px;
            stroke: black; /* Stroke color */
            stroke-width: 4; /* Stroke width */
            rx: 10; /* Default rx value for rounded corners */
            ry: 10; /* Default ry value for rounded corners */
        }

        .color-box:hover {
            transform: scale(1.1);
        }

        .product-list {
            display: none;
            position: absolute;
            background-color: white;
            padding: 10px;
            border: 1px solid #ccc;
            z-index: 1;
            border-radius: 5px;
            top: 30px; /* Adjust the top position to match your layout */
            left: 0;
            max-width: 500px; /* Set the maximum width */
            min-width: 100px; /* Set the minimum width */
            white-space: nowrap; /* Prevent text from wrapping */
            overflow: auto; /* Enable scrollbars for overflow text */
        }
  
        /* Define different styles for list items */
        .product-list ul {
            list-style-type: none; /* Remove default list marker */
            padding: 0;
        }

        .color-box-container:hover .product-list {
            display: block;
        }
  
         /* Light grey */
        .light-grey {
            fill: #f2f2f2;
        }

        /* Grey */
        .grey {
            fill: #ccc;
        }

        /* Dark grey */
        .dark-grey {
            fill: #bbb; /* Text color for dark grey */
        }
  
          /* Orange */
        .orange {
            fill: orange; /* Set fill color to orange */
        }
  
        /* Colored circle */
        .circle {
            display: inline-block;
            width: 20px;
         ...