JSFiddle - React, Tailwind, and code Playground

HTML

<inf>
	<name>Name </name>
	<br></br>
	
	<quote title="http://en.wikipedia.org/wiki/Megan_Nicole">
		Some info here
	</quote> 
	
	<br></br>
	<link>
		<b>link 1</b><l href="#">description</l>
		<b>link 2</b> <l href="#">description</l>
	</link>
	<br></br>
	<songs>
		<header>List</header>
		<list><l href="#">description</l></list>
		<list><l href="#">description</l></list>
		<list><l href="#">description</l></list>
		<list><l href="#">description</l></list>
		<list><l href="#">description</l></list>
	</songs>
</inf>

CSS

inf{
	font-family:Arial;
}

name{
	font-size:25;
	font-weight: bold;
	width:100%;
	height:50px;
	line-height:50px;
}
name img{
	height:25px;
	float:right;
	margin:12px;
}
l{
	color:#222;
	font-size:18;
	font-style: italic;
	display:block;
	transition:all 0.4s;
	-webkit-transition:all 0.5s;
	text-decoration:none;
	width:auto;
}
l:hover{
	cursor:pointer;
	color:blue;
    background:green;
}
songs{
	width:100%;
}
songs header{
	background:#222;
	color:#ccc;
	padding:5px;
	width:50%;
	border:1px solid #222;
}
songs list{
	display:block;
	border-bottom:1px solid #222;
	border-left:1px solid #222;
	border-right:1px solid #222;
	padding:5px;
	width:50%;
}