JSFiddle - React, Tailwind, and code Playground

HTML

<div class="ad1">
		<div class="ad2"></div>
		<div class="ad3"></div>
		<div class="ad4"></div>
		<div class="ad5"></div>
	</div>

CSS

* {
			padding: 0;
			margin: 0;
			box-sizing: border-box;
		}
		.ad1 {
			width: 200px;
			height: 305px;
			border: 1px solid #000;
			margin: 30px;
		}
		.ad1 * {
			display: inline-block;
		}
		.ad2 {
			height: 42px;
			border: 1px solid #000;
			width: 100%;
		}
		.ad3 {
			height: 258px;
			width: 27px;
			border: 1px solid #000;	
		}
		.ad5 {
			height: 258px;
			width: 27px;
			border: 1px solid #000;
		}
		.ad4 {
			height: 258px;
			width: 136px;
			border: 1px solid #000;
		}