JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
    <head>
     
    <title>PM Portfolio</title>
    <link rel="stylesheet" href="styles.css">
    
    <link type='text/css' rel='Stylesheet' href='bjqs-imageslidermaker.css' />
<link href='//fonts.googleapis.com/css?family=Open+Sans:400|PT+Sans+Narrow:400' rel='stylesheet' type='text/css'>
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
<script src='bjqs-1.3-imageslidermaker.js'></script>
<script>
   $(function() {
     $('#imageslider').bjqs({
       width: 1000,
       height: 500,
       animtype: 'slide',
       responsive: false,
       automatic: true,
       keyboardnav: false,
       markertype: '_',
       prevtext: '<',
       nexttext: '>'
     });
   });
</script>

    
    
        
    
    <img id="photo1" src="gfx/monogram_logo" alt="monogram"/>
        
    <div id="header"> 
    
    
    
    
    <body>
        
                    <div id="header2">       
            
                  <ul>
                        <li><a href="#part2">ABOUT</a></li>
                        <li><a href="#tickets">PORTFOLIO</a></li>
                        <li><a href="#part4">RESUME</a></li>
                        <li><a href="#part5">CONTACT</a></li>
                    </ul>
        
    </div></div>
            
    </head>             
        
              <div id="content">
              
<div id='imageslider'>
  <ul class='bjqs'>
    <li class='slide-1'>
      <div class='caption'><a href="BLANK">LOGOS &amp; PACKAGING</a></div>
    </li>
    <li class='slide-2'>
      <div class='caption'><a href="BLANK">ILLUSTRATION &amp; SKETCHES</a></div>
    </li>
    <li class='slide-3'>
      <div class='caption'><a href="BLANK">ANIMATION</a></div>
    </li>
    <li class='slide-4'>
      <div class='caption'><a href="BLANK">ADVERTISING</a></div>
    </li>
    <li class='slide-5'>
      <div class='caption'><a href="BLANK">DIGITAL 3D</a></div> 
    </li>
    <li class='slide-6'>
      <div...

CSS

body {
    margin:0;
    font-family: avenir, sans-serif;
    background-image: url(gfx/greystripes_bg.gif);
    background-repeat: no-repeat;
    background-position: fixed top;
    background-size:cover;
    background-color: black;
    width:1000px;
    height:800px;
    margin-left: auto;
    margin-right: auto;
   

}


ul {
    
    list-style-type:none;
    margin-left:auto;
    margin-right:auto;
    margin-top: 15px;
    text-align: center;
    padding-top: 6px;
   
}

li {
    display:inline;
    font-size:10px;
    border-style: solid;
    border-color: rgba(255,255, 255, 0); 
    border-left: 0px;
    border-right:0px;
    border-top: 0px;
    letter-spacing: 5px;
    color:#1a3046; 
    
    
}


li a {
    color: #ffffff;
    text-decoration: none;
    text-shadow:#000000;
    border-style: solid;
    border-color: rgba(255,255, 255, 0);
    border-left: 0px;
    border-right:0px;
    border-bottom: 0px;
    
    padding:7px 10px 10px 10px;
}

li a:hover {

    border-color: #dd3f22;
    border-width: 5px;
    background-color: rgba(255,255,255, 0);
    transition: .5s;
    
}


#header {
    width:auto;
    height:5px;
    background-color: rgba(100,100,100, 1);
    margin-top:30px;
    
}

#header2 {
    width:1000px;
    height:10px;
    margin: auto;
    background-color: rgba(255, 255, 255, 0);
    margin-top:-20px;
    
    
 
    
}

#content{
    width:1000px;
    height:550px;
    margin-top:40px;

    

 
}

#photo1{
margin-left:475px;
width:50px;
margin-top:30px;

    

}


#footer {
    width:1000px;
    
    background-image:url(footer_wave.png);
    background-repeat: no-repeat;
    text-align: center;
    margin-top:15px;
    font-size: 12px;
    color: #ffffff;
    letter-spacing: 2px;
    
}

p {
    width:auto;
    margin-right:auto;
    margin-left:auto;
    
    text-align:justify;
    margin-bottom:0px;
    

}


/*SLIDERS*/

#imageslider {
  width: 1000px;
  max-width: 1000px;
  height: 500px;
  border-radius: 3px;
 ...

JavaScript

;(function($) {

    "use strict";

    $.fn.bjqs = function(o) {
        
        // slider default settings
        var defaults        = {

            // w + h to enforce consistency
            width           : 700,
            height          : 300,

            // transition valuess
            animtype        : 'fade',
            animduration    : 450,      // length of transition
            animspeed       : 4000,     // delay between transitions
            automatic       : true,     // enable/disable automatic slide rotation

            // control and marker configuration
            showcontrols    : true,     // enable/disable next + previous UI elements
            centercontrols  : true,     // vertically center controls
            nexttext        : 'Next',   // text/html inside next UI element
            prevtext        : 'Prev',   // text/html inside previous UI element
            showmarkers     : true,     // enable/disable individual slide UI markers
            centermarkers   : true,     // horizontally center markers

            // interaction values
            keyboardnav     : true,     // enable/disable keyboard navigation
            hoverpause      : true,     // enable/disable pause slides on hover

            // presentational options
            usecaptions     : true,     // enable/disable captions using img title attribute
            randomstart     : false,    // start from a random slide
            responsive      : false,    // enable responsive behaviour

            // ***Addition*** to support marker type
            markertype      : '1'       // '1'|'01'|'i'|'I'|'a'|'A'|'_'

        };

        // create settings from defauls and user options
        var settings        = $.extend({}, defaults, o);

        // slider elements
        var $wrapper        = this,
            $slider         = $wrapper.find('ul.bjqs'),
            $slides         = $slider.children('li'),

            // control elements
        ...