JSFiddle - React, Tailwind, and code Playground

HTML

<body>
	<div class="container">
		<header>
		</header>

		<!-- first row -->
		<div id="first">	
			<div id="picture">
				<img src="img/burak.jpg"/>
			</div>
			<div id="quote">
				<p id="quote-of-the-day">"SOME QUOTE HERE"</p>
			</div>
		</div>
		<!-- first row -->

		<!-- second row -->
		<div id="second">
			<div id="personal-details">

				<table class="table" id="left-personal">
					<tr>
						<td>Name:</td>
						<td>Burak Özmen</td>
					</tr>

					<tr>
						<td>Date of Birth:</td>
						<td>13 June 1993</td>
					</tr>

					<tr>
						<td>Place of Birth:</td>
						<td>Zonguldak/Turkey</td>
					</tr>
				</table>

				<table class="table" id="right-personal">
					<tr class="left">
						<td>
							<img class="icon" src="img/twitter_alt.png"/>
							<a href="http://twitter.com/ozmen_burak">twitter.com/ozmen_burak</a>
						</td>
						<td>
							<img class="icon" src="img/facebook.png"/>
							<a href="http://facebook.com/ozmen.b">facebook.com/ozmen.b</a>
						</td>
					</tr>

					<tr class="right">
						<td>
							<img class="icon" src="img/quora.png"/>
							<a href="http://twitter.com/ozmen_burak">twitter.com/ozmen_burak</a>
						</td>
						<td>
							<img class="icon" src="img/github_alt.png"/>
							<a href="http://github.com/bozmen">github.com/bozmen</a>
						</td>
					</tr>
				</table>

			</div>
		</div>
		<!-- second row -->

		<!-- third row -->
		<div id="third">
			<div id="qualifications">div1</div>
			<div id="education">div2</div>
		</div>
		<!-- third row -->

	</div>

</body>

CSS

a{
	color: #115500;
}

a:hover{
	color: #115500;
	font-weight: bold;
}

.container {
	width: 970px;
}

#picture{
	display: inline-block;
	width: 25%;
	float: left;
}

#personal-details{
	height: 124px;
}

#first{
	height: 226px;
}

#second{
}

#third{
	background: green;
	height: 100px;
}

#right-personal td, #left-personal td{
	border-top: none;
}

#quote{
	width: 75%;
	display: block;
	float: left;
	text-align: center;
}

#quote-of-the-day{
	margin: 10%;
}

#picture img{
	border-radius: 50%;
	max-width: 100%;
	border: 2px solid gray;
}

#left-personal{
	width: 25%;
	display: block;
	float: left;
	margin-bottom: 0px;
}

#left-personal td:first-child{
	font-weight: bold;
	padding: 6px;
}


#right-personal{
	margin-top: 7px;
	max-width: 75%;
	display: inline-block;
}

#right-personal td{
	padding-top: 10px;
	padding-left: 100px;
}

#qualifications, #education{
	display: inline-block;
	float: left;
}

#qualifications{
	width: 25%;
}

#education{
	width: 75%;
}

.right{
}