JSFiddle - React, Tailwind, and code Playground

by varun singhal

HTML

<div id="main">
    <div class="head">GIMP & Inscape galerija</div>
    <div class="content"><button>
    button1
    </button><button>
    button2
    </button></div>
    <div class="outcome">Here is the outcome, that will come, when i will press buttons</div>
  </div>

CSS

body {
    background-image: url("../img/background.jpg");
    background-repeat: no-repeat;
}
#main {
    width: 1400px;
    margin: 0 auto;
    position: relative;
}
.head {
    width: 1400px;
    height: 100px;
    margin: 0 auto;
    border: solid 1px;
    border-radius: 25px;
    text-align: center;
    line-height: normal;
    display: flex;
    justify-content:center;
    align-content:center;
    flex-direction:column;
    margin-top: 50px;
    float:left;
}
.content {
    width: 350px;
    margin: 0 auto;
    height: 600px;
    border: solid 1px;
    margin: 35px 0px 0px 0px;
    border-radius: 10px;
    display: inline-block;

}
.outcome {
    width: 991px;
    height: 600px;
    border: solid 1px;
    margin: 0 auto;
    margin-left:50px;
    border-radius: 10px;
    display: inline-block;
    margin-top:35px;
    float:right;
    
}