Property Form - Copy this React, Tailwind Component to your project
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF 8"> <meta name="viewport" content="width=device width, initial scale=1.0"> <title>Gestione Completa Immobile Host</title> <style> body { font family: Arial, sans serif; margin: 0; padding: 0; background color: #f3f7fa; color: #333; } .container { max width: 900px; margin: 20px auto; padding: 20px; background: #ffffff; border radius: 10px; box shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } h1 { text align: center; color: #4a90e2; font size: 28px; margin bottom: 20px; } .input group, .checkbox group, .textarea group { margin bottom: 15px; } .input group label, .checkbox group label { display: block; font weight: bold; margin bottom: 5px; } .input group input, .textarea group textarea, .input group select { width: 100%; padding: 10px; border: 1px solid #ccc; border radius: 5px; } .checkbox group input { margin right: 10px; } .buttons { display: flex; justify content: space between; margin top: 20px; } .buttons button { padding: 10px 15px; border: none; border radius: 5px; color: #ffffff; background color: #4a90e2; cursor: pointer; font size: 16px; } .buttons button:hover { background color: #357ab7; } .section title { font size: 20px; color: #333; margin bottom: 10px; border bottom: 2px solid #4a90e2; padding bottom: 5px; } .device row { display: flex; gap: 10px; margin bottom: 10px; } .device row input, .device row select { flex grow: 1; } .add button { background color: #28a745; color: white; border: none; padding: 5px 10px; border radius: 3px; margin top: 5px; cursor: pointer; } .add button:hover { background color: #218838; } </style> </head> <body> <div class="container"> <h1>Gestione Immobile Host</h1> <div class="input group"> <label for="ota url">URL dell'annuncio OTA:</label> <input type="text" id="ota url" placeholder="Incolla il link qui..."> </div> <div class="section title">Informazioni Generali</div> <div class="input group"> <label for="property name">Nome Immobile:</label> <input type="text" id="property name" placeholder="Inserisci il nome dell'immobile"> </div> <div class="input group"> <label for="address">Indirizzo:</label> <input type="text" id="address" placeholder="Inserisci l'indirizzo completo"> </div> <div class="input group"> <label for="capacity">Capacità Massima Ospiti:</label> <input type="number" id="capacity" placeholder="Inserisci il numero massimo di ospiti"> </div> <div class="textarea group"> <label for="description">Descrizione Breve:</label> <textarea id="description" rows="3" placeholder="Descrivi brevemente l'immobile"></textarea> </div> <div class="section title">Regole della Casa</div> <div class="textarea group"> <label for="house rules">Regole della Casa:</label> <textarea id="house rules" rows="4" placeholder="Inserisci le regole della casa"></textarea> </div> <div class="section title">Contatti di Riserva</div> <div class="input group"> <label for="backup contact name">Nome Contatto di Riserva:</label> <input type="text" id="backup contact name" placeholder="Inserisci il nome del contatto di riserva"> </div> <div class="input group"> <label for="backup contact phone">Telefono Contatto di Riserva:</label> <input type="text" id="backup contact phone" placeholder="Inserisci il numero di telefono"> </div> <div class="section title">Check In e Check Out</div> <div class="input group"> <label for="checkin">Orario di Check In:</label> <input type="text" id="checkin" placeholder="Es. Dalle 14:00"> </div> <div class="input group"> <label for="checkout">Orario di Check Out:</label> <input type="text" id="checkout" placeholder="Es. Entro le 10:00"> </div> <div class="section title">WiFi</div> <div class="input group"> <label for="wifi name">Nome Rete WiFi:</label> <input type="text" id="wifi name" placeholder="Inserisci il nome della rete WiFi"> </div> <div class="input group"> <label for="wifi password">Password WiFi:</label> <input type="text" id="wifi password" placeholder="Inserisci la password del WiFi"> </div> <div class="section title">Dispositivi e Manuali</div> <div id="devices list"> <div class="device row"> <input type="text" placeholder="Nome Dispositivo"> <input type="text" placeholder="Modello Dispositivo"> <select> <option value="">Tipo Dispositivo</option> <option value="caldaia">Caldaia</option> <option value="termosifone">Termosifone</option> <option value="stufa pellet">Stufa a Pellet</option> <option value="pompa piscina">Pompa Piscina</option> <option value="altro">Altro</option> </select> </div> </div> <button class="add button" onclick="addDevice()">+ Aggiungi Dispositivo</button> <div class="section title">Ristoranti e Locali</div> <div id="restaurants list"> <div class="input group"> <input type="text" placeholder="Nome Ristorante/Locale"> <input type="text" placeholder="Tipo di Cucina/Locale"> <input type="text" placeholder="Distanza (es. 2km)"> </div> </div> <button class="add button" onclick="addRestaurant()">+ Aggiungi Ristorante/Locale</button> <div class="section title">Punti di Interesse</div> <div id="poi list"> <div class="input group"> <input type="text" placeholder="Nome Punto di Interesse"> <input type="text" placeholder="Descrizione Breve"> <input type="text" placeholder="Distanza (es. 1.5km)"> </div> </div> <button class="add button" onclick="addPOI()">+ Aggiungi Punto di Interesse</button> <div class="buttons"> <button>Salva Configurazione</button> <button>Anteprima</button> <button>Annulla</button> </div> </div> <script> function addDevice() { const container = document.getElementById('devices list'); const newRow = document.createElement('div'); newRow.classList.add('device row'); newRow.innerHTML = ` <input type="text" placeholder="Nome Dispositivo"> <input type="text" placeholder="Modello Dispositivo"> <select> <option value="">Tipo Dispositivo</option> <option value="caldaia">Caldaia</option> <option value="termosifone">Termosifone</option> <option value="stufa pellet">Stufa a Pellet</option> <option value="pompa piscina">Pompa Piscina</option> <option value="altro">Altro</option> </select> `; container.appendChild(newRow); } function addRestaurant() { const container = document.getElementById('restaurants list'); const newRow = document.createElement('div'); newRow.classList.add('input group'); newRow.innerHTML = ` <input type="text" placeholder="Nome Ristorante/Locale"> <input type="text" placeholder="Tipo di Cucina/Locale"> <input type="text" placeholder="Distanza (es. 2km)"> `; container.appendChild(newRow); } function addPOI() { const container = document.getElementById('poi list'); const newRow = document.createElement('div'); newRow.classList.add('input group'); newRow.innerHTML = ` <input type="text" placeholder="Nome Punto di Interesse"> <input type="text" placeholder="Descrizione Breve"> <input type="text" placeholder="Distanza (es. 1.5km)"> `; container.appendChild(newRow); } </script> </body> </html>
