JSFiddle - React, Tailwind, and code Playground

by PhilQ

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<div class="wrapper">

<!-- <h1 class="head"><i>CV</i></h1> -->

<section>
	<div class="personalia-insert">
		<div class="corner top"></div>
		<div class="corner-shadow top"></div>
		<div class="corner bottom"></div>
		<div class="corner-shadow bottom"></div>
		<div class="personalia">
			<div class="img"><img...

SCSS

@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@700&family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Noto+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap');

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

body {
	background: #efefef;
	font-family: 'Noto Sans', sans-serif;
	//font-family: 'Noto Serif', serif;
}

.wrapper {
	width: 100%;
	max-width: 1200px;
	min-height: 100vh;
	margin: 0 auto;
	border-left: 1px solid rgba(0,0,0, 0.1);
	border-right: 1px solid rgba(0,0,0, 0.1);
	padding: 4rem;
	padding-top: 0rem;
	overflow: hidden;
	background: #fafafa;
	box-shadow: 0 0 5px 0 rgba(0,0,0, 0.1);
}

.personalia-insert {
	position: relative;
	float: right;
	width: 275px;
	//margin: -2rem 0 4rem 4rem;
	margin: 4rem 0 4rem 4rem;
	display: inline-block;
	line-height: 0;
	
	&:after {
		content: '';
		display: inline-block;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background: transparent;
		box-shadow: 0px 1px 4px 0px rgba(0,0,0, 0.15);
		z-index: 1;
	}

	.personalia {
		position: relative;
		display: inline-block;
		width: 100%;
		height: 100%;
		z-index: 3;
		background: #fff;
		border: 0px solid rgba(0,0,0, 0.1);
		padding: 2rem 2rem 0.5rem 2rem;
		line-height: 1.5;
		text-align: center;
		
		> .img {
			position: relative;
			display: inline-block;
			background: #eee;
			margin: 0 auto ;
			line-height: 0;
			
			&:after {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				display: inline-block;
				border: 1px solid rgba(0,0,0, 0.05);
			}

			img {
				width: auto;
				height: 280px;
			}
		}

		> div:not(.img) {
			text-align: left;
			margin: 0 -2rem;
			padding: 1rem 2rem;
			//border-top: 1px solid #b3d7ee;
			//border-bottom: 1px solid #b3d7ee;
			//background: #d9ebf7;
		}
		
		h3 {
			color: #007bc7;
			border-bottom: 2px solid #b3d7ee;
			border-bottom: 1px solid rgba(0,0,0, 0.05);
			padding-bottom: 0.25rem;
			margin-bottom:...