JSFiddle - React, Tailwind, and code Playground

by Vince Richter

HTML

<h2>
Covid 19 is an airborne disease that spreads through breathing and can be received through the eyes and inhales.   
</h2>
<h2>
 Covid 19 systems are: Fever or chills, Cough, Shortness of breath/ Difficulty breathing Fatigue, Muscle or body aches, Headache, Loss of taste or smell, Sore throat, Runny nose, Nausea and vomiting, and Diarrhea.
</h2>
<h2>
 The disease spreads through the air so when an infected person exhales they leave the disease in the air and when a not infected person inhales that bad stuff he becomes sick too.
</h2>
<h2>
 There are currently no cures or treatments for covid 19 although there is said to be one coming out soon
</h2>
<h2>
 If you get covid 19 you should call the hospital immediately or if you want to protect yourself in public you should always wear a mask or try to avoid close contact, as well as staying healthy and eating healthy.
</h2>

<body>
  <div ondragover="pd(event)" ondrop="pd(event);drop(event)">
    <p id="myP1" draggable="true" ondragstart="drag(event)">Wash hands</p>
    <p id="myP2" draggable="true" ondragstart="drag(event)">Stay Healthy</p>
    <p id="myP3" draggable="true" ondragstart="drag(event)">Don't quarantine when sick</p>
    <p id="myP4" draggable="true" ondragstart="drag(event)">were mask</p>
    <p id="myP5" draggable="true" ondragstart="drag(event)">Cough on people</p>
    <p id="myP6" draggable="true" ondragstart="drag(event)">Cough in elbow</p>
  </div>
  <div ondragover="pd(event)" ondrop="pd(event);drop(event)">Correct</div>
  <div ondragover="pd(event)" ondrop="pd(event);drop(event)">Incorrect</div>
  <h1>

  </h1>
  <style>
  * {
  text-align: center;
}

h2 {
 text-align: left;
 margin-bottom: 10px;
  padding-bottom: 10px;
}

div {
  width: 290px;
  height: 500px;
  float: left;
  margin: 25px;
  border: 3px black solid;
  background: white;
}

p {
  margin: 30px;
  padding: 15px;
}


p#myP1 {
  background: #2196F3;
}

p#myP2 {
  background: #2196F3;
}

p#myP3 {
  background: #2196F3;
}

p#myP4...

CSS

* {
  text-align: center;
}

h2 {
 text-align: left;
 margin-bottom: 10px;
  padding-bottom: 10px;
}

div {
  width: 290px;
  height: 500px;
  float: left;
  margin: 25px;
  border: 3px black solid;
  background: white;
}

p {
  margin: 30px;
  padding: 15px;
}


p#myP1 {
  background: #2196F3;
}

p#myP2 {
  background: #2196F3;
}

p#myP3 {
  background: #2196F3;
}

p#myP4 {
  background: #2196F3;
}
code {
  float: left;
  width: 100%;
}

h1 {
  font-size: 30px;
  margin-bottom: 30px;
  padding-bottom: 30px;
}

JavaScript

function pd(e) {
  e.preventDefault();
}

function drag(e) {
  e.dataTransfer.setData("temp", e.target.id);
}

function drop(e) {
  de = document.getElementById(e.dataTransfer.getData("temp")); //Draged Element Selected By ID
  tar = e.target //Target

  if (e.target.parentNode.nodeName != "P") {
    if ((tar.nodeName == "DIV") || (tar.firstChild.nodeName = "P" && de.childNodes.length != 2)) {
      tar.appendChild(de);
    }
  }
}