JSFiddle - React, Tailwind, and code Playground

HTML

<body>
        <nav>
            <ul>
                <li><a href="index.html">Smoelen</a></li>
                <li><a id="btn_NieuwSmoeltje">Nieuwe smoel</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
        <div class="form_lekkersmoelen">
            <form name="new_Smoel">
                <input type="text" name="smoel_Naam" placeholder="Naam"/><br>
                <input type="text" name="smoel_Beschrijving" placeholder="Beschrijving"/><br>
                <input type="file" name="smoel_Img"/><br>              
            </form>
            <button id="btn_Submit" style="margin-bottom: 2%;">Nieuwe smoel</button>  
        </div>
        <div class="smoelen_wrapper">
            <ul id="idtje">
            </ul>
        </div>
        <!--jQuery-->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        
        <!--jQuery Flip-->
        <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
        <script src="https://cdn.rawgit.com/nnattawat/flip/master/dist/jquery.flip.min.js"></script>
        
        <!--Custom js-->
        <script src="script.js" ></script>
</body>

CSS

/*Nav bar*/
nav ul li {
    display: inline-block;
	text-align: center;
}

nav ul li a {
    padding: 20px 20px; 
    color: #FFFFFF;
	font-size: 18px;
	font-family: Arial;
	text-decoration: none;
	display: block;
	transition: background-color 0.8s ease-out;
}

nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: cornflowerblue;
    
    border-radius: 5px;
}

nav {
    text-align: center;
}

a:hover{
    background-color: #FFFFFF;
    color: grey;
}

.form_lekkersmoelen {
    margin: auto;
    text-align: center;
    width: 30%;
    background-color: white;
    border: 2px solid cornflowerblue;
    border-top-width: 0px;
    border-radius: 0px 0px 10px 10px;
}
.form_lekkersmoelen form {
	margin: 1%;
}

/*/Nav bar/*/

/*Smoelen*/
.smoelen_wrapper {
    padding-bottom: 1%;
    margin: auto;
    overflow-x: auto;
}

ul#idtje{
    text-align: center;
}

#idtje li{
	display: inline-block;
}

.smoel{
    height: 350px;
    width: 350px;
    margin: 1em;
}

.front, .back{
    height: inherit;
    width: inherit;
    border-radius: 200px;
    border: solid grey;
    text-align: center;
}

    /*Content*/
    .tekst {
        padding-top: 35%;
        font-family: Gadget, sans-serif;
		font-size: 19px;
        font-weight: 500;
		color: grey;
    }
    
    img {
        border-radius: 200px;
        height: inherit;
        width: inherit;
    }
    /*/Content/*/

/*/Smoelen/*/

JavaScript

$(document).ready(function(){
    $('.form_lekkersmoelen').hide();
});

$(document).on('click', '#btn_NieuwSmoeltje', function(){
    $('.form_lekkersmoelen').slideToggle('slow');
});

$(document).on('click', '#btn_Submit', function(){
    var naam = $('input[name=smoel_Naam]').val();
    var beschrijving = $('input[name=smoel_Beschrijving]').val();
    
    $('.smoelen_wrapper ul').append("<li>"+
            "<div class='smoel'>" +
                "<div class='front'>" +
                    "<img src='http://i.imgur.com/20EtUzB.png'>" +
                "</div>" +
                "<div class='back'>" +
                    "<div class='tekst'>" +
                        "<strong>" + naam + "</strong>" +
                        "<br><br><strong>Over " + naam + ":</strong><br>" + beschrijving +
                    "</div>"+
                "</div>"+
           "</div>" + "</li>");
    $('.smoel').flip({axis: 'y', trigger: 'hover'});
});