JSFiddle - React, Tailwind, and code Playground

by Adrian-Stefan Mihai

HTML

<body background="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSo81dIykYesjFKrQoPuJbSNVyy4uKUmy3Oy2VrMzHBWlFFt3y_">
    <header class="mainHeader">
        <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTpiN_Xcpzds1xpSy4EkZ9nNMZax6WgCYqiM6zJ1UhQGpCQL2ar" alt="logo facultate">
    </header>
    <nav class="navigationBar">
        <ul>
            <li>
                <button class="btn">Admitere</button>
            </li>
            <li>
                <button class="btn">Despre noi</button>
            </li>
            <li>
                <button class="btn">Invatamant</button>
            </li>
            <li>
                <button class="btn">Cercetare</button>
            </li>
        </ul>
    </nav>
    <aside>
        <section>
            <header>
                <img src="http://www.unitbv.ro/portals/31/Imagini/Admitere%20doctorat.jpg" alt="admitere">
            </header>
            <article class="calendar">Calendar Admitere 2015
                <ul>
                    <li>5-14 iulie depunerea dosarelor</li>
                    <li>15-17 iulie concurs de dosare</li>
                    <li>18 iulie afisarea rezultatelor</li>
                    <li>19-20 iulie depunerea contestatiilor</li>
                    <li>21 iulie afisarea rezultatelor finale</li>
                </ul>
            </article>
        </section>
        <section class="formular">
            <header>
                <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSs0igwx9_hW17uuv7_rVFqbgjeSxOEZsuxEK_Fmb47dhltmQYDNQ" alt="inscriere">
            </header>
            <form class="form">Nume:
                <br>
                <input type="text" name="nume" autofocus required />
                <br>Prenume:
                <br>
                <input type="text" name="prenume" required />
                <br>Nota bacalaureat:
                <br>
                <input type="number" min="1" max="10" required />
               ...

CSS

.mainHeader img {
    width: 95%;
    display: block;
    margin: 0 auto 40px auto;
}
.navigationBar {
    margin-bottom: 40px;
}
.navigationBar li {
    display: inline;
    margin-left: 12px;
    margin-right: 10px;
}
.btn {
    background: #3498db;
    background-image: linear-gradient(to bottom, #993D3D, #1919FF);
    border-radius: 28px;
    font-family: Arial;
    color: #ffffff;
    font-size: 16px;
    padding: 10px 20px 10px 20px;
    text-decoration: none;
}
.btn:hover {
    background: #3cb0fd;
    background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
    text-decoration: none;
}
main {
    margin-left:25px;
    width: 65%;
}
.imgOfStudents img {
    width: 100%;
    height: 100px;
}
.imgOfStudents {
    border: 1px solid #0000ff;
    width: 120px;
    float:left;
    margin-right: 30px;
    margin-bottom: 40px;
}
.infoOfStudents {
    font-size:14px;
    padding-left:2px;
}
aside {
    float: right;
    width: 30%;
}
aside img {
    padding-top: 50px;
    width: 200px;
    display: block;
    float: left;
    margin: 0 auto 0 auto;
}
article.calendar {
    padding-top: 20px;
    float: left;
}
.formular img {
    margin-bottom: 25px;
}
.formular input {
    padding-bottom: 2px;
    margin-bottom: 10px;
}
footer.clear {
    padding-top: 50px;
    clear:both;
}
.copyright1 {
    float:left;
    padding-left: 20px;
}
.copyright2 {
    float:right;
    padding-right: 20px;
}
.infoOfStudents p {
    margin: 5px 0 5px 2px;
}

JavaScript

function Student(className, listOfStudents, renderToId) {
    this.className = className;
    this.listOfStudents = listOfStudents;
    this.renderToId = renderToId;
    this.numStudents = listOfStudents.length;
    for (var i = 0; i < this.numStudents; i++) {
        this.listOfStudents[i].averageGrade = (this.listOfStudents[i].mathGrade + this.listOfStudents[i].romGrade) / 2;
    }
}

Student.prototype.print = function () {

    var button1 = "<button type=\"button\" class=\"arata\">Arata notele</button>";
    for (var i = 0; i < this.numStudents; i++) {
        var aux = "<div class=\"imgOfStudents\">";
        aux += "<img src= \"" + this.listOfStudents[i].image + "\" class=\"imagini\" alt=\"poza\">" + button1 + "<div class=\"infoOfStudents\"><p>Nume:" + this.listOfStudents[i].firstName + " " + this.listOfStudents[i].lastName + "</p><p>Mate:" + this.listOfStudents[i].mathGrade + "</p><p>Romana:" + this.listOfStudents[i].romGrade + "</p><p>Media:" + this.listOfStudents[i].averageGrade + "</p></div></div>";
        if (this.listOfStudents[i].gender === "male") {

            $("#boys").append(aux);
        } else {

            $("#girls").append(aux);
        }



    }

};

$(document).ready(function () {


    var listOfStudents = [{
        firstName: "Ion",
        lastName: "Popescu",
        mathGrade: 8,
        romGrade: 9,
        gender: "male",
        image: "http://www.acfe.com/uploadedImages/ACFE_Website/Content/images/membership-certification/graduate-member.jpg"
    },

    {
        firstName: "Andrei",
        lastName: "Ionescu",
        mathGrade: 3,
        romGrade: 6,
        gender: "male",
        image: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTLL8cXiI4Kv8n_vKyMoZv0Qgahco8Q-9KZ39b14eaOb1Yxr-PA"
    },

    {
        firstName: "George",
        lastName: "Vasilescu",
        mathGrade: 8,
        romGrade: 4,
        gender: "male",
        image:...