JSFiddle - React, Tailwind, and code Playground

by borisjavier

HTML

<div class="main-container">
    <!-- Paso 1 --><div>
    
    
    
    <div class="form-step active" id="step1">
        <h2 class="mb-4">Formulario de Contrato</h2>
        <p class="lead">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="renounce()">Renunciar</button>
            <button class="btn btn-primary btn-custom" onclick="nextStep(1)">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="previousStep(2)">Corregir</button>
            <button class="btn btn-primary btn-custom" onclick="nextStep(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 class="d-flex justify-content-end">
            <button class="btn btn-success btn-custom" onclick="createContract()">Crear Contrato</button>
        </div>
   ...

CSS

.main-container1 {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background-color: rgba(0, 0, 0, 0.75);
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }
        
        .form-step {
            position: absolute;
            width: 80%;
            max-width: 600px;
            background: white;
            border-radius: 15px;
            padding: 30px;
            transition: all 0.5s ease-in-out;
            transform: translateY(100%);
            opacity: 0;
        }
        
        .form-step.active {
            transform: translateY(0);
            opacity: 1;
        }
        
        .form-step.previous {
            transform: translateY(-100%);
            opacity: 0;
        }
        
        .btn-custom {
            margin: 10px;
            min-width: 120px;
        }

JavaScript

function nextStep(currentStep) {
        const current = document.getElementById(`step${currentStep}`);
        const next = document.getElementById(`step${currentStep + 1}`);
        
        current.classList.remove('active');
        current.classList.add('previous');
        
        next.classList.add('active');
    }

    function previousStep(currentStep) {
        const current = document.getElementById(`step${currentStep}`);
        const previous = document.getElementById(`step${currentStep - 1}`);
        
        current.classList.remove('active');
        previous.classList.remove('previous');
        previous.classList.add('active');
    }

    function renounce() {
        if(confirm('¿Está seguro que desea renunciar al proceso?')) {
            alert('Proceso cancelado');
            // Aquí puedes añadir más lógica de cierre
        }
    }

    function createContract() {
        if(document.getElementById('termsCheck').checked) {
            alert('Contrato creado exitosamente!');
            // Lógica para enviar el formulario
        } else {
            alert('Debe aceptar los términos y condiciones!');
        }
    }