JSFiddle - React, Tailwind, and code Playground

Tiles homescreen

by Zonedark

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<div ng-controller="MyCtrl" class="fond">
  <div ng-repeat="group in data" class="service-group whiteborder">
    <div>
    {{group.Name}}
    </div>
      <div ng-init="myStyle={'background-color':vignette.Color}" class="vignette-base" ng-repeat="vignette in group.Services track by $index" ng-class="[vignette.Size, vignette.Color]" ng-style="myStyle">
      
      </div>
  </div>
</div>

CSS

.fond{
  background-color:grey;
  width:1200px;
  height:600px;
}

.whiteborder{
    border:solid 1px white;
}

.service-group{
  float:left;
  margin-top:5%;
  margin-left:20px;
  height:60%;
  width:300px;
}

.vignette-base{
  margin-left:2%;
  margin-top:10px;
  height:75px;
  border-radius:3px;
  color:white;
  font-size:80%;
}

.v25{
  width:22%;
  display:inline-block;
}
.v50{
  width:46%;
  display:inline-block;
}
.v100{
  width:94%;
 }

JavaScript

var myApp = angular.module('myApp', []);

myApp.controller('MyCtrl', ['$scope', function($scope) {
	var vignette25 = { Size:'v25', Color:"purple", Text:"V25"};
  var vignette50 = { Size:'v50', Color:"blue", Text:"V50"};
  var vignette100 = { Size:'v100', Color:"orange", Text:"V100"};
  
  $scope.data = [
    { Name:"Group1", Services:[
    { Size:'v25', Color:"rgb(70, 140, 157)", Text:"SOLDE DE MA CARTE E.LECLERC"},
    { Size:'v25', Color:"rgb(16, 100, 118)", Text:"INFORMATIONS DE MA CARTE E.LECLERC"},
    { Size:'v25', Color:"rgb(148, 67, 95)", Text:"SOLDE DE MA CARTE CADEAU"},
    { Size:'v25', Color:"rgb(241, 191, 2)", Text:"BOITE A IDEES"},
    { Size:'v50', Color:"rgb(3, 182, 217)", Text:"PLAN"},
    { Size:'v50', Color:"rgb(253, 143, 12)", Text:"CHANGER MES PIECES EN BON D'ACHAT"},
    { Size:'v25', Color:"rgb(126, 81, 195)", Text:"BILLETERIE E.LECLERC"},
    { Size:'v25', Color:"rgb(96, 186, 0)", Text:"CARTE TRAITEUR"},
    { Size:'v50', Color:"rgb(0, 162, 118)", Text:"CATALOGUES"}
    ]},
    { Name:"Group2", Services:[vignette25, vignette25, vignette50, vignette100]},
     { Name:"Group3", Services:[vignette25, vignette25, vignette50, vignette50, vignette25, vignette25]}
    ];
}]);

$( document ).ready(function() {
    var services = [
    { Name:"Group1", Services:['A', 'B', 'C']},
    { Name:"Group2", Services:['D', 'E', 'F']}
    ];
});