JSFiddle - React, Tailwind, and code Playground

by Kanatantsin

HTML

<div id="car">
  Твой автомобиль мечты <span id="modelyear"></span> года выпуска стоит: $<span id="pricetag"></span>
  <div id="body"></div>
  <div id="frontwheel"></div>
  <div id="backwheel"></div>
</div>

CSS

#car {
  font-family: Arial;
}

#body {
  position: absolute;
  top: 50px;
  width: 80%;
  height: 100px;
  background-color: #000000;
  text-align: center;
}

#backwheel {
  position: absolute;
  left: 10%;
  top: 130px;
  background-color: #ffffff;
  border: 3px solid black;
  border-radius: 50%;
  width: 40px;
  height: 40px;
}

#frontwheel {
  position: absolute;
  left: 50%;
  top: 130px;
  background-color: #ffffff;
  border: 3px solid black;
  border-radius: 50%;
  width: 40px;
  height: 40px;
}

JavaScript

var dreamCar = {
  make: "Oldsmobile",
  model: "98",
  color: "brown",
  year: 1983,
  bodyStyle: "Luxury Car",
  price: 4500
};

document.getElementById("pricetag").innerHTML = dreamCar.price;
document.getElementById("modelyear").innerHTML = dreamCar.year;
document.getElementById("body").style.backgroundColor = dreamCar.color;
document.getElementById("body").innerHTML = dreamCar.make + " " + dreamCar.model;