JSFiddle - React, Tailwind, and code Playground

by shawcallie1

HTML

<style>body {
  background-color: pink;
  font-family: "Roboto", sans-serif;
}
.container {
  max-width: 400px;
  margin: 0 auto;
  padding: 30px
}

h1{
  text-align: Left;
  margin-bottom: 10px;
  font-size: 17pt;
}

h2{
  text-align: Left;
  margin-bottom: 10px;
  font-size: 17pt;
}

h3{
  text-align: Left;
  margin-bottom: 10px;
  font-size: 17pt;
}

h4{
  text-align: left;
  margin-bottom: 10px;
  font-size: 17pt;
}

h5{
  text-align: center;
  margin-bottom: 10px;
font-size: 17pt
}</style>
<h5 ID=box-two>
Contact Form</h5>
<h5>
</h5>
<p> 
<div class="container">
  <form action="action_page.php">
<h1
    <label for="fname">First Name</label>
    <input type="text" id="fname" name="firstname" placeholder="Your name..">
    <h1>
    </h1>
<h2
    <label for="lname">Last Name</label>
    <input type="text" id="lname" name="lastname" placeholder="Your last name..">
<h2>
</h2>
<h3
    label for="country">Country</label
    <h3>
    </h3>
    <select id="country" name="country">
      <option value="australia">Australia</option>
      <option value="canada">Canada</option>
      <option value="usa">USA</option>
    </select>
<h4
    label for="subject">Subject</label
    <h4>
</h4>
    <textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea>
    <input type="submit" value="Submit">

  </form>
</div>

CSS

body {
  background-color: pink;
  font-family: "Roboto", sans-serif;
}
.container {
  max-width: 400px;
  margin: 0 auto;
  padding: 30px
}

h1{
  text-align: Left;
  margin-bottom: 10px;
  font-size: 17pt;
}

h2{
  text-align: Left;
  margin-bottom: 10px;
  font-size: 17pt;
}

h3{
  text-align: Left;
  margin-bottom: 10px;
  font-size: 17pt;
}

h4{
  text-align: left;
  margin-bottom: 10px;
  font-size: 17pt;
}

h5{
  text-align: center;
  margin-bottom: 10px;
font-size: 17pt
}