JSFiddle - React, Tailwind, and code Playground

by Vince Richter

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://fonts.googleapis.com/icon?family=Material+Icons"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.min.js"></script>
<html>

  <body>
    <h4>
      this is for the h1, h2, h3, h4, h5, h6 tags.
    </h4>
    <div class="bob">
      <input type="text" id="user" class="validate">
      <label for="user"></label>
    </div>
    <br>
    <h4>
      This box is for the p tag
    </h4>
    <div class="bob">
      <input type="text" id="user" class="validate">
      <label for="user"></label>
    </div>

  </body>

<div class=" billy" id="hello">
<h5>
hi
</h5>
</div>


</html>

SCSS

#box {
  width: 1000px;
  height: 500px;
  background: white;
  padding: 10px;
  border-radius: 15px;
  margin: 10px;
}

button {
  color: black;
}

.bob {
  width: 500px;
  height: 55px;
  border: solid black 2px;
  border-radius: 15px;
}

JavaScript

var question = "what is your name";

var response = prompt(question);
alert("hello " + response + "!");

alert("hello " + response + " today you will be learning html for your first part. To start of with " + response + " you will learn the h1, h2, h3, h4, h5, h6, tags. After you finish that " + response + " you will learn the p tag. Also, always in html you need a ending tag and a ending tag looks like the starting tag but like this </h1> that is a example of the ending tag for the h1 tag. basicly, a ending tag is the samething as a starting but has a slash right after that starting bracet");