JSFiddle - React, Tailwind, and code Playground

by César Martínez

HTML

<body bgcolor="#FFFFFF">

<div class="wrapper">

	<header><img src="../doc/img/cabecera.png" width="1024" height="170" alt=""/></header>
    
	<!--<div class="fijado">-->
    	
		<div class="menu">
    		<nav align="center">
				<ul>
    				<li id="home1"><a href="index.html">home</a></li>
            		<li id="folio2"><a href="#b1">folio</a></li>
       				<li id="bio3"><a href="#bioinfo">bio</a></li>
       				<li><a href="contact.html" target="_blank">contact</a></li>
       			 </ul>
			</nav>
 		 </div>
  
  <!--</div>-->
        
<!--<div id="slideshow"></div>-->

<div class="slideshow"></div>
	
<div class="fotos">
	<hr id="b1"></hr> 
    	<div class="grupo_foto"><a href="1"><div class="grupo_foto1_1"></div></a></div>
        	  
        <div class="grupo_foto2"><a href="1"><div class="grupo_foto2_1"></div></a></div>
        
        <div class="grupo_foto3"><a href="1"><div class="grupo_foto3_1"></div></a></div>
        
        <div class="grupo_foto4"><a href="1"><div class="grupo_foto4_1"></div></a></div>
      
</div>
 
 <div id="bioinfo">
 		<hr id="b2"></hr>
    <div id="fotokes" title="Hi, it's me!">
      <p><img src="../doc/img/img_kes.png" width="156" height="170" alt="César M.Posada"/></p>
    </div>
    
    <div id="texto">
    <p>Born in 1990 in Madrid, Cesar Martinez is an Informatic Engineer who is currently focused in graphic design, web building, photography, 3D and many other fields about graphic arts. His main work also includes very suitable offers like publicity work, media promo or corporative image. He has a clear and simple style according with new tendencies which is the most important target in his job.</p>
    </div>
    	
    </div>
 
  <div id="redes">
 	
    <div id="red_twitter" title="Twitter">
		<a href="https://twitter.com/_CesarPosada" target="_blank"><div id="red_twitter1">
	</div></a></div>
        
    <div id="red_facebook"  title="Facebook">
		<a href="https://www.facebook.com/cesar.martinezposada"...

CSS

@charset "utf-8";
/* CSS Document */


		.wrapper {position:relative;
				background-color:#FFFFFF;
				left:22.5%;
				top:0px;
				width:1024px;
				height:2000px;}
	
		header {position:relative;
				background-color:#ff0000;
				left:0px;
				top:0px;
				width:1024px;
				height:170px;}
				
		.menu {width:1024px;
				background: #fff;}		

					
		nav {width:100%;
				background-color:#ffffff;
				position:absolute;
				left:172.5px;
				top:180px;
				width:680px;
				height:30px;
				font-family:Kozuka Gothic Pr6N R;	
				font-size:20pt;
				text-align:center;
				margin:0px 0px 0px 0px;}
				
		nav ul {background-color:#FFFFFF;
				margin:0px;
				padding:0px;}
					
			nav li {list-style:none;
				margin-right:5px;
				float:left;}
				
			nav a:li {list-style:none;
				margin-right:5px;
				float:left;
				color: #060;}
			
			nav a:link {display:block;
				width:150px;
				text-decoration:none;
				padding:2px 6px 2px 6px;
				color:#060;}
					
			nav a:hover {color: #494949;}
			nav :visited {color:#060;}
						
			/*id para las barras del nav*/
			
			#home1 {border-right:1px solid #060;}
			
			#folio2 {border-right:1px solid #060;}
			
			#bio3 {border-right:1px solid #060;}
			
			
			
			.slideshow {position:absolute;
						width:1024px;
						height:400px;
						top:289px;
						left:0px;
						background-color:#9F4A4C;
						border-radius: 10px}
						
			.fotos{position:absolute;
					margin-top:80px;
					top:669px;
					left:0px;
					padding:0px 0px 0px 12px;
					width:1024px;
					height:569px;}
					

			#bioinfo {position: absolute;
				top: 1428px;
				left: 1px;
				width: 1024px;
				height: 192px;}
					
					
			#fotokes {float:left;
					width:156px;
					height:170px;}
					
				
				
			#texto {width:830px;
					height:180px;
					top:0px;
					padding-left:20px;
					float:left;}
				
			.wrapper #bioinfo #texto p {font-family: Myriad Pro;
										font-size:18pt;}
										
			#redes {position: absolute;
					display:...

JavaScript

$(function(){

     $('a[href*=#]').click(function() {

     if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
         && location.hostname == this.hostname) {

             var $target = $(this.hash);

             $target = $target.length && $target || $('[name=' + this.hash.slice(1) +']');

             if ($target.length) {

                 var targetOffset = $target.offset().top;

                 $('html,body').animate({scrollTop: targetOffset}, 1000);

                 return false;

            }

       }

   });

});


$(document).ready(function(){
		var top,bottom, y, page;

		var left = $('.tofix').offset().left;
		tofixwidth();
		
		$(window).scroll(function (event) {
			// what the y position of the scroll is
			controlArticlePositions();
			
			
			// whether that's below the form
			if (y >= top && y<=bottom && y > page) {
				$('.tofix').addClass('fixed');

				//control horizontal scroll
				tofixl =  left-x;
				$('.tofix').css('left', tofixl);
				
			} else {
				$('.tofix').removeClass('fixed');
			} 
		});

		$(window).resize(function() {
			tofixwidth();
		});

		function controlArticlePositions(){
			page = $('.fijado').offset().top;
			pageb = $('.tofix').height();

			top = $('.tofix').offset().top;

			bottom = page + $('.fijado').height() - pageb;

			y = $(window).scrollTop();
			x = $(window).scrollLeft();
		}

		function tofixwidth(){
			$('.tofix').css('width', '');			
			var sidebarW = $('.tofix').closest('.menu').css('width');
			$('.tofix').css('width', sidebarW);
		}

	});