JSFiddle - React, Tailwind, and code Playground

by tmyie

HTML

<div class="nav">
		<a class="archive" href="#">archive</a>
		<a class="index" href="#">home</a>
		<a class="films" href="#">films</a>
</div>

<p>data: </p>

CSS

.nav {

	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	text-align: center;
	border: 1px solid red;

}

.archive {

	left: 0;
	float: left;
	position: relative;
}

.home {

	position: fixed;
	left: 0;
	text-align: center;
	right: 0;
}

.films {

right: 0;
	float: right;
}

JavaScript

var ww = $(window).width();

$('p').html(ww);
$('a').click(function(){
	$('.nav').animate({left: ww / 2}, "slow");


});