JSFiddle - React, Tailwind, and code Playground

by Cioc Andrei

HTML

<div class="container">
    <header>
        <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTpiN_Xcpzds1xpSy4EkZ9nNMZax6WgCYqiM6zJ1UhQGpCQL2ar" alt="logo facultate">
    </header>
    <nav>
        <ul>
            <li><a href="Admitere.html">Admitere</a>

            </li>
            <li><a href="Despre noi.html">Despre noi</a>

            </li>
            <li><a href="Invatamant.html">Invatamant</a>

            </li>
            <li><a href="Cercetare.html">Cercetare</a>

            </li>
        </ul>
    </nav>
    <main>
        <section class="Boys">
             <h2>Premiantii</h2>

            <div class="divBoys">
                <img src="http://www.acfe.com/uploadedImages/ACFE_Website/Content/images/membership-certification/graduate-member.jpg" alt="student1">
                <div class="textBoys">Nume</br>Prenume</br>Media</div>
            </div>
            <div class="divBoys">
                <img src="http://www.acfe.com/uploadedImages/ACFE_Website/Content/images/membership-certification/graduate-member.jpg" alt="student1">
                <div class="textBoys">Nume</br>Prenume</br>Media</div>
            </div>
            <div class="divBoys">
                <img src="http://www.acfe.com/uploadedImages/ACFE_Website/Content/images/membership-certification/graduate-member.jpg" alt="student1">
                <div class="textBoys">Nume</br>Prenume</br>Media</div>
            </div>
            <div class="divBoys">
                <img src="http://www.acfe.com/uploadedImages/ACFE_Website/Content/images/membership-certification/graduate-member.jpg" alt="student1">
                <div class="textBoys">Nume</br>Prenume</br>Media</div>
            </div>
            <div class="divBoys">
                <img src="http://www.acfe.com/uploadedImages/ACFE_Website/Content/images/membership-certification/graduate-member.jpg" alt="student1">
                <div class="textBoys">Nume</br>Prenume</br>Media</div>
            </div>
   ...

CSS

header {
    margin-bottom: 30px;
}
header img {
    width: 100%;
}
ul li {
    display:inline;
    font-size: 20px;
    padding: 0 30px 0 30px;
}
a {
    text-decoration:none;
}
main {
    margin-top: 40px;
    margin-left: 30px;
    width: 70%;
}
section img {
    width: 30%;
    margin-left:0;
}
div.divBoys img, div.divGirls img {
    width: 100%;
    display: inline;
}
div.divBoys, div.divGirls {
    border: 1px solid #0000ff;
    text-align: left;
    font-size:12px;
    width: 150px;
    padding-left: 5px;
    padding-right: 5px;
    margin-right: 30px;
    margin-bottom: 30px;
    float: left;
}
.container {
    margin: 0 auto;
    width: 100%;
    clear: both;
}
.aside {
    width: 28%;
    margin: 0 auto;
    float: left;
}

.footer {
    width: 100%;
  float: left;
}