JSFiddle - React, Tailwind, and code Playground

by Mukesh Yadav

HTML

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div class="container">
<form class="form-style-9" action="insert.php" method="post">  
<fieldset class="fieldset-borders">
    <legend>4. Licenses & Certificates</legend>
    <ul class="header">	
      <li>
        <select id='options' name="CertificateType[]" class="field-style div-format align-left">
          <option selected disabled value="0">Select certificates</option>
          <option value="1">PSSR</option>
          <option value="2">Adv. F.F.</option>
          <option value="3">Survival</option>
          <option value="4">HAZMAT</option>
          <option value="5">First Aid</option>
          <option value="6">Med. Care</option>
          <option value="7">SSO</option>
          <option value="8">GMDSS</option>
          <option value="9">Rad. Obs.</option>
          <option value="10">ARPA</option>
          <option value="11">ECDIS</option>
          <option value="12">BT&RM</option>
          <option value="13">Oil. Tank.</option>
          <option value="14">Ch. Tank.</option>
          <option value="15">LPG</option>
          <option value="16">LNG</option>	
        </select>  
      </li>
    </ul>  
    <ul class="cert" id="cert">		
      <li>
        <ul class="column">			
          <li><p class="test-label11">Name</p></li>						
        </ul>
      </li>
      <li>
        <ul class="column">			
          <li><p class="test-label11">STCW Code</p></li>						
        </ul>
      </li>
      <li>
        <ul class="column">			
          <li><p class="test-label11">Cert. No</p></li>						
        </ul>
      </li>
      <li>
        <ul class="column">			
          <li><p class="test-label11">Place of Issue</p></li>						
        </ul>
      </li>
      <li>
        <ul class="column">			
          <li><p class="test-label11">Date of Issue</p></li>						
        </ul>
      </li>
      <li>
        <ul...

CSS

<style type="text/css">
.form-style-9{
    max-width: 450px;
    background: url('http://galex.lt/resume/1/image/bck.jpg') top left;
    padding: 30px;
    margin: 50px auto;
    box-shadow: 1px 1px 25px rgba(0, 0, 0, 0.35);
    border-radius: 10px;
    border: 6px solid #305A72;
}
body {
    background-color:#2A2B2B;
	font-family: 'Open Sans', sans-serif;
	font-size: 13px;
	color: #4c4c4c;
	top:0px;
	margin-top:0px;
}
.container {
	background: url('http://galex.lt/resume/1/image/bck.jpg') top left;
	margin: 0 auto;
	min-width: 900px;
	max-width: 80%;
	top:0px;	
	margin-top:2%;	
	
	padding: 20px;
	padding-top: 10px;
	padding-bottom:4%;	
	color:inherit;
	background-color: #eee;
	-webkit-border-radius:6px;
	-moz-border-radius:6px;
	border-radius:6px
	
}
.div-header {
	position: relative;
	width: 100%;
}
.form-style-9 ul{
    padding:0;
    margin:0;
    list-style:none;
}
.form-style-9 ul li{
    display: block;
    margin-bottom: 1.25%;
   /* min-height: 58px;*/
}
.form-style-9 ul li  .field-style{
  -webkit-border-radius: 0px 4px 4px 0px/5px 5px 4px 4px; 
  -moz-border-radius: 0px 4px 4px 0px/0px 0px 4px 4px; 
  border-radius: 0px 4px 4px 0px/5px 5px 4px 4px; 
  background-color: #fff; 
  -webkit-box-shadow: 1px 2px 5px rgba(0,0,0,.09); 
  -moz-box-shadow: 1px 2px 5px rgba(0,0,0,.09); 
  box-shadow: 1px 2px 5px rgba(0,0,0,.09); 
  border: solid 1px #cbc9c9;
  margin-left: -5px;
  padding-left: 1%;
}
.form-style-9 ul li  .field-style:focus{
    box-shadow: 0 0 5px black;
    border:1px solid black;
}
.form-style-9 ul li .field-split{
    width: 49%;
}
.form-style-9 ul li .field-split25{
   /* float: left;
    width: 24%;
    margin-right: 1.25%;*/
	height: 40px;
}
.form-style-9 ul li .field-split25-4{
	/*float: left;
    width: 24%;
    margin-right: 0;*/
	height: 40px;
}
.form-style-9 ul li .field-full{
    width: 100%;
}
.form-style-9 ul li input.align-left{
    /*float:left;*/
}
.form-style-9 ul li input.align-right{
    float:right;
}
.form-style-9 ul li...

JavaScript

$(function() {
    $("[type=date]").datepicker({
        monthNamesShort: $.datepicker.regional["en"].monthNames,
        changeMonth: true,
        changeYear: true,
        dateFormat: 'yy-mm-dd'
    });
});
$.fn.optionTest = function(opts) {
    var option = $.extend({}, $.fn.optionTest.defaults, opts);
    $(this).change(function() {
        option.holderObject = $(this);
        if (option.clearOnChange) {
            $(option.actionId).empty();
        }
        var val = $(this).val();
        if ($.fn.optionTest.isArray(val)) {
            $.fn.optionTest.parseArray(val, option);
        } else {
            var label = $(this).children("option:selected").eq(0).text();
            $.fn.optionTest.parseContent(val, option, label);
        }
        $('.' + option.removeLinkOptions.class).click(function(event) {
            $.fn.optionTest.removeRow(this, option);
            event.preventDefault();
        });

        $("[type=date]").datepicker({
            monthNamesShort: $.datepicker.regional["en"].monthNames,
            changeMonth: true,
            changeYear: true,
            dateFormat: 'yy-mm-dd'
        });
        return this;
    });
};
$.fn.optionTest.isArray = function(val) {
    return Object.prototype.toString.call(val) === '[object Array]';
};
$.fn.optionTest.defaults = {
    clearOnChange: false,
    actionId: '#action',
    indexOptions: {
        class: 'field-style field-split25 align-left'
    },
    rowOptions: {        
        class: 'certificates',
        name: 'CertificateType[]',
        tag: 'ul'
    },
    STCWCodeOptions: {        
        name: 'STCWCode[]',
        type: 'text',
        placeholder: 'STCW Code',
        size: 20,
        class: 'field-style field-split25 align-left'
    },
    CertNoOptions: {
        
        name: 'CertNo[]',
        type: 'text',
        placeholder: 'Cert No.',
        size: 20,
        class: 'field-style field-split25 align-left'
    },
    PlaceofIssueOptions: {        
       ...