JSFiddle - React, Tailwind, and code Playground

HTML

<h5>1つめ</h5>
<ul>
  <li>Background color1 <input type="color" data-bg="1"></li>
  <li>Background color2 <input type="color" data-bg="1"></li>
</ul>
<p class="msg" data-bg-area="1">背景色（CSSでデフォルト灰色にしてます）</p>

<hr>

<h5>2つめ</h5>
<ul>
  <li>Background color1 <input type="color" data-bg="2"></li>
  <li>Background color2 <input type="color" data-bg="2"></li>
</ul>
<p class="msg" data-bg-area="2">背景色（CSSでデフォルト灰色にしてます）</p>

<hr>

<h5>3つめ</h5>
<ul>
  <li>Background color1 <input type="color" data-bg="3"></li>
  <li>Background color2 <input type="color" data-bg="3"></li>
</ul>
<p class="msg" data-bg-area="3">背景色（CSSでデフォルト灰色にしてます）</p>

CSS

.msg {
  width: 200px;
  height: 100px;
  background-color: #ccc;
}

JavaScript

// 必要な要素の取得
const colorInputs = document.querySelectorAll('input[type="color"]');

// input全てにイベントリスナーを設定
colorInputs.forEach(input => input.addEventListener('change', setBGcolor));

// 背景色を変更する関数
function setBGcolor(event) {
  // カスタムデータ属性data-bgの値（数字）を取得
  const number = event.currentTarget.dataset.bg;

  // そのデータ属性をもつinputを取得
  const inputs = document.querySelectorAll(`[data-bg="${number}"]`);
  // input2つとものvalueを取得し、それぞれ変数に代入
  const [color1, color2] = [...inputs].map(input => input.value);

  // 同じ番号のdata-bg-areaをもつ要素を取得
  const msgArea = document.querySelector(`[data-bg-area="${number}"]`);
  // 取得されるvalueにはすでに#がついているので、↓の中で#を書いてはいけない
  msgArea.style.background = `linear-gradient(${color1}, ${color2})`;
}