JSFiddle - React, Tailwind, and code Playground

by guibattoni

HTML

function informacoes_produtos_view( $post ) { $produtos_meta_data = get_post_meta( $post->ID ); ?>

<style>
  .btt-metabox {
    display: inline-block;
    justify-content: space-between;
  }
  
  .btt-metabox-item {
    flex-basis: 30%;
  }
  
  .btt-metabox-item label {
    font-weight: 700;
    display: block;
    margin: .5rem 0;
  }
  
  .input-addon-wrapper {
    height: 30px;
    display: flex;
    align-items: center;
  }
  
  .input-addon {
    display: block;
    border: 1px solid #CCC;
    border-bottom-left-radius: 5px;
    border-top-left-radius: 5px;
    height: 100%;
    width: 30px;
    text-align: center;
    line-height: 30px;
    box-sizing: border-box;
    background-color: #888;
    color: #FFF;
  }
  
  .btt-metabox-input {
    border: 1px solid #CCC;
    border-left: none;
    margin: 0;
    width: 60%;
  }

</style>
<div class="btt-metabox">
  <div class="btt-metabox-item">
    <label for="btt-preco-input">Preço Geral:</label>
    <input id="btt-preco-geral-input" class="btt-metabox-input" type="text" name="preco_geral" value="<?= number_format($produtos_meta_data['preco_geral'][0], 2, ',', '.'); ?>">

  </div>

  <div class="btt-metabox-item">
    <label for="btt-preco-promo-input">Preço Promocional</label>
    <input id="btt-preco-promo-input" class="btt-metabox-input" type="text" name="preco_promo" value="<?= number_format($produtos_meta_data['preco_promo'][0], 2, ',', '.'); ?>">

  </div>
</div>
<div class="btt-metabox">
  <div class="btt-metabox-item">
    <label for="btt-quantidade-input">Quantidade</label>
    <input id="btt-quantidade-input" class="btt-metabox-input" type="text" name="quantidade" value="<?= $produtos_meta_data['quantidade'][0]; ?>">
  </div>

  <div class="btt-metabox-item">
    <label for="btt-peso-input">Peso:</label>
    <input id="btt-peso-input" class="btt-metabox-input" type="text" name="peso" value="<?= $produtos_meta_data['peso'][0]; ?>">
  </div>

</div>
<?php

}

function salvar_meta_info_produtos(...