JSFiddle - React, Tailwind, and code Playground

by Dug Sohn

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="//cdn.jsdelivr.net/jquery.sidr/2.2.1/jquery.sidr.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="//cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css">
<script src="//cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<h1>
Markup For Forms and Resources
</h1>

<div class="container-fluid">
  <br/>
  <form class="form-horizontal ui-yakabox-form-placeholder">

    <div class="form-group ">
      <label class="col-md-4 " >
        <input class="form-control" type="text" disabled />
      </label>
      <div class="col-md-8">
        <input class="form-control" type="text" disabled />
      </div>
    </div>
    <div class="form-group ">
      <label class="col-md-3 col-md-offset-1" >
        <input class="form-control" type="text" disabled />
      </label>
      <div class="col-md-8">
        <textarea class="form-control" rows=6 style="resize:none" disabled></textarea>
      </div>
    </div>
    <div class="form-group ">
      <label class="col-md-4" >
        <input class="form-control" type="text" disabled />
      </label>
      <div class="col-md-8">
        <input class="form-control" type="text" disabled />
      </div>
    </div>
    <div class="form-group ">
      <label class="col-md-4" >
        <input class="form-control" type="text" disabled />
      </label>
      <div class="col-md-8">
        <input class="form-control" type="text" disabled />
      </div>
    </div>
    <div class="form-group ">
      <label class="col-md-4" >
        <input class="form-control" type="text" disabled />
      </label>
      <div class="col-md-8">
   ...

CSS

.ui-yakabox-form-placeholder .form-control {
  box-shadow: 0 0 0 rgba(44,138, 204, 0.4);
  animation: pulse 2s infinite;
}
.ui-yakabox-form-placeholder .text-muted {
  color:#999;
}
@-webkit-keyframes pulse {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(44,138, 204, 0.4);
  }
  70% {
      -webkit-box-shadow: 0 0 0 10px rgba(44,138, 204, 0);
  }
  100% {
      -webkit-box-shadow: 0 0 0 0 rgba(44,138, 204, 0);
  }
}
@keyframes pulse {
  0% {
    -moz-box-shadow: 0 0 0 0 rgba(44,138, 204, 0.4);
    box-shadow: 0 0 0 0 rgba(44,138, 204, 0.4);
  }
  70% {
      -moz-box-shadow: 0 0 0 10px rgba(44,138, 204, 0);
      box-shadow: 0 0 0 10px rgba(44,138, 204, 0);
  }
  100% {
      -moz-box-shadow: 0 0 0 0 rgba(44,138, 204, 0);
      box-shadow: 0 0 0 0 rgba(44,138, 204, 0);
  }
}