JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/tsparticles/1.12.1/tsparticles.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/tsparticles-preset-basic@1.0.2/dist/tsparticles.preset.basic.min.js"></script>
<div id="tsparticles"></div>
<div id="login">
  <form>
    <div class="group">
      <input type="text" placeholder="Username" />
    </div>
    <div class="group">
      <input type="password" placeholder="Password" />
    </div>
    <div class="group">
    <button type="submit">
    Login
    </button>
    </div>
  </form>
</div>

CSS

html {
  height: 100%;
}

body {
  margin: 0;
  height: 100%;
}

#tsparticles {
  height: 100%;
  width: 100%;
  position: absolute;
}

#login {
  position: absolute;
  width: 400px;
  margin-left: -140px;
  top: 50%;
  left: 50%;
  background: #EEE5E9AA;
  z-index: 1000;
  border-radius: 15px;
  padding: 15px;
  height: 120px;
  margin-top: -60px;
}

#login .group {
  padding-bottom: 10px;
  width: 100%;
}

#login input {
  width: calc(100% - 10px);
  border-radius: 10px;
  height: 30px;
  font-size: 20px;
  border: 0;
  padding: 2px 5px;
}

#login button {
  border-radius: 10px;
  background: #7C7C7CAA;
  font-size: 20px;
  width: 100%;
  border: 0;
  padding: 5px;
}

JavaScript

tsParticles.load('tsparticles', {
  background: {
    color: '#000000'
  },
  particles: {
    color: {
      value: '#CF5C36'
    },
    opacity: {
    	value: 0.5
    },
    lineLinked: {
      color: {
        value: '#EFC88B'
      },
      consent: true
    }
  },
  interactivity: {
    events: {
      onHover: {
        mode: ['grab', 'bubble'],
        enable: true
      }
    },
    modes: {
      grab: {
        distance: 200
      },
      bubble: {
      	size: 10
      }
    }
  },
  preset: 'basic'
});