JSFiddle - React, Tailwind, and code Playground

by kreativgeist

HTML

<div id="main">
			
			<div id="v">				
				
				<img id="vp" src="https://www.stackoverflowbusiness.com/hubfs/logo-so-color.png" />
				<div class="but">div1</div>
				<div class="but">div2</div>
				<div class="but">div3</div>
				
			</div>
		
		</div>

CSS

* {
    box-sizing: border-box;
}

#main {	
	width:800px;
	height:300px;
	overflow: hidden;
	padding:10px;
	background-color: green;
}

#vp {
	overflow: hidden;
	max-width:100%;
	max-height:100%;
	background-color: gray;
}

#v {
	background-color: green;
	margin:0px;
	padding:0px;
	height: calc(100% - 25px);
	border-radius: 15px;
	overflow:hidden;
	max-width:100%;
	max-height:100%;
}

.but {
	width:40px;
	height:40px;
	background-color: red;
}