JSFiddle - React, Tailwind, and code Playground

HTML

<form method="post" action="">

    <div class="row">
        <div class="large-3 columns end ">
            <img src="images/card_default.png" class="box_card" width="100px">
        </div>
    </div>
    <div class="row">
         <div class="large-1 columns">
            <label>Carta:</label>
            <input name="carta" required type="text">
         </div>
         <div class="large-2 columns end" style='padding-top: 22px'>
             <a href="" class="button tiny carta_aleatoria">Carta Aleatória</a>
         </div>
    </div>
    <div class="row">
         <div class="large-4 columns">
              <label>Descrição</label>
              <input name="descricao" required type="text">
         </div>
    </div> <!-- primeira linha do formulário -->
    <div class="row" style="margin-top: 10px;">
         <div class="large-2 columns end">
              <label>Critério:</label>
              <select name="criterio">
                 <option value="direita">Direita</option>
                 <option value="esquerda">Esquerda</option>
                 <option value="ambos">Ambos</option>
              </select>
         </div>
    </div> <!-- fim da terceira linha -->
    <div class="row">
         <div class="large-12 columns">
              <label>Quantidade de Pontos:</label>
         </div>
         <div class="large-1 columns end">
              <select name="pontos">
                 <option value="0">0</option>
                 <option value="0">1</option>
                 <option value="0">2</option>
              </select>
         </div>
    </div>
</form>

CSS

/*my cods*/
/*configuração da UL*/
strong{
  display: inline;
}
p{
  display: inline;
}

.box_card{
    border: 1px solid #ccc;
    margin-bottom: 10px;
  }

/*em regra extra de movimentação*/
.regra_movimento td a:hover{
  text-decoration: underline;
}

#visor{
  margin-top: 15px;
  text-align: center;
}

.cartas ul{
  padding-bottom: 20px;
  list-style: none;
  display: block;
  float: left;
  border: 0.0625rem solid #93AAB5;
  background: #E7ECEF;
  width: 100%;
  margin-left: -0.0625rem;
}

.cartas ul li{
  font-size: 11px;
  background: #70909D;
  float: left;
  border: 1px solid #ccc;
  margin: 5px 8px;
  border-radius: 10px;
  text-align: center;
  display: inline;
}

.cartas ul li img{
  border: 1px solid #ccc;
  display: block;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  width: 103px;
  height: 127px;
  margin-bottom: 3px;
}

.cartas ul li strong{
  color: black;
}

.cartas ul li span{
  color: #333;
}

/*termino da configuração da UL*/
.pergunta{
  margin-top: 0.625rem;
}

.pergunta>span{
  font-size: 0.8125rem;
}

.ufc{
  margin-top: 1rem;
  height: 3.125rem;
}

.leac{
  margin-top: 1rem;
  height: 2.5rem;
}

.filtro{
  margin-top: 1.375rem;
}

.esqueci{
  font-size: 0.75rem;
}

.form_filtro{
  margin-top: 1.875rem;
}

.form_filtro_card{
  margin-top: 3.125rem;
}

table tbody tr td{
  text-align: center;
}

table tbody tr td img{
  display: block;
}

.spc_lado{
  margin: 0 5px;
}

.spc_cima{
margin: 5px 0;
}

.spc_baixo{
  margin: 0 0 5px 0;
}
/*end of my cods*/

meta.foundation-version {
  font-family: "/5.3.1/"; }

meta.foundation-mq-small {
  font-family: "/only screen/";
  width: 0em; }

meta.foundation-mq-medium {
  font-family: "/only screen and (min-width:40.063em)/";
  width: 40.063em; }

meta.foundation-mq-large {
  font-family: "/only screen and (min-width:64.063em)/";
  width: 64.063em; }

meta.foundation-mq-xlarge {
  font-family: "/only screen and (min-width:90.063em)/";
  width: 90.063em; }

meta.foundation-mq-xxlarge...

JavaScript

//Escolhendo uma carta (número) aleatoria entre 1 e 895
$(function (){
    
    var numero = Math.floor((Math.random()*895)+1);
    
    $(".carta_aleatoria").click(function (){
        alert(numero);
        $(this).empty().text(numero);
    });
    
});