JSFiddle - React, Tailwind, and code Playground

by gurkavcu

HTML

<script src="http://rh-dev.us.mytest.com/crown/features/AmericanGrown/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<script src="http://rh-dev.us.mytest.com/crown/features/AmericanGrown/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>American Grown - in dev</title>

    <link rel="stylesheet" type="text/css" href="http://rh-dev.us.mytest.com/crown/features/css/mainstyles.css">
    <link rel="stylesheet" href="css/jquery.ui.all.css">
    
<link rel="stylesheet" type="text/css" href="http://rh-dev.us.mytest.com/crown/features/AmericanGrown/fancybox/jquery.fancybox-1.3.4.css" media="screen">

    <script src="http://jqueryui.com/jquery-1.6.2.js"></script>
    <script src="http://jqueryui.com/ui/jquery.ui.core.js"></script>
    <script src="http://jqueryui.com/ui/jquery.ui.widget.js"></script>
    <script src="http://jqueryui.com/ui/jquery.ui.tabs.js"></script>


<!--[if lte IE 7]>
<meta http-equiv="refresh" content="0; url=http://rh-dev.us.mytest.com/crown/features/AmericanGrown/indexie.html" />
<script type="text/javascript">
/* <![CDATA[ */
window.top.location = 'http://rh-dev.us.mytest.com/crown/features/AmericanGrown/indexie.html';
/* ]]> */
</script>
<![endif]-->



<style>

<!--Inline Styles to override UI theme-->

h1 { font-family: Georgia, Regular; font-size: 30px; color: #8E4925; }
h2 { font-family: Georgia, Regular; font-size: 20px; color: #000; line-height: 30px;}
p { font-family: Georgia, Regular; font-size: 16px; color: #000; padding: 4px; line-height: 25px;}

p.buyhead { font-family: Georgia, Regular; font-size: 18px; color: #000; padding: 4px; line-height: 25px; font-weight: bold;}

.ui-tabs .ui-tabs-nav {
margin:0;
}

.ui-widget-header {
border:1px solid #AAAAAA;
color:#222222;
font-weight:bold;
}

.ui-tabs .ui-tabs-nav li {
border-bottom:0 none !important;
float:left;
list-style:none outside none;
margin:0 2.2em 1px...

JavaScript

$(document).ready(function() {
                        /*
                        *   Examples - various
                        */
                    
                       $( "#tabs" ).tabs({
            ajaxOptions: {
                error: function( xhr, status, index, anchor ) {
                    $( anchor.hash ).html(
                        "Couldn't load this tab. We'll try to fix this as soon as possible. " +
                        "If this wouldn't be a demo." );
                }
            }
        });

                          $("#various7").fancybox({
                                'width'                         : '95%',
                                'height'                        : '95%',
                                'autoScale'                     : false,
                                'transitionIn'          : 'none',
                                'transitionOut'         : 'none',
                                'type'                          : 'iframe'
                        });

                });