JSFiddle - React, Tailwind, and code Playground

by queeeeenz

HTML

<script src="https://cdn.tailwindcss.com"></script>
<div class="flex justify-between items-center bg-gray-50 p-2 border border-gray-200">
  <div class="bg-gray-200 p-2 rounded">Menu</div>
  <div class="bg-gray-200 p-2 rounded w-[150px] text-center">Search</div>
  <div class="bg-gray-200 p-2 rounded" id="cart">Cart (2)</div>
</div>

<button class="bg-teal-100 mt-2 py-2 px-4 rounded-lg border border-teal-300" id="changeLanguage">
  Change Language
</button>

JavaScript

document.querySelector('#changeLanguage').addEventListener('click', () => {
  if (document.querySelector('#cart').innerText === 'Cart (2)') {
    document.querySelector('#cart').innerText = 'Kariton Ti Panaggatang (2)'
  } else {
    document.querySelector('#cart').innerText = 'Cart (2)'
  }
})