JSFiddle - React, Tailwind, and code Playground

by manishmishra256

HTML

<div class="wrapper">
		<div class="container-one">
		</div>
		<div class="container-two">
		</div>
		<div class="container-three">
		</div>
	</div>

CSS

.wrapper
	 {
	 	width: 1600px;
	 	position: relative;
	 	left: 0;
	 	top:10%;
	 	height:500px;
	 	border: 1px solid black;
	 	overflow-y:hidden;
        overflow-x:auto;
	 }
	 .wrapper .container-one
	 {
          position: relative;
          left:0;
          top:0;
          overflow-y:hidden;
          overflow-x:auto;
          width:500px;
          height: 80%;
          padding:2px;
          border:Solid 1px Gold;
          float: left;
	 }
	 .wrapper .container-two
	 {
	      position: relative;
          left:auto;
          top:0;
          overflow-y:hidden;
          overflow-x:auto;
          width:500px;
          height: 80%;
          padding:2px;
          border:Solid 1px Red;	
          float:left;
	 }
	 .wrapper .container-three
	 {
	 	  position: relative;
          left:auto;
          float:left;
          top:0;
          overflow-y:hidden;
          overflow-x:auto;
          width:500px;
          height: 80%;
          padding:2px;
          border:Solid 1px Green;	
	 	
	 }