JSFiddle - React, Tailwind, and code Playground

by pragav94

HTML

<!DOCTYPE html>
<html>
  <head>
  
    <meta name="viewport" content="width=device-width, initial-scale=1" />
  </head>
  
  <!--src : https://www.w3schools.com/howto/howto_js_popup_form.asp-->
  
  <body>
    <div class="form-popup" id="myForm">
      <form action="/action_page.php" class="form-container">
        <h1>Login</h1>

        <label for="firstname"><b>First Name</b></label>
        <input type="text" placeholder="First Name" name="firstname" required />

        <label for="lastname"><b>Last Name</b></label>
        <input type="text" placeholder="Last Name" name="lastname" required />

        <label for="age"><b>Age</b></label>
        <input type="text" placeholder="Age" name="age" required />

        <label for="email"><b>Email</b></label>
        <input type="text" placeholder="Enter Email" name="email" required />

        <label for="phone"><b>Phone</b></label>
        <input type="text" placeholder="Enter Phone" name="phone" required />

        <label for="dob"><b>DOB</b></label>
        <input type="text" placeholder="Enter DOB" name="dob" required />

        <label for="city"><b>City</b></label>
        <input type="text" placeholder="Enter City" name="city" required />

        <label for="state"><b>State</b></label>
        <input type="text" placeholder="Enter State" name="state" required />

        <label for="country"><b>Country</b></label>
        <input
          type="text"
          placeholder="Enter Country"
          name="country"
          required
        />

        <label for="locality"><b>Locality</b></label>
        <input
          type="text"
          placeholder="Enter Locality"
          name="locality"
          required
        />

        <label for="address"><b>Address</b></label>
        <input
          type="text"
          placeholder="Enter Address"
          name="address"
          required
        />

        <label for="gender"><b>Gender</b></label>
        <input type="text" placeholder="Enter...

CSS

body {
        font-family: Arial, Helvetica, sans-serif;
      }
      * {
        box-sizing: border-box;
      }

      /* Button used to open the contact form - fixed at the bottom of the page */
      .open-button {
        background-color: #555;
        color: white;
        padding: 16px 20px;
        border: none;
        cursor: pointer;
        opacity: 0.8;
        position: fixed;
        bottom: 200px;
        /* right: 28px; */
        left: 400px;
        width: 280px;
      }

      /* The popup form - hidden by default */
      .form-popup {
        display: block;
        position: static;
        bottom: 200px;
        /* right: 15px; */
        left: 400px;
        border: 3px solid #f1f1f1;
        z-index: 9;
      }

      /* Add styles to the form container */
      .form-container {
        max-width: 500px;
        max-height: 500px;
        padding: 10px;
        background-color: white;
        overflow: scroll;
      }

      /* Full-width input fields */
      .form-container input[type="text"],
      .form-container input[type="password"] {
        width: 100%;
        padding: 15px;
        margin: 5px 0 22px 0;
        border: none;
        background: #f1f1f1;
      }

      /* When the inputs get focus, do something */
      .form-container input[type="text"]:focus,
      .form-container input[type="password"]:focus {
        background-color: #ddd;
        outline: none;
      }

      /* Set a style for the submit/login button */
      .form-container .btn {
        background-color: #04aa6d;
        color: white;
        padding: 16px 20px;
        border: none;
        cursor: pointer;
        width: 100%;
        margin-bottom: 10px;
        opacity: 0.8;
      }

      /* Add a red background color to the cancel button */
      .form-container .cancel {
        background-color: red;
      }

      /* Add some hover effects to buttons */
      .form-container .btn:hover,
      .open-button:hover {
        opacity: 1;
    ...

JavaScript

function openForm() {
        document.getElementById("myForm").style.display = "block";
      }

      function closeForm() {
        document.getElementById("myForm").style.display = "none";
      }

      const queryForm = ".form-container";
      const selectedForm = document.querySelector(queryForm);

      let customElements = [];

      class CustomElement {
        constructor(element, top, left, prevTop, prevLeft) {
          this.element = element;
          this.top = top;
          this.left = left;
          this.prevLeft = prevLeft;
          this.prevTop = prevTop;
        }
      }

      setOnScrollListener(selectedForm);
      addCustomElementsToTheFormElements();

      function addCustomElementsToTheFormElements() {
        let inputElements = document.getElementsByTagName("label");

        for (let i = 0; i < 3; i++) {
          addCustomElement(inputElements[i]);
        }
      }

      function getRightPosition(element) {
        let clientRect = element.getBoundingClientRect();
        let top = clientRect.top;
        let left = clientRect.width + clientRect.left;
        return [top, left];
      }

      function addCustomElement(element) {
        let position = getRightPosition(element);
        let top = position[0];
        let left = position[1];
        let customElementContainerDiv = document.createElementNS(
          "http://www.w3.org/2000/svg",
          "svg"
        );
        customElementContainerDiv.classList.add("smarttip");
        customElementContainerDiv.style.top = top + "px";
        customElementContainerDiv.style.left = left + "px";
        let svg = document.createElementNS(
          "http://www.w3.org/2000/svg",
          "circle"
        );
        svg.setAttributeNS(null, "cx", 10);
        svg.setAttributeNS(null, "cy", 10);
        svg.setAttributeNS(null, "r", 5);
        svg.setAttributeNS(null, "stroke", "green");
        svg.setAttributeNS(null, "stroke-width", 4);
        svg.setAttributeNS(null,...