JSFiddle - React, Tailwind, and code Playground

by frogggeee McFrogggeee

HTML

<body>
  <style>
    #box {
      border: 1px solid;
      border-radius: 7px;
      width: 281px;
      height: 67px;
    }

    #icon {
      position: absolute;
      padding-top: 0px;
      padding-left: 1px;
      margin-bottom: -60px;
      margin-top: 0px;
      font-size: 45px;
      cursor: pointer;
      height: 45px;

    }

    #text {
      position: absolute;
      padding-top: 0px;
      margin-top: 19px;
      font-size: 23px;
      padding-left: 66px;
      cursor: pointer;
    }

    #start {
      position: absolute;
      border: 1px solid;
      border-radius: 7px;
      margin-top: 4px;
      width: 60px;
      height: 26px;
      margin-left: 215px;
      text-align: center;
      cursor: pointer;
    }

    #end {
      position: absolute;
      border: 1px solid;
      border-radius: 7px;
      margin-top: 35px;
      width: 60px;
      height: 26px;
      margin-left: 215px;
      text-align: center;
      cursor: pointer;
    }

    #start p {
      margin-top: 2px;
      font-size: 19px;
      padding-left: 0px;
    }

    #end p {
      margin-top: 2px;
      font-size: 19px;
      padding-left: 0px;
    }

  </style>
  <h1>
    planner
  </h1>
  <div id="box">
    <p id="icon" onclick="thing()">
      🕑
    </p>
    <p id="text">
      do cool thingy
    </p>
    <div id="start">
      <p id="stime">
        3:00
      </p>
    </div>
    <div id="end">
      <p id="etime">
        5:00
      </p>
    </div>
  </div>
  <button type="button" onclick="add()" style="width: 50px; border-radius: 5px; border: 1px solid; margin-top: 2px; font-size: 20px;">+</button> <br>
  <script>
    

  </script>

</body>

JavaScript

let elements = 0;
    
    function add(text) {
      elements++;
      const box = document.createElement("div");
      box.id = ("box" + elements);
      box.addEventListener("click", function() {
        thing();
      });
      document.body.appendChild(box);
      document.getElementById("box" + elements).style = "border: 1px solid;border-radius: 7px;width: 281px;height: 67px; cursor: grab;";
    }

    function thing() {
      alert("thing");
    }