JSFiddle - React, Tailwind, and code Playground

by Kenneth Luplau-Brøgger

HTML

<div class="plans">
	<div class="plan">
		<h1>Plan #1</h1>
	</div>

	<div class="plan --isRecommended">
		<div class="recommended-container">
			<div class="recommended">
				<div class="ribbon-container">
					<div class="ribbon">
						<div class="text">
							<span>
								Mest populær
							</span>
						</div>
					</div>
				</div>
			</div>
		</div>
		
		<h1>Plan #2</h1>
	</div>

	<div class="plan">
		<h1>Plan #3</h1>
	</div>
</div>

SCSS

*, *:after, *:before {
	box-sizing: border-box;
}

body {
	font-family: Helvetica;
}

.plans {
	display: flex;
	padding: 2rem;
}

.plan + .plan {
	margin-left: 1rem;
}

.plan {
	width: 200px;
	height: 300px;
	background: darkgrey;
	position: relative;
	
	&.--isRecommended {
		transform: scale(1.1, 1.1);
	}
	
	
}