JSFiddle - React, Tailwind, and code Playground

by andi msc

HTML

<div id="container">

	<div id="homelink">
	<a href="#" onclick="return false;" title="Go to home page">Home</a>
	</div>
	
	<div id="header">
		<a href="#" id="logo" onclick="return false;"></a>
		
		<p id="header-right">Scroll the Page Down Slowly to See the Logo Change</p>
	</div>

	<div id="content">

	<p><strong><a href="http://www.impressivewebs.com/stationary-logo-changes-page-scroll-css/">&lt; Go Back to the Tutorial</a></strong></p>
	
	<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
	
	<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
	
	<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat...

CSS

body {
	margin: 0;
	padding: 0;
}

p {
	font-family: Arial, Helvetica, sans-serif;
	font-size: .8em;
	line-height: 1.5em;
	margin: 0 0 14px 0;;
}

#container {
	background: transparent url(http://www.impressivewebs.com/demo-files/logo-scroll/demologo-wired.jpg) fixed no-repeat 30px 30px;
}

#header {
	background: #bbd5fd url(http://www.impressivewebs.com/demo-files/logo-scroll/demologo.jpg) fixed no-repeat 30px 30px;
	overflow: hidden;
	padding: 30px 0 30px 30px;
	height: 138px;
}

p#header-right {
	float: left;
	font-size: 40px;
	text-align: left;
	padding: 0 0 0 32px;
	padding: 40px 0 0 33px;
	width: 960px;
}

a#logo {
	display: block;
	width: 138px;
	height: 138px;
	float: left;
}

* html a#logo {
	background-position: 0 0;
}


#content {
	padding: 20px 50px 0 200px;
	clear: left;
}

#homelink {
	position: fixed;
	top: 30px;
	left: 30px;
}

	#homelink a {
		text-indent: -9999em;
		display: block;
		width: 138px;
		height: 138px;
		overflow: hidden;
	}
	
	* html #homelink a {
		display: none;
	}