JSFiddle - React, Tailwind, and code Playground

by andrey90vs

HTML

<!doctype html>
<html class="no-js">
    <head>
        <meta charset="utf-8">
        <title>Photography Template</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width">
        <link rel="shortcut icon" href="/favicon.ico">
        <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
        <!-- build:css styles/vendor.css -->
        <!-- bower:css -->

        <!-- endbower -->
        <!-- endbuild -->
        <!-- build:css(.tmp) styles/main.css -->
        <link rel="stylesheet" href="styles/main.css">
        <!-- endbuild -->

    </head>
    <body>
		<div id="container">
			<div id="header">
				<div id="logo"><i>LOGO</i></div>
				<div id="menu">
					<ul class="ul-menu">
						<a href=""><li class="item">Home</li></a>
						<a href=""><li class="item">About</li></a>
						<a href=""><li class="item">Portfolio</li></a>
						<a href=""><li class="item">Contact</li></a>
					</ul>
				</div>
			</div>
			<div id="main">
				<div id="left-side" class="left">
					<div class="tabs left" style="background-image:url(images/gallery/1.jpg)"></div>
					<div class="tabs right"style="background-image:url(images/gallery/2.jpg)"></div>
					<div class="tabs left" style="background-image:url(images/gallery/3.jpg)"></div>
					<div class="tabs right" style="background-image:url(images/gallery/4.jpg)"></div>
					<div class="tabs left" style="background-image:url(images/gallery/1.jpg)"></div>
					<div class="tabs right" style="background-image:url(images/gallery/2.jpg)"></div>
					<div class="tabs left" style="background-image:url(images/gallery/3.jpg)"></div>
					<div class="tabs right" style="background-image:url(images/gallery/4.jpg)"></div>
					<div class="tabs left" style="background-image:url(images/gallery/1.jpg)"></div>
					<div class="tabs right" style="background-image:url(images/gallery/2.jpg)"></div>
					<div class="clearfix"...

CSS

@import url(http://fonts.googleapis.com/css?family=Special+Elite);
* {
  margin: 0;
  padding: 0;
  border: 0;
  text-decoration: none; }

body {
  background: url("../images/bg.jpg") no-repeat center center fixed;
  background-size: cover;
  font-family: 'Special Elite', cursive;
  font-size: 12px;
  color: #fff; }

.href a:link, .href a:visited, .href a:active {
  color: grey;
  transition: all .2s ease-in; }
.href a:hover {
  color: #fff; }

.clearfix {
  clear: both; }

.left {
  float: left; }

.right {
  float: right; }

#container {
  position: relative;
  width: 100%;
  max-width: 1024px;
  height: auto;
  margin: 0 auto;
  white-space: nowrap; }

#header {
  margin-top: 5px;
  background-color: rgba(8, 8, 8, 0.2);
  border-radius: 5px;
  width: 100%;
  max-height: 250px;
  height: 100%; }

#logo {
  display: inline-block;
  width: 210px;
  height: 150px;
  margin: 20px 26px 20px 20px;
  line-height: 170px;
  font-size: 80px;
  text-align: center; }

#menu {
  overflow: hidden;
  position: absolute;
  display: inline-block;
  max-width: 740px;
  width: 90%;
  height: auto;
  margin-top: 90px;
  font-size: 25px; }
  #menu .ul-menu {
    list-style: none; }
  #menu li.item {
    cursor: pointer;
    display: block;
    float: left;
    width: 20%;
    height: 40px;
    line-height: 45px;
    text-align: center;
    text-transform: uppercase;
    margin-right: 10px;
    margin-left: 10px;
    color: #fff;
    background-color: rgba(8, 8, 8, 0.2);
    border-radius: 4px;
    opacity: 0.4;
    transform: scale(1) rotate(10deg);
    transition: all .5s ease-in; }
  #menu li.item:hover {
    transform: rotate(0deg) scale(1.1);
    opacity: 1;
    background-color: rgba(8, 8, 8, 0.5);
    color: #fff;
    text-shadow: 1px 1px 1px #fff;
    border-radius: 20px; }

#main {
  margin-top: 2px;
  margin-bottom: 2px;
  position: relative;
  width: 100%;
  max-width: 1024px;
  height: auto;
  background-color: rgba(8, 8, 8, 0.2); }

#left-side {
  display:...

JavaScript

'use strict';
$(document).ready(function() {
	$( ".tabs" ).click(function() {
	  var bg = $( this ).css( "background-image" );
	   $('#content').css('background-image', bg);
	});
	    $('.tabs').click(function(e) {
        e.preventDefault();
        $('.tabs').removeClass('active');
        $(this).addClass('active');
    });
});