JSFiddle - React, Tailwind, and code Playground

by Pietro Spagnolo

HTML

<body class="moving">

<!-- menu button -->
	<a href="#" class="menu-link">Menu</a>	

<!-- menu -->
	<div class="menu">
		<div class="menu-container">
			<a href="../" class="menu-elements">Contacts,</a>
			<a href="#" class="menu-elements">Info,</a>
			<span href="#" class="menu-elements">Lab,</span>
			<span  href="#" class="menu-elements">Publications,</span>
			<span  href="#" class="menu-elements">Shop,</span>
			<a href="https://www.facebook.com/pietro.spagnolo" class="menu-elements">Facebook,</a>
			<a href="https://twitter.com/pietrospagnolo_" class="menu-elements">Twitter,</a>
			<a href="http://pietrospagnolo.vsco.co" class="menu-elements">Vsco,</a>
			<a href="#" class="menu-elements">Credits</a>
		</div>
	</div>

	
	<div class="project-page">
		<div class="project-title">
			<h1>Art walk & wine</h1>			
		</div>
		
		<div class="gallery columns small-12">
	<!-- gallery -->

		<!-- 1 -->
			<div class="gallery-item" id="gallery-item-start">
				<img src="img/1.jpg">
			
			<!-- caption -->
			<div class="caption-box caption small-8 medium-6">
				<p class="caption-description">
				Pattern with Virgo
				</p>
			</div>

			</div>
		
		<!-- 2 -->
			<div class="gallery-item">
				<img src="img/2.jpg">

			<!-- caption -->
			<div class="caption-box caption small-8 medium-6">
				<p class="caption-description">
				Aquarius
				</p>				
			</div>

			</div>

		<!-- 3 -->
			<div class="gallery-item">
				<img src="img/3.jpg">

			<!-- caption -->
			<div class="caption-box caption small-8 medium-6">
				<p class="caption-description">
				Libra & Sagittarius
				</p>				
			</div>

			</div>			
		
		<!-- 4 -->
			<div class="gallery-item">
				<img src="img/4.jpg">

			<!-- caption -->
			<div class="caption-box caption small-8 medium-6">
				<p class="caption-description">
				Aquarius
				</p>				
			</div>

			</div>
			
		</div>

		<div class="project-text small-12 medium-6 medium-offset-3" id="project-text-start">
			<p>
			Quisque iaculis pretium...

CSS

*
{
    margin: 0;
    padding: 0;

    border: 0;
}

/*---------------------------------------------------------------------------------*/

.color
{
    color: #e74c3c;
    color: #3498db;
    color: #f2e530;
    color: #2ecc71;
}

.hide
{
    display: none;
}

.show
{
    display: block;
}

.down
{
    z-index: -1000;
}

.bg-white
{
    background-color: #fff;
}

.transparent
{
    color: transparent;
}

.grey
{
    color: #b4b4b4;
}

img
{
    max-width: 100%;
    max-height: 30%;
}

.video
{
    max-width: 800px;
    margin:0px auto;

}

span
{
    text-decoration: line-through;

    color: #b4b4b4;
}

/*---------------------------------------------------------------------------------*/

.light-p
{
    -webkit-transition: background 2s;
            transition: background 2s;

    background: #fff;
}

.dark-p
{
    -webkit-transition: background 2s;
            transition: background 2s;

    background: #1e1e1e;
}

.light-t
{
    color: #1e1e1e;
}

.light-u
{
    color: #b4b4b4;
}

.dark-u
{
    color: #000;
}




.transparent-t
{
    -webkit-transition: background 2s;
            transition: background 2s;

    color: transparent;
}

/*---------------------------------------------------------------------------------*/

body
{
    font-family: 'Apercu', sans-serif;
    /*font-size: 1.1rem;*/
    line-height: 1.4;
    position: relative;

    margin: 0;

    color: #000;
    background-color: #fff;

    -webkit-transition: background 2s;
            transition: background 2s;
}


canvas
{
    siz
    position: absolute;
    z-index: -1;

    width: 100%;
    height: 100%;
}

::selection
{
    color: #e74c3c;
    background: transparent;
}

a
{
    text-decoration: none;

    color: #000;
}

a:hover
{
    text-decoration: underline;
    /*color: #111;*/
}

a:focus
{
    outline: none;
}

/*a:visited
{
    color: #111;
}
*/
a + img
{
    position: absolute;

    display: none;
}

a:hover + img
{
    top: 30%;
    left: 10%;

    display:...

JavaScript

$(window).scroll(function() {   
    if($(window).scrollTop() + $(window).height() == $(document).height()) {
       alert("bottom!");
    }
});