JSFiddle - React, Tailwind, and code Playground

HTML

<HTML>
<HEAD>
<LINK rel="stylesheet" href="orbit-1.2.3.css">
<LINK rel="stylesheet" href="css/style.css">
<LINK rel="stylesheet" href="demo-style.css">
<SCRIPT type="text/javascript" src="jquery-1.5.1.min.js"></SCRIPT>
<SCRIPT type="text/javascript" src="jquery.orbit-1.2.3.min.js"></SCRIPT>
<SCRIPT type="text/javascript">
            $(window).load(function() {
                $('#featured').orbit();
            });
</SCRIPT>
<STYLE type="text/css">



</STYLE>
</HEAD>
<BODY>
<DIV id="menu">
    <UL id="button">
        <LI><A href="inicio.html">INICIO</A></LI>
        <LI><A href="noticias.html">NOTICIAS</A></LI>
        <LI><A href="trabajos.html">TRABAJOS</A></LI>
        <LI><A href="videos.html">VIDEOS</A></LI>
        <LI><A href="http://www.antilablog.co.nr/" target="_blank">BLOG</A></LI>
        <LI><A href="equipo.html">EQUIPO</A></LI>
        <LI><A href="info.html">INFO</A></LI>
        <LI><A href="contacto.html">CONTACTO</A></LI>
    </UL>
</DIV>
<DIV id="espacio1">
<IMG src="raya.png"/>
<DIV id="icons">
        
        
        
    
        <DIV id="yt">
            <A href="http://www.youtube.com/user/AntilaProductions" target="_blank"><IMG src="minilogos/minilogoyoutube.png"/></A>
        </DIV>
            <DIV id="sc">
            <A href="http://soundcloud.com/antilaproductions" target="_blank"><IMG src="minilogos/minilogosoundcloud.png"/></A>
        </DIV>
        <DIV id="tm">
            <A href="http://antilaproductions.tumblr.com/" target="_blank"><IMG src="minilogos/minilogotumblr.png"/></A>
        </DIV>
        <DIV id="tw">
            <A href="https://twitter.com/Antila_P" target="_blank"><IMG src="minilogos/minilogotwitter.png"/></A>
        </DIV>
        <DIV id="fb">
            <A href="http://www.facebook.com/AntilaProductions" target="_blank"><IMG src="minilogos/minilogofacebook.png"/></A>
        </DIV>
</DIV>
</DIV>
<DIV id="contenedor">

<DIV class="container">
    <div id="featured">

            <a...

CSS

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    margin-left:0;
    margin-right:0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers. */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;

@font-face{

font-family:ostrich-black;
src: url(fuentes/ostrich-black.ttf) format('truetype');

}

body{ 
margin:0;
padding:0;
background-position:center center;
background-repeat:no-repeat;
background-image:url(fondo.png);
-webkit-background-size:100%;
-moz-background-size: 100% 100%;
background-size: 100% 100%;


} 
#button{
padding:0;

text-align: center;
font-family:ostrich-black;
}
#button li{

font-size: 25px;
background: rgba(0, 0, 0, 0.2);

}
#button li a{

float:left;
padding: 10px; 
padding-left:29.85px;
padding-right:29.85px;
color: #FFF;
text-decoration: none; 

}
#contenedor{
margin:0 auto;
width:950px;
vertical-align:top;
height-size:100%;
background: rgba(0, 0, 0, 0.2);


}

#espacio1{
margin:0 auto;
width:950px;
height:150px;
background: rgba(0, 0, 0, 0.2);

}
#fecha{
position:absolute;
margin-top:5px;
}
#espacio2{
height:2%;
width:950px;
background: rgba(0, 0, 0,...

JavaScript

(function($) {

$.fn.orbit = function(options) {

//Defaults to extend options
var defaults = { 
animation: 'horizontal-push', // fade, horizontal-slide, vertical-slide, horizontal-push
animationSpeed: 1200, // how fast animtions are
timer: true, // true or false to have the timer
advanceSpeed: 4000, // if timer is enabled, time between transitions 
pauseOnHover: false, // if you hover pauses the slider
startClockOnMouseOut: false, // if clock should start on MouseOut
startClockOnMouseOutAfter: 1000, // how long after MouseOut should the timer start again
directionalNav: true, // manual advancing directional navs
captions: true, // do you want captions?
captionAnimation: 'fade', // fade, slideOpen, none
captionAnimationSpeed: 600, // if so how quickly should they animate in
bullets: false,     // true or false to activate the bullet navigation
bulletThumbs: false,     // thumbnails for the bullets
bulletThumbLocation: '',     // location from this file where thumbs will be
afterSlideChange: function(){} // empty function 
}; 

//Extend those options
var options = $.extend(defaults, options); 

return this.each(function() {

// ==============
// ! SETUP 
// ==============

//Global Variables
var activeSlide = 0,
numberSlides = 0,
orbitWidth,
orbitHeight,
locked;

//Initialize
var orbit = $(this).addClass('orbit'), 
orbitWrapper = orbit.wrap('<div class="orbit-wrapper" />').parent();
orbit.add(orbitWidth).width('1px').height('1px');

//Collect all slides and set slider size of largest image
var slides = orbit.children('img, a, div');
slides.each(function() {
var _slide = $(this),
_slideWidth = _slide.width(),
_slideHeight = _slide.height();
if(_slideWidth > orbit.width()) {
orbit.add(orbitWrapper).width(_slideWidth);
orbitWidth = orbit.width();    
}
if(_slideHeight > orbit.height()) {
orbit.add(orbitWrapper).height(_slideHeight);
orbitHeight = orbit.height();
}
numberSlides++;
});

//Animation locking functions
function unlock() {
locked = false;
}
function lock()...