JSFiddle - React, Tailwind, and code Playground

HTML

<main class="elevepage">
    <section class="eleve-col main" ng-app="appStudent" ng-controller="studentCtrl">

        <section class="student-form">
            <form class="form-student">
                <div class="eleve-prenom">
                    <div class="input-block">
                        <label for="fname">Prénom</label>
                        <input type="text" name="fname" id="fname" ng-model="fname">
                    </div>
                    <div class="alert"></div>
                </div>

                <div class="eleve-nom">
                    <div class="input-block">
                        <label for="lname">Nom</label>
                        <input type="text" name="lname" id="lname" ng-model="lname">
                    </div>
                    <div class="alert"></div>
                </div>

                <div class="eleve-formation">
                    <label for="formation">Formation</label>
                    <select name="formation" id="formation" ng-model="formation">
                        <option value="Développeur Multimédia">Développeur Multimédia</option>
                        <option value="Développeur Front End">Développeur Front End</option>
                    </select>
                </div>

                <div class="action-form">
                    <input type="submit" class="btn eleve-ajout" value="Ajouter" ng-click="addItem()">
                </div>
            </form>

            <form class="form">
                <div class="eleve-recherche">
                    <label for="searchStudent">Rechercher un élève</label>
                    <input type="text" id="searchStudent" ng-model="searchStudent">
                </div>
            </form>

        </section> <!-- student form -->

        <section class="resultat">

            <table>

                <thead>
                    <tr class="resultat-entete">
                        <th class="avatar">Avatar</th>
                        <th...

JavaScript

var appStudent = angular.module('appStudent', []);
appStudent.controller('studentCtrl', function ($scope) {
    $scope.students = [
        {avatar: 'titi.jpg', fname: 'titi', lname: 'toto', formation: 'Développeur Front End'},
        {avatar: 'tutu.jpg', fname: 'tutu', lname: 'tata', formation: 'Développeur Front End'},
        {avatar: 'foo.jpg', fname: 'foo', lname: 'br', formation: 'Développeur Multimédia'},
    ];

    $scope.firstNameElement = document.querySelector('input[id=fname]');
    $scope.lastNameElement = document.querySelector('input[id=lname]');
    $scope.formationElement = document.querySelector('select[id=formation]');
    $scope.buttonElement = document.querySelector('input[type=submit]');

    $scope.searchStudent = '';

    /* fonction réutilisable */
    //fontion qui force la fenêtre a se place sur un element.
    $scope.scrollTo = function (element) {
        if (element === 'top') {
            window.scrollTo(0, 0);
        }
        else if (element === 'table') {
            var tableEl = document.querySelector('table');
            //getBoundingClientRect() est une methode qui retourne la taille d'un élément et la position relative par rapport au viewport.
            var positionTable = tableEl.getBoundingClientRect();
            window.scrollTo(positionTable.top, positionTable.left);
        }
    };

    //fonction qui permet de parcourir les élements d'un select et d'en selectionner un seul par la valeur
    $scope.selectItemByValue = function(element, value){

        for(var x=0; x < element.options.length; x++)
        {
            if(element.options[x].value == value)
                element.selectedIndex = x;
        }
    };

    /* Fin des fonction réutilisable*/

    /* Principale fonctionnalité  */

    $scope.removeItem = function (i) {
        var index = $scope.students.indexOf(i);
        $scope.students.splice(index, 1);
    };

    $scope.addItem = function () {
        $scope.students.push({
           ...