JSFiddle - React, Tailwind, and code Playground

by borisbg81

HTML

<div id="parametersApp">
  <form action="post" class="parameters-form">
    <div class="parameters-form__options">
      <div class="parameters-form__option">
        <div class="parameters-form__option-name">Элемент 1</div>
        <div class="parameters-form__select">
          <select v-model="elementSelected">
            <option :value="index" v-for="(item, index) in elements">{{item.name}}</option>
          </select>
          <div class="parameters-form__select-arrow"></div>
          <div class="parameters-form__select-arrow"></div>
        </div>
      </div>
      <div class="parameters-form__option">
        <div class="parameters-form__option-name">Элемент 2</div>
        <div class="parameters-form__select">
          <select v-model="secondElementSelected">
            <option :value="index" v-for="(item, index) in secondList">{{item.param}}</option>
          </select>
          <div class="parameters-form__select-arrow"></div>
          <div class="parameters-form__select-arrow"></div>
        </div>
      </div>
      <div class="parameters-form__option">
        <div class="parameters-form__option-name">Элемент 3</div>
        <div class="parameters-form__select">
          <select v-model="thirdElementSelected">
            <option :value="index" v-for="(item, index) in thirdList">{{item.separate}}</option>
          </select>
          <div class="parameters-form__select-arrow"></div>
          <div class="parameters-form__select-arrow"></div>
        </div>
      </div>
      <div class="parameters-form__option">
        <div class="parameters-form__option-name">Элемент 4</div>
        <input
          type="text"
          class="parameters-form__input"
          v-if="thirdElementSelected === 0"
          :value="secondList[secondElementSelected].elementYes"
          disabled
        >
        <input
          type="text"
          class="parameters-form__input"
          v-else
         ...

CSS

.parameters-form {
  display: grid;
  grid-template-columns: 100%;
  grid-gap: 30px;
  align-items: start;
}

.parameters-form__options {
  display: grid;
  grid-template-columns: 40% 40%;
  grid-gap: 20px;
}

.parameters-form__option-name {
  margin-bottom: 8px;
  font-size: 16px;
}

.parameters-form__select {
  position: relative;
  color: #444;
  background: transparent;
  border: 1px solid #bcbcbc;
  border-radius: 0;
}

.parameters-form__select > select {
  width: 100%;
  padding: 10px;
  background: transparent;
  border: 0;
  appearance: none;
  z-index: 1;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.parameters-form__select > select::-ms-expand {
  display: none;
}

.parameters-form__select-arrow {
  position: absolute;
  z-index: -1;
  border: 8px solid transparent;
  border-bottom: 0;
  right: 11px;
}

.parameters-form__select-arrow:nth-child(2) {
  top: 15px;
  border-top-color: #bdbdbd;
}

.parameters-form__select-arrow:nth-child(3) {
  top: 13px;
  border-top-color: #FFF;
}

.parameters-form__input {
  position: relative;
  width: 100%;
  padding: 11px 10px;
  border: 1px solid #bcbcbc;
  line-height: 1;
  background: transparent;
}

.parameters-form__input:focus {
  color: #000000;
}

.parameters-form__button {
  align-self: flex-end;
  margin-top: 16px;
  padding: 11px 17px;
}

.parameters-form__image {
  height: 70%;
}

JavaScript

new Vue({
  el: "#parametersApp",
  data() {
    return {
    elementSelected: 0,
    secondElementSelected: 0,
    thirdElementSelected: 0,
    secondElementUpdated: 0,
    elements: [
      {
        name: "10",
        second: [
          { param: "15", elementYes: "150", elementNo: "120" },
          { param: "25", elementYes: "230", elementNo: "210" }
        ],
        third: [
          { separate: "Да",
            image: 'https://dummyimage.com/600x400/d9d9d9/ffffff&text=Image+No1'
          },
          { separate: "Нет",
            image: 'https://dummyimage.com/600x400/d9d9d9/ffffff.png&text=Image+No2'
          }
        ]
      },
      {
        name: "20",
        second: [
          { param: "15", elementYes: "150", elementNo: "140" },
          { param: "25", elementYes: "250", elementNo: "240" }
        ],
        third: [
          { separate: "Да",
            image: 'https://dummyimage.com/600x400/d9d9d9/ffffff&text=Image+No1'
          },
          { separate: "Нет",
            image: 'https://dummyimage.com/600x400/d9d9d9/ffffff.png&text=Image+No2'
          }
        ]
      },
      {
        name: "30",
        second: [
          { param: "35", elementYes: "350", elementNo: "310" },
          { param: "45", elementYes: "450", elementNo: "420" },
          { param: "48", elementYes: "480", elementNo: "410" }
        ],
        third: [
          { separate: "Да",
            image: 'https://dummyimage.com/600x400/d9d9d9/ffffff.png&text=Image+No3'
          },
          { separate: "Нет",
            image: 'https://dummyimage.com/600x400/d9d9d9/ffffff.png&text=Image+No4'
          }
        ]
      },
      {
        name: "40",
        second: [
          { param: "55", elementYes: "550", elementNo: "530" },
          { param: "65", elementYes: "650", elementNo: "610" }
        ],
        third: [
          { separate: "Да",
            image: 'https://dummyimage.com/600x400/d9d9d9/ffffff.png&text=Image+No3'
          },
          {...