JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    <head>
        <script>
        document.addEventListener("DOMContentLoaded", function() {

var shoppingList = document.createElement('ol');
shoppingList.innerHTML = '<li>Milk</li><li>Eggs</li><li>Bread</li>';
document.body.appendChild(shoppingList);

var baconAndCheese = document.createElement('li');
baconAndCheese.innerHTML = 'Bacon and Cheese';
shoppingList.appendChild(baconAndCheese);

var riceButter = document.createElement('li');
riceButter.innerHTML = 'Rice and Butter';
shoppingList.appendChild(riceButter);

document.title = 'Shopping Cart';

var header = document.createElement('h1');
header.innerHTML = 'Shopping Cart';
document.body.appendChild(header);

document.body.appendChild(shoppingList);

baconAndCheese.innerHTML = 'Bacon, Cheese';

var cheese = document.createElement('li');
cheese.innerHTML = 'Cheese';
shoppingList.appendChild(cheese);

shoppingList.removeChild(baconAndCheese);

var tumeric = document.createElement('li');
tumeric.innerHTML = 'Tumeric';
shoppingList.appendChild(tumeric);
var curry = document.createElement('li');
curry.innerHTML = 'Curry';
shoppingList.appendChild(curry);
var pasta = document.createElement('li');
pasta.innerHTML = 'Pasta';
shoppingList.appendChild(pasta);

var riceButter = document.createElement('li');
riceButter.innerHTML = 'Rice, Butter';
shoppingList.appendChild(riceButter);

var rice = document.createElement('li');
rice.innerHTML = 'Rice';
shoppingList.appendChild(rice);
var butter = document.createElement('li');
butter.innerHTML = 'Butter';
shoppingList.appendChild(butter);

shoppingList.style.border = '1px solid black';

document.body.style.margin = 'auto';

shoppingList.style.textAlign = 'left';

header.style.textAlign = 'center';

shoppingList.style.border = '1px solid black';

shoppingList.style.border = '1px solid black';

var shoppingCart = document.createElement('div');
shoppingCart.innerHTML = '<img src="http://www.freeiconspng.com/uploads/milk-icon-4.png" alt="Milk">' +
  '<img...