JSFiddle - React, Tailwind, and code Playground

by borcagos

HTML

<div id=legend_widget>  
</div>

CSS

::-webkit-scrollbar {
    width: 6px;
    height: 3px;
}
 
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px;
}
 
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}

#legend_widget {
  background-color: rgb(230, 230, 230, 1);
  height: 300px;
  overflow-x: scroll; /* прокрутка по вертикали */
  width: 300px;
  padding: 5px;
}

.legend_row {
  display: flex;
  vertical-align: middle!important;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 5px;
  width: 100%;
  height: 20px;
}

.legend_color_box {
  display: inline-block;
  border-radius: 6px;
  height: 20px;
  width: 20px;
}
@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
.legend_text_box {
  font-family: 'Roboto', sans-serif;
  display: inline-block;
  padding-left: 5px;
  height: 20px;
}

JavaScript

⁵var legend_colors_array = [
	{name: "Пшеница озимая", 				color: "RGBA(28 , 117, 16 , 1)"},
	{name: "Сахарная свекла", 			color: "RGBA(194, 23 , 17 , 1)"},
	{name: "Ячмень", 								color: "RGBA(75 , 169, 227, 1)"},
	{name: "Пшеница яровая", 				color: "RGBA(98 , 179, 104, 1)"},
	{name: "Соя", 									color: "RGBA(230, 230, 44 , 1)"},
	{name: "Горох", 								color: "RGBA(31 , 63 , 171, 1)"},
	{name: "Гречиха", 							color: "RGBA(116, 44 , 163, 1)"},
	{name: "Кукуруза на зерно", 		color: "RGBA(40,  61 , 31 , 1)"},
	{name: "Подсолнечник", 					color: "RGBA(135, 82 , 0  , 1)"},
	{name: "Горчица", 							color: "RGBA(171, 171, 171, 1)"},
	{name: "Нет  в  севообороте", 	color: "RGBA(255, 255, 255, 1)"},
	{name: "Многолетние травы", 		color: "RGBA(79 , 79 , 79 , 1)"},
	{name: "Сидеральные пары", 			color: "RGBA(79 , 79 , 79 , 1)"},
	{name: "Пар", 									color: "RGBA(79 , 79 , 79 , 1)"},
	{name: "Сидеральный пар под", 	color: "RGBA(79 , 79 , 79 , 1)"},
	{name: "Залужение", 						color: "RGBA(204, 0  , 102, 1)"},
	{name: "Отказ (после 2018 г.)", color: "RGBA(0  , 255, 255, 1)"}
]

var LegendWidget = function() {
  return {
    create: function(domId, legendArray) {
      var parent = document.getElementById(domId);
      //legendArray.map(e=>console.warn(e));
      legendArray.forEach(e => {
        var row = document.createElement('div')
        row.setAttribute('class', 'legend_row');
				var colorBox = document.createElement('div')
        colorBox.setAttribute('class', 'legend_color_box');
        colorBox.setAttribute('style', `background-color: ${e.color}`)
        var textBox  = document.createElement('div')
        textBox.setAttribute('class', 'legend_text_box');
        textBox.innerText = e.name;
        row.appendChild(colorBox)
        row.appendChild(textBox)
        parent.appendChild(row)
      })
    }
  }
}();

LegendWidget.create('legend_widget', legend_colors_array);