JSFiddle - React, Tailwind, and code Playground

by Md. Atiquzzaman Soikat

HTML

<body>
    <div id="particles-js">
     
      <h1><a href="" class="typewrite anim-typewriter" data-period="2000" data-type='[ "Hey there. My name is Aden.", "Bonafide techie, infamous procastinator, elite goofball... I do it all.", "I probably spent way too much time building this webpage.", "But this is pretty sweet, so it was worth it. ", "Demetri Martin is my favorite human being.", "I seldom wear matching socks.", "I listen to the Hamilton Mixtape at least once a week.", "I read books upside down to stay focused.", "Smurfs terrify the living crap out of me.", "I am currently trying to teach myself Danish", "I love snickerdoodle cookies.", "I row.", "I can sneeze with one eye open.", "It hurts really, really badly though.", "I want to backpack in Fiji some day.","If I am asleep before 3 a.m. something is wrong. The world is ending. Brace yourself." , "I forgot how to play piano.", "This can go on forever...", "So scroll down to see what I am all about!" ]'>
        <span class="wrap"></span>
        </a>

      </h1>
    </div>
    
    
    
    <script src="script.js"></script>
    
    <!--Particle json links-->
    <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
    
  </body>

CSS

@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700');
@import url('https://fonts.googleapis.com/css?family=Merriweather:400,700');

body {
  background-color: white;
  font-family: "Open Sans", sans-serif;
  padding: 5px 25px;
  font-size: 18px;
  margin: 0;
  color: #444;
}

h1 {
  font-family: "Merriweather", serif;
  font-size: 32px;
}

/* Particle Code */

body {
  margin: 0;
}

canvas {
  position: relative;
  display: block;
  vertical-align: bottom;
  z-index: -5;
}

/* ---- particles.js container ---- */

#particles-js {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: white;
  background-image: url("");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  z-index: -5;
}


/*Typewriter Styler*/
.typewrite{
  color:black;
  background-color:green;
  margin: 0 5px;
  text-align: justify right;
  text-decoration: none;
  z-index: 5000;
  position: absolute;
}

JavaScript

/* ---- particles.js config ---- */

particlesJS("body", {
  "particles": {
    "number": {
      "value": 130,
      "density": {
        "enable": true,
        "value_area": 800
      }
    },
    "color": {
      "value": "#ffffff"
    },
    "shape": {
      "type": "circle",
      "stroke": {
        "width": 0,
        "color": "#0029eb"
      },
      "polygon": {
        "nb_sides": 5
      },
      "image": {
        "src": "img/github.svg",
        "width": 100,
        "height": 100
      }
    },
    "opacity": {
      "value": 0.3,
      "random": false,
      "anim": {
        "enable": false,
        "speed": 1,
        "opacity_min": 0.1,
        "sync": false
      }
    },
    "size": {
      "value": 3,
      "random": true,
      "anim": {
        "enable": false,
        "speed": 40,
        "size_min": 0.1,
        "sync": false
      }
    },
    "line_linked": {
      "enable": true,
      "distance": 150,
      "color": "#0029eb",
      "opacity": 0.26,
      "width": 1
    },
    "move": {
      "enable": true,
      "speed": 6,
      "direction": "none",
      "random": false,
      "straight": false,
      "out_mode": "out",
      "bounce": false,
      "attract": {
        "enable": false,
        "rotateX": 600,
        "rotateY": 1200
      }
    }
  },
  "interactivity": {
    "detect_on": "canvas",
    "events": {
      "onhover": {
        "enable": true,
        "mode": "repulse"
      },
      "onclick": {
        "enable": true,
        "mode": "push"
      },
      "resize": true
    },
    "modes": {
      "grab": {
        "distance": 140,
        "line_linked": {
          "opacity": 1
        }
      },
      "bubble": {
        "distance": 400,
        "size": 40,
        "duration": 2,
        "opacity": 8,
        "speed": 3
      },
      "repulse": {
        "distance": 100,
        "duration": 0.2
      },
      "push": {
        "particles_nb": 4
      },
      "remove": {
        "particles_nb": 2
      }
    }
 ...