JSFiddle - React, Tailwind, and code Playground

by borisjavier

HTML

<div class="main-container1" id="containerS" style="display: none;">
  
    <!-- Paso 1 <div id="sub-container">-->
    <div class="form-step active" id="step1">
        <h2 class="mb-4">Formulario de Contrato</h2>
        <p class="lead" lang="en" data-lang-token="escrowStep1C">Este formulario le guiará a través del proceso de creación de un contrato legalmente vinculante. Por favor lea atentamente cada sección antes de confirmar.</p>
        <div class="d-flex justify-content-end mt-4">
            <button class="btn btn-danger btn-custom" onclick="closeForm()" lang="en" data-lang-token="dcln">Renunciar</button>
            <button class="btn btn-primary btn-custom" onclick="nextStep1(1)" lang="en" data-lang-token="accpt">Confirmar</button>
        </div>
    </div>

    <!-- Paso 2 -->
    <div class="form-step" id="step2">
        <h4 class="mb-3">Objeto del Contrato</h4>
        <div class="form-group">
            <label>Descripción del objeto:</label>
            <textarea class="form-control" rows="4" placeholder="Describa detalladamente el objeto del contrato..."></textarea>
        </div>
        <div class="d-flex justify-content-between mt-4">
            <button class="btn btn-secondary btn-custom" onclick="previousStep1(2)">Corregir</button>
            <button class="btn btn-primary btn-custom" onclick="nextStep1(2)">Confirmar</button>
        </div>
    </div>

    <!-- Paso 3 -->
    <div class="form-step" id="step3">
        <h4 class="mb-3">Condiciones Finales</h4>
        <div class="mb-3">
            <p><strong>Costo Total:</strong> $5,000.00 USD</p>
            <p><strong>Plazo de Ejecución:</strong> 90 días</p>
            <p><strong>Garantías:</strong> 12 meses</p>
        </div>
        <div class="form-check mb-3">
            <input class="form-check-input" type="checkbox" id="termsCheck">
            <label class="form-check-label" for="termsCheck">Acepto los términos y condiciones del contrato</label>
        </div>
        <div...

CSS

/* Smart contract styles */
.main-container1 {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.75);
            align-items: center;
            justify-content: center;
            overflow: hidden;
            z-index: 1600;
        }

        .form-step {
            position: fixed; /* Cambiado de relative a fixed */
            left: 50%;
            top: 50%;
            width: 600px;
            /* height: 300px;  Eliminar altura fija */
            transform: translate(-50%, 100%); /* Combinamos los dos transforms */
            background: white;
            border-radius: 15px;
            padding: 30px;
            transition: all 0.5s ease-in-out;
            opacity: 0;
            max-height: 90vh; /* Limite máximo de altura */
            overflow-y: auto; /* Scroll si el contenido es muy largo */
        }
        
          /* Estilos para pantallas medianas (tablets) */
        @media (max-width: 768px) {
            .form-step {
                width: 85%; /* Ancho del 90% para tablets */
                max-width: 500px; /* Ancho máximo para tablets */
            }
        }

        /* Estilos para pantallas pequeñas (celulares) */
        @media (max-width: 480px) {
            .form-step {
                width: 90%; /* Ancho del 95% para celulares */
                max-width: 400px; /* Ancho máximo para celulares */
            }
        }


        .form-step.active {
            transform: translate(-50%, -50%); /* Centrado vertical y horizontal */
            opacity: 1;
        }

        .form-step.previous {
            transform: translate(-50%, -150%); /* Movemos hacia arriba */
            opacity: 0;
        }
        
        .btn-custom {
            margin: 10px;
            min-width: 120px;
        }

JavaScript

if (contractButton) {
    contractButton.addEventListener('click', function() {
        const mainContainer = document.querySelector('#containerS'); //.main-container1
        if (mainContainer) {
            mainContainer.style.display = 'inline-block'; 
        }
    });
}