HTML – Proyecto – Cotizador con Prototypes

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="css/tailwind.css">
    <link rel="stylesheet" href="css/custom.css">
  </head>
  <body>
<div class="container mx-auto">
      <div id="contenido" class="pb-10">
            <header class="bg-teal-500 text-white py-3 font-bold uppercase">
                <h1 class="text-center">Cotiza tu seguro de Auto</h1>
            </header>
                <form class="mt-10 max-w-lg mx-auto" action="#" id="cotizar-seguro">
                        <div class="flex items-center mb-5">
                            <label 
                              class="font-bold  uppercase mr-2 w-20"
                              for="marca"
                            >Marca:</label>
                            <select class="flex-1 bg-gray-100 p-3 appearance-none" id="marca">
                                <option value="">- Seleccionar -</option>
                                <option value="1">Americano</option>
                                <option value="2">Asiatico</option>
                                <option value="3">Europeo</option>
                            </select>
                        </div>
                        <div class="flex items-center mb-5">
                              <label 
                                class="font-bold  uppercase mr-2 w-20"
                                for="year"
                              >Año:</label>
                              <select  class="flex-1 bg-gray-100 p-3 appearance-none" id="year"></select>
                        </div>
                        <fieldset>
                              <legend  class="font-bold  uppercase text-2xl text-center w-full">Tipo Seguro</legend>

                              <div class="flex justify-around mt-5">
                                  <div>
                                      <label class="font-bold  uppercase mr-2">Básico</label>
                                          <input type="radio" name="tipo" value="basico" checked>
                                      </label>
                                  </div>
                                  <div>
                                      <label class="font-bold  uppercase mr-2">Completo</label>
                                          <input type="radio" name="tipo" value="completo">
                                      </label>
                                  </div>
                              </div>
                      </fieldset>

                  <div id="cargando" class="hidden">
                        <div class="spinner">
                          <div class="rect1"></div>
                          <div class="rect2"></div>
                          <div class="rect3"></div>
                          <div class="rect4"></div>
                          <div class="rect5"></div>
                      </div>
                  </div>
                  <div id="resultado"></div>
                  <div class="flex  justify-center py-4">
                      <button 
                        type="submit" 
                        class="mx-auto bg-teal-500 hover:bg-teal-700 text-white font-bold py-2 px-20 rounded"
                        >Cotizar Seguro
                    </button>
                  </div>
 
                </form> 
      </div> <!--#contenido-->
</div>

  <script src="js/app.js"></script>
  </body>
</html>