JSFiddle - React, Tailwind, and code Playground

by Wagner Souza

HTML

<div id="boxsorte">

      <p id="fontuno">Sorteio de Cards Bronze</p>

      <button onclick="randNumber()">Realizar Sorteio</button>
      <button onclick="doReset()">Reset</button>

      <p id="numbers" class="num"></p>
                                                               
   </div>

CSS

#boxsorte {
     webkit-box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.2);
     box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.2);
     padding: 10px;
     width: 300px;
     background: #fff;
     border-radius: 10px;
     height: 170px;
     text-align: center;
     margin: 10px;
   }

   #fontuno {
     font-weight: bold;
     font-size: 20px;
   }

   #ulsor {
     list-style-type: none;
     display: inline-flex;
   }

   .num {
     background: #F4F4F4;
     border-radius: 10px;
     padding: 10px;
     height: 50px;
   }

JavaScript

function randNumber()
   {
      var numbers = [1,1,1,1,1,2,2,2,2,2,3,3,3,3,3,4,4,4,4,4,5,5,5,5,5,6,6,6,6,6,7,7,7,7,7,8,8,8,8,8,9,9,9,9,9,10];
      var returns = 3;
      var element = document.getElementById('numbers');

      element.innerHTML = '';

      do {
         var rand = Math.floor(Math.random() * numbers.length);
         element.innerHTML += 'O card sorteado Ă©: ' + numbers[rand] + '<br>';
         returns--;
      }
      while(returns > 0);
   }

   function doReset()
   {
      var element = document.getElementById('numbers');
      return element.innerHTML = '';
   }