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 />
                <br>Sex
                <input type="radio" name="sex"...

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%;
}
.imgOfStudents {
    border: 1px solid #0000ff;
    width: 100px;
    float:left;
    margin-right: 30px;
    margin-bottom: 25px;
}
.infoOfStudents {
    font-size:12px;
    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;
}