JSFiddle - React, Tailwind, and code Playground

by Aldi Unanto

HTML

<section id="container">
    <header>
		<div>
			<h1>peserta</h1>
			<h1>PPSPPT 2013</h1>
		</div>
		<div>
            <img src="http://4.bp.blogspot.com/-olO4S5gOAWA/Tc4T6RCSqwI/AAAAAAAAAXY/Djbr9VZGq8w/s400/logo_gunadarma.jpg" />
        </div>
        <div class="endfloat"></div>
	</header>
	<div id="content">
		<table>
			<tr>
				<td>nama</td>
				<td>:</td>
				<td>aldi unanto</td>
			</tr>
			<tr>
				<td>no. pend.</td>
				<td>:</td>
				<td>(Gw lupa)</td>
			</tr>
			<tr>
				<td>fakultas</td>
				<td>:</td>
				<td>&nbsp;</td>
			</tr>
			<tr>
				<td colspan="3">&emsp;&nbsp;ilmu komputer</td>
			</tr>
			<tr>
				<td>jurusan</td>
				<td>:</td>
				<td>&nbsp;</td>
			</tr>
			<tr>
				<td colspan="3">&emsp;&nbsp;sistem informasi</td>
			</tr>
			<tr>
				<td>kelompok</td>
				<td>:</td>
				<td>&nbsp;</td>
			</tr>
			<tr>
				<td colspan="3">&emsp;&nbsp;komad 23</td>
			</tr>
		</table>
		<div class="photo">
            <img src="https://lh4.googleusercontent.com/-OsBHR2ivx9k/UcJRqijdyCI/AAAAAAAAAEU/cAZDlFZrBEs/w325-h324-no/me.jpg" alt="aldi unanto" title="My name's Aldi Unanto" />
		</div>
	</div>
</section>

CSS

body{
	margin: 0; padding: 0;
	font-family: Verdana, Tahoma;
	font-size: 12px;
	color: #000000;
	background-color: #ffffff;
}
.endfloat{ clear: both; width: 0; height: 0; margin: 0; padding: 0; }
#container{
	position: relative;
	width: 360px;
	height: 416px;
	border: 1px solid #000000;
	margin: 40px auto 0 auto;
}
#container div:nth-child(1){
	float: right; width: 65%;
}
#container div:nth-child(1) > h1:nth-child(1){ margin-top: 25px; }
#container div:nth-child(1) > h1{
	text-transform: uppercase;
	font-weight: bold;
	font-size: 25px;
	text-align: left;
	margin: 0; padding: 0;
}
#container div:nth-child(2) > img{
	width: 100px; height: 100px;
	margin: 8px;
}
#container #content .photo{
	position: absolute;
	right: -4px; bottom: 4px;
    padding: 0;
}
#container #content .photo > img{ height: 227px; width: 151px; }

#container #content table{ margin-left : 5px; }
#container #content table tr:nth-child(2) > td:nth-child(3){
    font-style: italic;
}
#container #content table tr td{
	font-weight: bold;
	text-transform: uppercase;
	padding: 4px;
	font-size: 15px;
}