JSFiddle - React, Tailwind, and code Playground

by Mahadevan Sivasubramanian

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.js"></script>
<div ng-app="MyApp" ng-controller="ContactController">
    <form>
	<div class="control-group">
    <label>FrameworkName</label> 
        <input type="text" class="form-control" placeholder="Framework Name" ng-model="newcontact.FrameworkName"/>
	</div>
	<div class="control-group">
    <label>Capability</label> 
        <input class="form-control"  type="text" placeholder="Capability" ng-model="newcontact.capability"/>
	</div>
	<div class="control-group">
    <label>Documentation</label> 
        <input class="form-control"  type="text" placeholder="Documentation" ng-model="newcontact.Documentation"/>
	</div>
	<div class="control-group">
        <label>Features</label> 
        <input class="form-control"  type="text" placeholder="Features`" ng-model="newcontact.Features"/>
	</div>
	<div class="control-group">
    <label>Crossbrowser</label> 
        <input class="form-control"  type="text" placeholder="Crossbrowser" ng-model="newcontact.Crossbrowser"/>
	</div>
	<div class="control-group">
    <label>Industry</label> 
        <input class="form-control"  type="text" placeholder="Industry" ng-model="newcontact.Industry"/>
	</div>
	<div class="control-group">
        <label>Cost</label> 
        <input class="form-control"  type="text" placeholder="Cost" ng-model="newcontact.Cost"/>
	</div>
        <br/>
        <input type="hidden" ng-model="newcontact.id" />
     <input type="button" value="Save" ng-click="saveContact()" class="btn btn-primary"/>
    </form>
	<br/>
<table class="table table-striped table-bordered">
<thead> 
<tr>
   <th>Framework Names</th>
                        <th>Capability</th>
                        <th>Documentation</th>
                        <th>Features</th>
                        <th>Cross browser device support</th>
                       ...

CSS

@import url(http://fonts.googleapis.com/css?family=Roboto:400,500,700,300,100);
body {
padding: 0px;
margin: 0px;
font-family:'Roboto';
}
form{
width:450px;
margin:0px auto;
}
span {
position: absolute;
top: 10px;
left: 5px;
font-weight: bold;
}
table a:link {
color: #666;
font-weight: bold;
text-decoration:none;

}
table a:visited {
color: #999999;
font-weight:bold;
text-decoration:none;
}
table a:active,
table a:hover {
color: #bd5a35;
text-decoration:underline;
}
table {
color:#666;
letter-spacing:1px;
font-size:12px;
text-shadow: 1px 1px 0px #fff;
background:#eaebec;
margin:0px auto;
border:#ccc 1px solid;

-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;

-moz-box-shadow: 0 1px 2px #d1d1d1;
-webkit-box-shadow: 0 1px 2px #d1d1d1;
box-shadow: 0 1px 2px #d1d1d1;
width:1024px !important;
}
table th {
padding:21px 25px 22px 25px;
border-top:1px solid #fafafa;
border-bottom:1px solid #e0e0e0;
font-weight:bold;
background: #000;
background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#ebebeb));
background: -moz-linear-gradient(top,  #ededed,  #ebebeb);
}
table th:first-child {
text-align: left;
padding-left:20px;

}
table tr:first-child th:first-child {
-moz-border-radius-topleft:3px;
-webkit-border-top-left-radius:3px;
border-top-left-radius:3px;
}
table tr:first-child th:last-child {
-moz-border-radius-topright:3px;
-webkit-border-top-right-radius:3px;
border-top-right-radius:3px;
}
table tr {
text-align: center;
padding-left:20px;
}
table td:first-child {
text-align: left;
padding-left:20px;
border-left: 0;
}
table td {
padding:18px;
border-top: 1px solid #ffffff;
border-bottom:1px solid #e0e0e0;
border-left: 1px solid #e0e0e0;

background: #fafafa;
background: -webkit-gradient(linear, left top, left bottom, from(#fbfbfb), to(#fafafa));
background: -moz-linear-gradient(top,  #fbfbfb,  #fafafa);
}
table tr.even td {
background: #f6f6f6;
background: -webkit-gradient(linear, left top, left bottom, from(#f8f8f8),...

JavaScript

var uid = 1;
angular.module("MyApp",[])
    .controller("ContactController" , function($scope) {    
    $scope.contacts = [
        {id:0, 'FrameworkName': 'Viral', 'capability':'[email protected]', 'Documentation': '123-2343-44','Features':'test','Crossbrowser':'test1','Industry':'Yes','Ability':'Yes','Cost':'222'}
    ];  
 
    $scope.saveContact = function() {
        
        if($scope.newcontact.id == null) {
             $scope.newcontact.id = uid++;
             $scope.contacts.push($scope.newcontact);
        } else {
            
             for(i in $scope.contacts) {
                    if($scope.contacts[i].id == $scope.newcontact.id) {
                        $scope.contacts[i] = $scope.newcontact;
                    }
             }                
        }
        $scope.newcontact = {};
    }

    
    $scope.delete = function(id) {
        
        for(i in $scope.contacts) {
            if($scope.contacts[i].id == id) {
                $scope.contacts.splice(i,1);
                $scope.newcontact = {};
            }
        }
        
    }
    
    
    $scope.edit = function(id) {
        for(i in $scope.contacts) {
            if($scope.contacts[i].id == id) {
                $scope.newcontact = angular.copy($scope.contacts[i]);
            }
        }
    }
});