JSFiddle - React, Tailwind, and code Playground

by cr0wn3r

HTML

<body ng-app="myapp">
  <div ng-controller="MyController">

    <div style="overflow-x:auto;">
      <table>
        <tr>
          <td>
            <h4 align="left">CONFIGURE SETTINGS</h4>
            <form>
              <div class="field">
                <label class="field_label">Main Site Domain </label><input class="field_input" type="url" name="siteName" placeholder="http://example.com" ng-model="myForm.siteName">
              </div>
              <br>
              <div class="field">
                <label class="field_label">Post URL </label><input class="field_input" type="url" name="postURL" placeholder="http://example.com/your-post" ng-model="myForm.postURL">
              </div>
              <br>

              <div class="field">
                <label class="field_label">Image URL </label><input class="field_input" type="url" name="imageURL" ng-model="myForm.imageURL" placeholder="http://example.com/infographic.jpg">
              </div>
              <br>

              <div class="field">
                <label class="field_label">Image Alt </label><input class="field_input" type="text" name="imageAlt" ng-model="myForm.imageAlt" placeholder="'reddit stats 2016 infographic'">
              </div>

              <br>

              <div class="field">
                <label class="field_label">Image Width </label><input class="field_input" type="number" name="imageWidth" ng-model="myForm.imageWidth" min="00" max="2000" placeholder="540px">
              </div>

              <br>

              <div class="field">
                <label class="field_label">Image Height </label><input class="field_input" type="number" name="imageHeight" ng-model="myForm.imageHeight" placeholder="Enter size or leave blank for auto-size">
              </div>

              <br>

              <div class="field">
                <label class="field_label">Embed Box Width </label><input class="field_input" type="number" name="textAreaWidth"...

CSS

@charset "UTF-8";

body {
  background-color: transparent;
  font-family: helvetica;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.45;
  padding: 1em;
}

article {
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2;
}

p {
  margin-bottom: 1.3em;
}

h1, h2, h3, h4 {
  font-family: helvetica;
  margin: 1.414em 0 o.75em;
  font-weight: 700;
  line-height: 1.2;
}

h1 {
  margin-top: 0;
  font-size: 3.157em;
}

h2 {
  font-size: 2.369em;
}

h3 {
  font-size: 1.777em;
}

h4 {
    
    font-size: 1.333em;
}

.field {
  position: relative;
  padding-bottom: 1.875em;
  margin-bottom: 1.875em;
  max-width: 20em;
}

.field_label {
  display: block;
  position: absolute;
  top: 0.9em;
  font-size: 1.0em;
  font-family: helvetica;
  line-height: 0.85em;
  font-weight: bold;
  color: #2996cc;/*extended for transition*/
}

.field_input {
  position: relative;
  margin: top;
  display: block;
  box-sizing: border-box;
  font-size: 1.0em;
  line-height: 1.25em;
  padding: 0.3125em 0;
  height: 1.875;
  width: 100%;
  border: 0;
  outline: none;
  border-bottom: 0.125em solid #bbb;
  top: 1.875em;
  margin-top: -1.875em;
  opacity: 1;
}
    
.field_input:focus {
    background-color: whitesmoke;
    border-bottom-color: #2996cc;
}

.field_input:invalid {
   border-bottom: 0.125em solid red;
}

.field_input:valid {
   border-bottom: 0.125em solid green;
}

hr {
  display: block;
  clear: both;
  margin: 1.875em 0;
  border: 0;
  outline: 0;
  height: 2px;
  background: #ddd;
}

table, td, th {    
  border: 0;
  text-align: center;
  vertical-align: top;
}

table {

  border-collapse: collapse;
  width: 75%;
  float: inherit;
}

th, td {
  padding: 25px;
}
    
textarea {
        
/*  width: 600px;
  height: 120px;*/
  width:100%;
  height:100px;
  resize: none;
  border: 3px solid #cccccc;
  outline: none;
  padding: 5px;
  font-family: monospace;
  font-size: 16px;
  color: #2996cc;
  background-image: url(bg.gif);
  background-position: bottom...