JSFiddle - React, Tailwind, and code Playground

by marco_m_alves

HTML

<div ng-controller="Ctrl">
    {{status}}
    <div class="entry" ng-repeat="entry in entries">
        {{entry.name}}
        <br>
        {{entry.email}}
        <br>
        {{entry.phone}}
    </div>
</div>

CSS

.entry { border: thin solid lightgray; margin-bottom: 20px;}

JavaScript

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

app.controller('Ctrl', function($scope){
    
    $scope.status = 'start';
    
    var Names = {
        first: ['Marco', 'João', 'Nuno', 'Francisco', 'Luís', 'António', 'Ricardo', 'Carlos', 'Paulo', 'Hugo', 'Pedro', 'Rafael', 'André', 'Filipe', 'Ana', 'Teresa', 'Susana', 'Maria', 'Marta', 'Vera', 'Joana', 'Tita', 'Cristina', 'Cládia', 'Sónia', 'Sara'],
        last: ['Alves', 'Lima', 'Paiva', 'Tavares', 'Coutinho', 'Silva', 'Pinto', 'Antunes', 'Correia', 'Fernandes', 'Manteigas', 'Oliveira', 'Castro', 'Ramos', 'Marques', 'Pedreira', 'Azinheira'],
        get: function(){
            var _f = Math.floor(Math.random() * Names.first.length);
            var _l = Math.floor(Math.random() * Names.last.length);
            return {first: Names.first[_f], last: Names.last[_l]};
        }
    };

    
    var _entries = [];
    
    for (var i = 0; i < 5000; i += 1) {
        var _name = Names.get();
        var entry = {
            name: _name.first + ' ' + _name.last,
            email: _name.first + '.' + _name.last + '@gmail.com',
            phone: '+351969834623'
        };
        _entries.push(entry);
    }        
    
    $scope.entries = _entries;
    
    $scope.status = 'end';
});