JSFiddle - React, Tailwind, and code Playground

by shansubra

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.7.0/ui-bootstrap.min.js"></script>
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
<body ng-app="app" ng-controller="my_controller">    
<div class="span3 projectCard" ng-repeat="country in all_countries">
    <div class="projectCardHeight">
        <button class="btn close cardClose" ng-click="deleteCountry(country.id)">×</button>
        <div class="cardHeader">Country</div>
        <div class="cardBody">{{country.id}}</div>
        <div class="cardBody">{{country.title}}</div>
        <div class="cardBody"><a href="#" id="pop{{country.id}}" class="btn btn-primary" rel="popover" data-content="This is the <b>body</b> of Popover" data-original-title="Creativity Tuts">pop</a></div>
    </div>
</div>
 </body>

CSS

.card {
    background-color:#efefef;
    border: 1px solid black;
    height:125px;
    width: 268px;    
    margin-bottom: 20px;
    position: relative;
}

.projectCard {
    background-color:#efefef;
    border: 1px solid black;
    height:195px;
    width: 325px;    
    margin-bottom: 20px;
    position: relative;
}

.projectCardHeight{
    max-height:194px;
    overflow-x:hidden;
    overflow-y:auto;
}

.cardHeader {
    background-color: #336699; /* old blue color - 0072CC, then #0081c2*/
    font-size:11pt;
    font-weight:bold;
    color:white;
    padding:5px;
}

.cardClose {
    color: white;    
    font-weight:bold;
    margin-right:5px;
}

.cardContainer {
    width:90%;
}

.cardBody {
    padding-left: 5px;
}

.cardBodyRight {
    margin-left:20px;
    margin-top:10px;
}

.cardImage {
    height:50px;width:50px;margin-top:10px;
}

JavaScript

var app = angular.module("app", []);
app.controller('my_controller', function($scope) {  
  $scope.all_countries = [{"id":28,"title":"Sweden"}, {"id":56,"title":"USA"}, {"id":89,"title":"England"}];
});

function deleteCountry(id)
{
    alert("Do something");
}

$(document).ready(function () {
        $("a[rel=popover]")
            .popover({ placement: 'bottom', html: 'true' })
            .click(function (e) {
                e.preventDefault();
            });
    });