Restaurant P O S - Copy this React, Tailwind Component to your project
necesito-crear-una-interfaz-web-para-la-parte-de-pedidos-internos-de-un-restaurante,-te-paso-mi-codigo-html:-<!DOCTYPE-html>-<html-lang="es">-<head>-<meta-charset="UTF-8">-<meta-name="viewport"-content="width=device-width,-initial-scale=1.0">-<title>Restaurant-POS</title>-<link-href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"-rel="stylesheet">-<link-href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.13/css/intlTelInput.css"-rel="stylesheet">-<link-rel="stylesheet"-href="pos-styles.css">-</head>-<body>-<!---El-navbar-se-generará-automáticamente--->-<script-src="navbar.js"></script>-<div-class="pos-container">-<!---Top-Bar--->-<div-class="top-bar">-<div-class="top-left">-<button-id="menuToggle"-class="menu-toggle">-<i-class="fas-fa-bars"></i>-</button>-<div-class="search-container">-<i-class="fas-fa-search-search-icon"></i>-<input-type="text"-id="searchInput"-class="search-bar"-placeholder="Buscar-productos...">-</div>-</div>-<div-class="top-right">-<span-class="user-info">Hora</span>-<span-id="currentTime"-class="current-time"></span>-</div>-</div>-<!---Layout-Principal--->-<div-class="main-layout">-<!---Panel-de-Categorías--->-<aside-id="categoriesPanel"-class="categories-panel">-<h2>CATEGORÍAS</h2>-<div-id="categoriesList"-class="categories-list"></div>-</aside>-<!---Panel-de-Productos--->-<main-class="products-panel">-<div-id="productsGrid"-class="products-grid"></div>-</main>-<!---Panel-del-Carrito--->-<aside-class="cart-panel">-<div-class="cart-header">-<h2>Pedido-Actual</h2>-<button-id="clearCart"-class="clear-cart-btn">-<i-class="fas-fa-trash"></i>-</button>-</div>-<div-id="cartItems"-class="cart-items"></div>-<div-class="cart-footer">-<div-class="cart-subtotal">-<span>Subtotal:</span>-<span-id="cartSubtotal">$0.00</span>-</div>-<div-class="cart-total">-<span>Total:</span>-<span-id="cartTotal">$0.00</span>-</div>-<div-class="cart-actions">-<button-id="confirmOrder"-class="btn-btn-success">-<i-class="fas-fa-check"></i>-Confirmar-</button>-</div>-</div>-</aside>-</div>-</div>-<!---Modal-de-Gustos--->-<div-id="gustosModal"-class="modal">-<div-class="modal-content">-<div-class="modal-header">-<h3-id="gustosTitle"-class="modal-title"></h3>-<button-class="close-modal">×</button>-</div>-<!---Panel-de-selección-múltiple--->-<!---Panel-de-selección-múltiple--->-<div-id="multipleSelectionsPanel"-class="hidden">-<div-class="selection-type-btns"-id="selectionTypeBtnsContainer">-<!---Los-botones-se-agregarán-aquí-desde-JavaScript--->-</div>-</div>-<!---Panel-de-selección-de-gustos--->-<div-id="gustosSelectionPanel">-<div-id="gustosContainer"></div>-<div-class="quantity-control">-<button-class="qty-btn"-id="decreaseQty">-<i-class="fas-fa-minus"></i>-</button>-<span-id="currentQty">1</span>-<button-class="qty-btn"-id="increaseQty">-<i-class="fas-fa-plus"></i>-</button>-</div>-<textarea-id="notasAdicionales"-class="notas-input"-placeholder="Notas-adicionales..."></textarea>-</div>-<div-class="modal-footer">-<button-id="confirmGustos"-class="btn-btn-success">-<i-class="fas-fa-cart-plus"></i>-Agregar-al-Carrito-</button>-<button-id="cancelGustos"-class="btn-btn-danger">-<i-class="fas-fa-times"></i>-Cancelar-</button>-</div>-</div>-</div>-<!---Modal-de-Confirmación-de-Pedido--->-<div-id="confirmModal"-class="modal"-style="display:-none;">-<div-class="modal-content"-style="width:-90%;-max-width:-600px;-padding:-1rem;-border-radius:-8px;-background:-white;">-<div-class="modal-header"-style="display:-flex;-justify-content:-space-between;-align-items:-center;-padding:-1rem;-background:-#333;-color:-white;-border-radius:-8px-8px-0-0;">-<h3-style="margin:-0;">Confirmar-Pedido</h3>-<button-class="close-modal"-onclick="cerrarConfirmModal()"-style="background:-none;-border:-none;-color:-white;-font-size:-1.5rem;-cursor:-pointer;">×</button>-</div>-<div-class="modal-body"-style="padding:-1rem;">-<form-id="orderForm"-class="order-form">-<div-class="form-group"-style="margin-bottom:-1.5rem;">-<label-style="font-weight:-bold;">Tipo-de-Entrega</label>-<div>-<label><input-type="radio"-name="tipoEntrega"-value="local"-required-onclick="mostrarCampos('local')">-Local</label>-<label-style="margin-left:-1rem;"><input-type="radio"-name="tipoEntrega"-value="delivery"-required-onclick="mostrarCampos('delivery')">-Delivery</label>-</div>-</div>-<div-id="localFields"-class="hidden"-style="display:-none;">-<div-class="form-group"-style="margin-bottom:-1.5rem;">-<label-for="nombre"-style="font-weight:-bold;">Nombre</label>-<input-type="text"-id="nombre"-required-style="width:-100%;-padding:-0.5rem;-border:-1px-solid-#ddd;-border-radius:-8px;">-</div>-<div-class="form-group"-style="margin-bottom:-1.5rem;">-<label-style="font-weight:-bold;">Método-de-Pago</label>-<div-class="payment-methods"-style="display:-flex;-gap:-1rem;-margin-top:-0.5rem;">-<label-class="payment-option">-<input-type="radio"-name="metodoPago"-value="efectivo"-required>-<span-style="margin-left:-0.5rem;">Efectivo</span>-</label>-<label-class="payment-option">-<input-type="radio"-name="metodoPago"-value="debito"-required>-<span-style="margin-left:-0.5rem;">Débito</span>-</label>-</div>-</div>-</div>-<div-id="deliveryFields"-class="hidden"-style="display:-none;">-<div-class="form-group"-style="margin-bottom:-1.5rem;">-<label-for="nombreDelivery"-style="font-weight:-bold;">Nombre</label>-<input-type="text"-id="nombreDelivery"-required-style="width:-100%;-padding:-0.5rem;-border:-1px-solid-#ddd;-border-radius:-8px;">-</div>-<div-class="form-group"-style="margin-bottom:-1.5rem;">-<label-for="telefono"-style="font-weight:-bold;">Teléfono</label>-<input-type="tel"-id="telefono"-required-style="width:-100%;-padding:-0.5rem;-border:-1px-solid-#ddd;-border-radius:-8px;">-</div>-<div-class="form-group"-style="margin-bottom:-1.5rem;">-<label-for="direccion"-style="font-weight:-bold;">Dirección</label>-<input-type="text"-id="direccion"-placeholder="Ingresa-tu-dirección"-autocomplete="off"-style="width:-100%;-padding:-0.5rem;-border:-1px-solid-#ddd;-border-radius:-8px;">-</div>-<div-class="form-group"-style="margin-bottom:-1.5rem;">-<label-style="font-weight:-bold;">Método-de-Pago</label>-<div-class="payment-methods"-style="display:-flex;-gap:-1rem;-margin-top:-0.5rem;">-<label-class="payment-option">-<input-type="radio"-name="metodoPago"-value="efectivo"-required-onclick="toggleCambio(true)">-<span-style="margin-left:-0.5rem;">Efectivo</span>-</label>-<label-class="payment-option">-<input-type="radio"-name="metodoPago"-value="debito"-required-onclick="toggleCambio(false)">-<span-style="margin-left:-0.5rem;">Débito</span>-</label>-</div>-</div>-<div-id="cambioContainer"-class="form-group-hidden"-style="display:-none;-margin-bottom:-1.5rem;">-<label-for="cambio"-style="font-weight:-bold;">¿Con-cuánto-paga?</label>-<input-type="number"-id="cambio"-step="0.01"-style="width:-100%;-padding:-0.5rem;-border:-1px-solid-#ddd;-border-radius:-8px;">-</div>-</div>-<div-id="notasConfirmar"-class="form-group-hidden"-style="margin-bottom:-1.5rem;">-<label-for="notas"-style="font-weight:-bold;">Notas-adicionales-del-pedido</label>-<textarea-id="notas"-style="width:-100%;-padding:-0.5rem;-border:-1px-solid-#ddd;-border-radius:-8px;"></textarea>-</div>-</form>-</div>-<div-class="modal-footer"-style="padding:-1rem;-display:-flex;-justify-content:-space-between;">-<button-id="submitOrder"-class="btn-btn-success"-onclick="confirmarPedido()"-style="width:-100px;-background:-#4CAF50;-color:-white;-border-radius:-8px;-border:-none;-padding:-0.75rem;">-Confirmar-</button>-<button-id="cancelConfirm"-class="btn-btn-danger"-onclick="cerrarConfirmModal()"-style="width:-100px;-background:-#ff4b4b;-color:-white;-border-radius:-8px;-border:-none;-padding:-0.75rem;">-Cancelar-</button>-</div>-</div>-</div>-<!---Toast-Notifications--->-<div-id="notification"-class="notification-hidden"></div>-<div-id="spinner"-class="spinner-hidden"-style="display:-none;-position:-fixed;-top:-0;-left:-0;-width:-100%;-height:-100%;-background:-rgba(0,-0,-0,-0.5);-display:-flex;-align-items:-center;-justify-content:-center;-z-index:-1000;">-<div-style="width:-50px;-height:-50px;-border:-5px-solid-#f3f3f3;-border-top:-5px-solid-#3498db;-border-radius:-50%;-animation:-spin-1s-linear-infinite;">-</div>-</div>-<style>-@keyframes-spin-{-0%-{-transform:-rotate(0deg);-}-100%-{-transform:-rotate(360deg);-}-}-</style>-<script-src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.13/js/intlTelInput.min.js"></script>-<script-src="pos-utils.js"></script>-<script-src="pedidoAdmin.js"></script>-</body>-</html>-mira-bien-lo-qeu-hace-y-creame-una-interfaz-resposnive-amigable-sin-poerder-contenido-seria-un-sistema-de-POS
