JSFiddle - React, Tailwind, and code Playground

by sarfarazdesigner

HTML

<div class="banner"></div>

<div id="box1"></div>
<div id="box2"></div>

CSS

.banner {
  border: solid black 1px;
  box-shadow: 1px 2px;
  background-color: yellow;
  text-align: center;
  width: 90%;               /* fallback for browsers without support for calc() */
    width: calc(50% - 80px);
    height:50px;
    margin:0 auto 30px;
}
#box1{
	height:100px;
	width:300px;
	background:green;
	display:inline-block;
	margin-right:calc(2% + 20px);
    
}

#box2{
	height:100px;
	width:300px;
	background:red;
	display:inline-block;
	/*margin-left:100px;*/
}