JSFiddle - React, Tailwind, and code Playground

by Oliver Murfett

HTML

<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
<div class = "container">
			<div class = "header">
				<table class = "headertable">
					<tr class = "headertabletr">
						<td class = "headerlogo">
							<div class = "logoanimation">
								<a href= "">
									<p><</p>
									<p>C</p>
									<p class = "logodisapear1">ode</p>
									<p>U</p>
									<p class = "logodisapear2">niversity</p>
									<p>/></p>
								</a>
							</div>
						</td>
					</tr>
				</table>
			</div>
		</div>

CSS

/*CSS*/
.header {
	margin: 0px;
	padding: 0px;
	width: 100%;
}

.headertable {
	padding: 0px;
	margin: 0px;
	width: 100%;
	border-spacing: 0px;
}

.headertabletr {
	width: 100%;
	padding: 0px;
	margin: 0px;
}

.logoanimation a {
	text-decoration: none;
	color: black;
}

.logoanimation p {
	display: inline-block;
	margin: 0px;
    font-family: 'Oswald', sans-serif;
	vertical-align: bottom;
}

.logodisapear1 {
	overflow: hidden;
	width: 0px;
	-webkit-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;
	transition: all 0.2s linear;
}


.logoanimation:hover .logodisapear1 {
	width: 23px;
}

.logoanimation:hover .logodisapear2 {
	width: 56px;
}

.logodisapear2 {
	overflow: hidden;
	width: 0px;
	-webkit-transition: all 0.4s linear;
	-moz-transition: all 0.4s linear;
	-o-transition: all 0.4s linear;
	transition: all 0.4s linear;
	-webkit-transition-delay: 200ms;
    -moz-transition-delay: 200ms;
    -o-transition-delay: 200ms;
    transition-delay: 200ms;
}