JSFiddle - React, Tailwind, and code Playground

by rbrousla

HTML

<div id="car">
    This <span id="modelyear"></span> dream car can be yours for just: $<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;