JSFiddle - React, Tailwind, and code Playground

HTML

<aricle class="contas">
  <!-- row 0 -->
    <input class="contas__head" placeholder="0" type="text" />
  <!-- row 1 -->
  <button class="contas__btn">C</button>
  <button class="contas__btn">()</button>
  <button class="contas__btn">%</button>
  <button class="contas__btn">/</button>
  <!-- row 2 -->
  <button class="contas__btn">7</button>
  <button class="contas__btn">8</button>
  <button class="contas__btn">9</button>
  <button class="contas__btn">*</button>

  <!-- row 3 -->
  <button class="contas__btn">4</button>
  <button class="contas__btn">5</button>
  <button class="contas__btn">6</button>
  <button class="contas__btn">-</button>


  <!-- row 4 -->
  <button class="contas__btn">1</button>
  <button class="contas__btn">2</button>
  <button class="contas__btn">3</button>
  <button class="contas__btn">+</button>

  <!-- row 5 -->
  <button class="contas__btn">+/-</button>
  <button class="contas__btn">0</button>
  <button class="contas__btn">.</button>
  <button class="contas__btn">=</button>
</aricle>

SCSS

$contas-color: #f2f2f2;
$contas-fill: #000000;
$contas-fill-light:#202020;
$contas-radius: 1rem;
$contas-space: 0.75rem;
$contas-field-size: 4rem;
$contas-btn-size: var(--contas-btn-size, 2.5rem);
$contas-btn-hover-fill: #ff810f;


body {
  display: flex;
  align-items: center;
  justify-content: center;
  
  min-height: 100vh;
    
  padding: 1.5rem;
  background-color: $contas-color;
}

.contas {
  position: relative;
  
  display: grid;
  grid-gap: 0.8rem 0.5rem;
  grid-template-columns: repeat(4, $contas-btn-size);
  justify-content: center;
  align-items: center;
  
  width: 12.5rem;
  padding: calc(#{ $contas-field-size + ($contas-space* 1.5)}) $contas-space ($contas-space* 1.5) ;

  background-color: $contas-fill;
  border-radius: $contas-radius;

  overflow: hidden;
 
  &__head { 
    position: absolute;
    inset: 0 0 auto;

    min-height: $contas-field-size;

    padding:  0 ($contas-space*1.5);

    font-size: 1.5rem;
    font-weight: 500;
    text-align:right;
    color:$contas-color;
    
    border: unset;
    user-select: none;
    background: $contas-fill-light;  
    
    pointer-events:none;
    
    &:focus, &:active, &:hover {
      color:$contas-color;
      outline: none;
      box-shadow: none;
    } 
  }

  &__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: white;

    width: $contas-btn-size;
    aspect-ratio: 1 / 1;

    text-align: center;

    border-radius: 50%; 
    border: unset;
    background-color: $contas-fill-light;
    
    transition: .3s lianer;
    transition-property: background-color, box-shadow, transform;

    cursor: pointer;
    
    &:hover, &:active{
       background-color: $contas-btn-hover-fill;
    }
    
     &:active{
       transform: scale(1.15);
    }
  }
}