JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<!doctype html>
<html lang="en">
  <head>
  <meta charset="utf-8" />
<meta name="Keywords" content=" fullscreen background slideshow by kougiland.com" />
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8" />
<!--[if ie]><meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, IE=8, IE=9, chrome=1"/><![endif]-->
<meta name="Description" content="rethinking the future of web design" />
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no"><!--Prevent mobile browsers from handling zoom gesture -->
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
      <link href='http://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'>
<link href="http://fonts.googleapis.com/css?family=Megrim" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet" type="text/css">
      <link href="http://fonts.googleapis.com/css?family=Dosis:200,400,700" rel="stylesheet" type="text/css">
</head>
<style media="screen">
/*
Theme Name: kougi-flex(oneWeb)
Theme URI: https://kougiland.com/
    
    
Description: 2013 HTML5 Responsive One Page Template  .
Author: kougi tambo
Author URI: kougiland.com
Version: 1.0
Tags: brillante, css3, blue, two-column, fixed-width, html5, flex
*/


html,
body,
div,
span,
object,
iframe,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video                                   {
padding: 0;
margin: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
zoom:1;
}
html,...

JavaScript

<!-- slider nav for gallery -->
                    
$('.galleryNavLeft').each(
    function(){
        $(this).bind (
            "click",
            function(event){
            var pos = $(this).position();
                if (pos.left =< 0) {
                $('ul.ulnavGallery').animate(
                    {left:"-=100%"}, {
                        duration:'fast',
                        easing:'easeInSine'
                });
                }
            }
        );
    }
);

$('.galleryNavRight').each(
    function(){
        $(this).bind (
            "click",
            function(event){
            var pos = $(this).position();
                if (pos.left > 0) {
                $('ul.ulnavGallery').animate(
                    {left:"+=100%"}, {
                        duration:'fast',
                        easing:'easeInSine'
                });
                }
            }
        );
    }
);
 what you re going to master 
     
     
EXCEPTIONAL HTML/CSS SKILLS.
Either great HTML, CSS, JavaScript experience with some back end coding, or lots of backend programming experience with some HTML, CSS, and JavaScript experience.

2A TASTE FOR JAVASCRIPT.
You have experience with JavaScript and are ready to master it.

3UI & UX SKILLS.
We don't silo here, so you'll be working with designers on creative problem solving as a team.

4LOVE FOR THE OPEN WEB.
You have a desire to leverage your skills to make websites work terrifically across many devices, and even for users with accessibility concerns.

5FOREVER CURIOUS.
Our client projects vary, so you'll never be strapped with a project in which you aren't going to learn and leverage new skills.