JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<body>

<h2>My First JavaScript</h2>
<input class="color1" type="color" id="a1" name="color1" value="rgb(182,22,242)">
<button onclick="clickF()">Click me</button>
</body>
</html>

CSS

/* circle background */
.circle-bg {
  width: 1000px;
  height: 1020px;
  background: blue;
  border-radius: 50%;
}

/* Basic responsive, doesn't work */
img {
  max-width: 100%;
  height: auto;
 
}

/* positionate images to the center */
.phones {
  position: relative;
  left: 2rem;
}

JavaScript

function clickF() {
var input = document.getElementById('a1');
var letters = '0123456789ABCDEF';
  var color = '#';
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
    }
    input.value = color;
 }