JSFiddle - React, Tailwind, and code Playground

HTML

<label>400 blabla
<input type="checkbox" data-price="400">
</label>

<label>600 blablabla
<input type="checkbox" data-price="600">
</label>

<label>1400 blabla blabla
<input type="checkbox" data-price="1400">
</label>

<p>Total: <span id='total'>0</span></p>

CSS

label {
  display: block;
}

JavaScript

document.querySelectorAll('input').forEach(i => 
  i.addEventListener('change', calc))
  
function calc() {
	const price = [...document.querySelectorAll('input:checked')].map(i => i.dataset.price).reduce((a, b) => +a + +b, 0)
  total.textContent = price
}