JSFiddle - React, Tailwind, and code Playground

by moshfeu

HTML

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

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

    <!-- Font Awesome -->
    <script src="https://kit.fontawesome.com/8b5bc3ac04.js" crossorigin="anonymous"></script>

    <!-- CSS -->
    <link rel="stylesheet" href="style.css">
  

    <section class="h-100 bg-light">
        <div class="container py-5 h-100">
          <div class="row d-flex justify-content-center align-items-center h-100">
            <div class="col">
              <div class="card card-registration my-4">
                <div class="row g-0">
                  <div class="col-xl-6 d-none d-xl-block">
                    <img
                      src="image2.jpg"
                      alt="Sample photo"
                      class="img-fluid"
                      style="border-top-left-radius: .25rem; border-bottom-left-radius: .25rem;"
                    />
                  </div>
                  <div class="col-xl-6">
                    <form class="requires-validation" novalidate>
                    <div class="card-body p-md-5 text-black" >
                      <a class="navbar-brand" href="#">
                        <img class="mx-auto d-block" src="fetchlogo2.jpg" alt="" width="100" height="100">
                      </a>
                      <!-- <h1 class="mb-5 text-uppercase text-center ">Registration form</h1> -->
                      <div class="row">
                        <div class="col-md-6 mb-4">
                          <div class="form-outline">
                            <input type="text" id="firstname" placeholder = "Firstname" class="form-control form-control-lg" required/>
                ...

CSS

.bg-light{
  background-color: rgb(23, 1, 58) !important;
  }

.card-registration{
  box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
}  


.card-registration .select-input.form-control[readonly]:not([disabled]) {
  font-size: 1rem;
  line-height: 2.15;
  padding-left: .75em;
  padding-right: .75em;
}
.card-registration .select-arrow {
  top: 13px;
}

.btn-group-lg>.btn, .btn-lg {
  padding: 0.5rem 1rem;
  font-size: 1.25rem;
  border-radius: 0.3rem;
  background-color: rgb(23, 1, 58); 
  color: white;
}

button:hover{
  background-color: #c2a402 !important;
}

JavaScript

(function () {
    'use strict'
    const forms = document.querySelectorAll('.requires-validation')
    Array.from(forms)
      .forEach(function (form) {
        form.addEventListener('submit', function (event) {
          if (!form.checkValidity()) {
            event.preventDefault()
            event.stopPropagation()
          }
    
          form.classList.add('was-validated')
        }, false)
      })
    })()

    function myFunction() {
        document.getElementById("form").reset();
      }

    let form = document.getElementsByTagName("form")[0];
      form.addEventListener("submit", (e) => {
        e.preventDefault();
        alert("Form Submitted!");
      });



let dropdown = document.getElementsByClassName('state')[0];
dropdown.length = 0;

let defaultOption = document.createElement('option');
defaultOption.text = 'Choose State';

dropdown.appendChild(defaultOption);
dropdown.selectedIndex = 0;

const url = 'https://frontend-take-home.fetchrewards.com/form';

const request = new XMLHttpRequest();
request.open('GET', url, true);

request.onload = function() {
  if (request.status === 200) {
    const data = JSON.parse(request.responseText);
    let option;
    for (let i = 0; i < data.length; i++) {
      option = document.createElement('option');
      option.text = data[i].name;
      option.value = data[i].abbreviation;
      dropdown.add(option);
    }
   } else {
    // Reached the server, but it returned an error
  }   
}

request.onerror = function() {
  console.error('An error occurred fetching the JSON from ' + url);
};

request.send();