JSFiddle - React, Tailwind, and code Playground

by Alireza Safian

HTML

<div class="topBar">
        hoi 
    </div>

    <div class="jumbotron">
        <div class="overMij">

        </div>

        <div class="hobbies">

        </div>

        <div class="muziek">

        </div>

        <div class="informatica">

        </div>
    </div>

CSS

html, body { 
    margin: 0;  
    width: 100%; 
    height: 100%;
    background-image: url(background.jpg)
}

.topBar {
    height: 10%;
    width: 100%;
    background-color: blue;
}

.overMij,
.hobbies,
.muziek,
.informatica
{    
    border-radius: 50px;
    margin:25px;
    
    
    background-color: green;
    background-size: 100%;    
    border-radius: 50px;
    height: 50%;
}

.jumbotron {
    height: 90%;
    width: 100%;
}

.muziek,
.overMij
{
    float: left;
}

.hobbies,
.informatica
{
    float: right;
}

.overMij {   
    width: calc(60% - 50px);
}

.hobbies {
    width: calc(40% - 50px);
}

.muziek {
    width: calc(40% - 50px);
}

.informatica {
     width: calc(60% - 50px);
}