JSFiddle - React, Tailwind, and code Playground

by Jimenez Weerden

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/flexslider/2.1/jquery.flexslider-min.js"></script>
<script src="fonts/flexslider-icon.svg#flexslider-icon"></script>
<div class="freehtml ">

<br/>
 
    <!-- <a class="btn-white" href="#">Test button</a> -->


    
<div class="flexslider" style="z-index:0;">
<ul class="slides">
    <li>
    <img src="http://placehold.it/960x495">
    <a class="btn-white-slider2" href="#">Test button</a>
    </li>
    <li>
    <img src="http://placehold.it/960x495">
    <a class="btn-white-slider2" href="#">Test button2</a>
    </li>
    <li>
    <img src="http://placehold.it/960x495">
    <a class="btn-white-slider2" href="#">Test button3</a>
    </li>
</ul>
</div>

</div>

CSS

.content940, .content701 {
}
* {
    font-size: 14px;
    margin: 0;
    padding: 0;
}
p {
    font-size: 14px;
}
img {
    display: block;
}
.center {
    text-align: center;
}
/* indeling rijen */
 .row {
    width: 940px;
    clear: both;
    float: left;
}
.content701 .row {
    width: 701px;
}
.content940 .row {
    width: 940px;
}
.row-last {
    margin-bottom: 0;
}
/* indeling kolommen 701 */
 .content701 {
    width: 701px;
    float: right;
}
.content701 .col1 {
    width: 167px;
    margin-right: 11px;
    float: left;
}
.content701 .col2 {
    width: 345px;
    margin-right: 11px;
    float: left;
}
.content701 .col3 {
    width: 523px;
    margin-right: 11px;
    float: left;
}
.content701 .col4 {
    width: 701px;
    margin-right: 11px;
    float: left;
}
.content701 .col-last {
    margin-right: 0px;
}
/* Offsets */
 .content701 .col-offset1 {
    margin-left: 178px;
}
.content701 .col-offset2 {
    margin-left: 337px;
}
.content701 .col-offset3 {
    margin-left: 516px;
}
/* contentNorm */
 .contentNorm H3 {
    margin: 30px 0;
}
/* indeling kolommen 940 */
 .content940 {
    width: 940px;
}
.content940 .col1 {
    width: 108px;
    margin-right: 11px;
    float: left;
}
.content940 .col2 {
    width: 227px;
    margin-right: 11px;
    float: left;
}
.content940 .col3 {
    width: 340px;
    margin-right: 11px;
    float: left;
}
.content940 .col4 {
    width: 465px;
    margin-right: 11px;
    float: left;
}
.content940 .col6 {
    width: 700px;
    margin-right: 11px;
    float: left;
}
.content940 .col8 {
    width: 940px;
    margin-right: 11px;
    float: left;
}
.content940 .col-last {
    margin-right: 0px;
}
.content940 .col1.col-last {
    width: 107px;
}
.content940 .col2.col-last {
    width: 226px;
}
.content940 .col4.col-last {
    width: 464px;
}
/* Offsets 940 */
 .content940 .col-offset1 {
    margin-left: 119px;
}
.content940 .col-offset2 {
    margin-left: 240px;
}
.content940 .col-offset3 {
    margin-left: 360px;
}
.content940...

JavaScript

$(document).ready(function() {
  $('.flexslider').flexslider({
    animation: "fade",
    initDelay: 8000,
      controlNav: false,
      itemWith: 0,
      useCSS: false,
      itemMargin: 0,
      directionNav:true,
      prevText:'',
      nextText:''
  });
});