JSFiddle - React, Tailwind, and code Playground

by yash009

HTML

<body bgcolor=black>
	<div class="mainBox">
		<div class="margin"></div>
		<div class="contentBox">
			<div id="title" style="text-align: center; height: 3.5vw"><h1>Curriculum Vitae</h1></div>
			<div class="horizontalLine"></div>
			<div class="horizontalEmpty"></div>
			<div class="column" style="float: left">
				<div class="sectionTitle"><h2>Personal details</h2></div>
				<div class="sectionEmpty"></div>
				<div class="frame">
					<div class="frameContent">
						<div class="sectionEmpty"></div>
						<div class="row">
							<div class="property">Full name</div>
							<div class="value">Dolor sit amet</div>
						</div>
						<div class="row">
							<div class="property">Nationality</div>
							<div class="value">Dolor sit amet</div>
						</div>
						<div class="row">
							<div class="property">Date of birth</div>
							<div class="value">Dolor sit amet</div>
						</div>
						<div class="sectionEmpty"></div>
						<div class="row">
							<div class="property">Street name</div>
							<div class="value">Dolor sit amet</div>
						</div>
						<div class="row">
							<div class="property">City</div>
							<div class="value">Dolor sit amet</div>
						</div>
						<div class="row">
							<div class="property">Post code</div>
							<div class="value">Dolor sit amet</div>
						</div>
						<div class="sectionEmpty"></div>
						<div class="row">
							<div class="property">Email</div>
							<div class="value">Dolor sit amet</div>
						</div>
						<div class="row">
							<div class="property">Mobile</div>
							<div class="value">Dolor sit amet</div>
						</div>
						<div class="sectionEmpty"></div>
					</div>
				</div>
			</div>
			<div class="column" style="float: right">
				<div class="sectionTitle"><h2>Lorem ipsum</h2></div>
				<div class="sectionEmpty"></div>
				<div class="frame">
					<div class="frameContent">
						<div class="sectionEmpty"></div>
						<div...

CSS

body {
		font-family: Cambria, Georgia, serif;
		color: black;
	}
	
	h1 {
		font-size: 2.5vw;
		color: rgb(54,95,145);
	}
	
	h2 {
		font-size: 1.5vw;
		margin: 0;
	}
	
	.mainBox {
		width: 90vw;
		margin: auto;
		background-color: white;
	}
		
	.margin {
		height: 5vw;
	}
		
	.contentBox {
		width: 80vw;
		margin: auto;
		overflow: auto;
	}
	
	.horizontalLine {
		width: 100%;
		height: 0.5vw;
		background-color: rgb(184,204,228);
		clear: both;
	}
	
	.horizontalEmpty {
		width: 100%;
		height: 1.5vw;
		clear: both;
	}
	
	.column {
		width: 49%;
	}
	
	.sectionTitle {
		height: 1.9vw;
		background-color: rgb(184,204,228);
		padding-left: 1vw;
	}
	
	.sectionEmpty {
		width: 100%;
		height: 0.75vw;
		clear: both;
	}
	
	.frame {
		border-style: dotted;
		border-color: rgb(184,204,228);
		border-width: 1px;
		width: 99.7%;
		clear: both;
	}
	
	.frameContent {
		width: 95%;
		margin: auto;
	}
	
	.employmentFrame {
		border-style: dotted;
		border-color: rgb(184,204,228);
		border-width: 1px;
		padding-left: 1vw;
		clear: both;
	}
	
	.employmentFrameContent {
		width: 100%;
		margin: auto;
	}
	
	.row {
		height: 2vw;
    border-style: dotted;
		border-color: rgb(184,204,228);
		border-width: 1px;
	}
	
	.property {
		width: 30%;
		font-size: 1.3vw;
		font-weight: bold;
		color: rgb(54,95,145);
		float: left;
	}
	
	.value {
		width: 70%;
		font-size: 1.3vw;
		font-weight: bold;
		float: left;
	}