JSFiddle - React, Tailwind, and code Playground

by kayenglajom

HTML

<!DOCTYPE html>
<html>

  <head>
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="alphabet.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>

  <body>
    <canvas id="myCanvas"></canvas>

    <script type="text/javascript" src="bubbles.js"></script>
    <script type="text/javascript" src="index.js"></script>
  </body>

</html>

CSS

* {
  box-sizing: border-box;
}

.footer {
  font-family: Helvetica, sans-serif;
  height: 100px;
  width: 100%;
  position: fixed;
  bottom: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.button {
  width: 150px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgb(32, 64, 86);
  color: rgb(32, 64, 86);
  transition: background-color 0.2s, color 0.2s;
}

.button:hover {
  cursor: pointer;
  background-color: rgb(32, 64, 86);
  ;
  color: white;
  transition: background-color 0.2s, color 0.2s;
}

JavaScript

// Define color variables:
red = [0, 100, 63];
orange = [40, 100, 60];
green = [75, 100, 40];
blue = [196, 77, 55];
purple = [280, 50, 60];
letterColors = [red, orange, green, blue, purple];

// This variable controls the smallest distance at which a mouse will 
mouseResponseThreshold = 70;

// This variable controls how strongly the dots will try to return to their starting position
friction = 0.95;

// This variable controls how much the dots will rotate when interacting
rotationForce = 0.01;

message = 'Change the physics!';

drawName(message, letterColors);
bounceBubbles();