JSFiddle - React, Tailwind, and code Playground

by Lucas Debelder

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Lucas Debelder</title>
    
    <meta name="keywords" content="portfolio, homepage, lucas debelder, zanic l3" />
    <meta name="description" content="portfolio, lucas debelder, zanic l3" />
    <meta name="author" content="Lucas Debelder, Zanic L3" />
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    
    <link href="css/reset.css" rel="stylesheet" type="text/css">
    <link href="css/normalize.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600" rel="stylesheet">

    <script src="https://code.jquery.com/jquery-latest.js"></script>


    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
    '</script>
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
    <![endif]-->
    
    
</head>
    
    <body>
        <div class="BG_gradient">
            <div class="wrapper">
                <section class="header"></section>
                <section class="mainbox left">Box 1</section>
                <section class="mainbox middle">Box 2</section>
                <section class="mainbox right">Box 3</section>
            </div>
        </div>
        
    </body>
</html>

CSS

/*Defining the font and pixels so we can work with em later*/
body {
    font-family: 'Poppins', sans-serif;
    font-size: 25px;
}

/*BG gradient layer + bg elements*/
.BG_gradient {
    background-image: linear-gradient(-135deg, #FEE140 0%, #FA709A 100%);
    /*Padding = 10vh top + 10vh bottom = 20vh*/
    padding: 10vh 5vh 10vh 5vh;
    /*Padding top and bottom is already 20vh combined so height left is 70vh*/
    height: 80vh;
}

/* wrapper of the content*/
.wrapper {
    /*Here we define the start of the grid*/
    display: grid;
    /*This means left colom is 1fr, middle 2fr, and right 1fr so total it's 4fr*/
    grid-template-columns: 1fr 2fr 1fr; 
    
    /*Rows = vertical so min it should be 95px atleast and max it's on auto*/
    grid-auto-rows: minmax(95px, auto);   
    grid-gap: 1em;

    /* BG visuals: */
    background: #EEF3F4;
    box-shadow: 0 0 90px 0 rgba(0,0,0,0.10);
    border-radius: 15px;
    height: 500px;
}
.header {
    grid-column: 4/4;
}
.left {
    background-color: rgba(230,45,45,0.50);
}
.middle {
    background-color: rgba(50,115,180,0.50);
}
.right {
    background-color: rgba(120,230,45,0.50);
}