JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>
<title>salut</title>
</head>
<body>
<button class="favorite styled"
        type="button" onclick="acheter_vie()">
    Add to favorites
</button>
<p></p>
<button name="favorite" type="button">
  <svg aria-hidden="true" viewBox="0 0 10 10">
    <path d="M7 9L5 8 3 9V6L1 4h3l1-3 1 3h3L7 6z"/>
  </svg>
  Ajouter aux favoris
</button>
</body>
</html>

CSS

.styled {
    border: 0;
    line-height: 2.5;
    padding: 0 20px;
    font-size: 1rem;
    text-align: center;
    color: #fff;
    text-shadow: 1px 1px 1px #000;
    border-radius: 10px;
    background-color: rgba(220, 0, 0, 1);
    background-image: linear-gradient(to top left, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) 30%, rgba(0, 0, 0, 0));
    box-shadow: inset 2px 2px 3px rgba(255, 255, 255, 0.6), inset -2px -2px 3px rgba(0, 0, 0, 0.6);
}

.styled:hover {
    background-color: rgba(255, 0, 0, 1);
}

.styled:active {
    box-shadow: inset -2px -2px 3px rgba(255, 255, 255, 0.6), inset 2px 2px 3px rgba(0, 0, 0, 0.6);
}

JavaScript

var argent=100;
var vie=5;
function acheter_vie(){
calcul(argent, "moins", 25)
calcul(vie, "plus", 1)
alert(argent);
alert(vie);
}
function calcul(variable, operateur, a){
if (operateur=="plus"){
var variable=variable + a;
}
if (operateur=="moins"){
var variable=variable - a;
}
if (operateur=="fois"){
var variable=variable * a;
}
if (operateur=="diviser"){
var variable=variable / a;
}
}