JSFiddle - React, Tailwind, and code Playground

by pleymo

HTML

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<section class="container">

<script>
    
    /**
* JQuery Plugin for a modal box
* Will create a simple modal box with all HTML and styling
*
* Author: Paul Underwood
* URL: http://www.paulund.co.uk
*
* Available for free download from http://www.paulund.co.uk
*/
(function($){
// Defining our jQuery plugin
$.fn.paulund_modal_box = function(prop){
// Default parameters
var options = $.extend({
height : "250",
width : "500",
title:"JQuery Modal Box Demo",
description: "Example of how to create a modal box.",
top: "20%",
left: "30%",
},prop);
//Click event on element
return this.click(function(e){
add_block_page();
add_popup_box();
add_styles();
$('.paulund_modal_box').fadeIn();
});
/**
* Add styles to the html markup
*/
function add_styles(){
$('.paulund_modal_box').css({
'position':'absolute',
'left':options.left,
'top':options.top,
'display':'none',
'height': options.height + 'px',
'width': options.width + 'px',
'border':'1px solid #fff',
'box-shadow': '0px 2px 7px #292929',
'-moz-box-shadow': '0px 2px 7px #292929',
'-webkit-box-shadow': '0px 2px 7px #292929',
'border-radius':'10px',
'-moz-border-radius':'10px',
'-webkit-border-radius':'10px',
'background': '#f2f2f2',
'z-index':'50',
});
$('.paulund_modal_close').css({
'position':'relative',
'top':'-25px',
'left':'20px',
'float':'right',
'display':'block',
'height':'50px',
'width':'50px',
'background': 'url(images/close.png) no-repeat',
});
/*Block page overlay*/
var pageHeight = $(window).height();
var pageWidth = $(window).width();
$('.paulund_block_page').css({
'position':'absolute',
'top':'0',
'left':'0',
'background-color':'rgba(0,0,0,0.6)',
'height':pageHeight,
'width':pageWidth,
'z-index':'10'
});
$('.paulund_inner_modal_box').css({
'background-color':'#fff',
'height':(options.height - 50) + 'px',
'width':(options.width - 50) +...

CSS

body {
    background: none repeat scroll 0 0 #EEEEEE;
    color: #888888;
    font-family: 'Droid Sans',sans-serif;
    font-size: 72.5%;
    margin: 0;
    padding: 0;
}
h1, h1 a, h1 a:hover {
    color: #FFFFFF;
    font-family: Arial;
    margin: 10px;
}
article h1, article h1 a, article h1 a:hover, h2, h3, h4, h5, h6 {
    color: #444444;
    font-family: 'PT Sans Narrow',Calibri,'Myriad Pro',Tahoma,Arial;
    line-height: 1.1em;
    margin: 0;
    padding: 10px 0;
}
article h1, article h1 a, h2 {
    font-size: 30px;
    letter-spacing: -1px;
}
h3 {
    font-size: 30px;
}
h4 {
    font-size: 22px;
    font-weight: normal;
    padding-bottom: 10px;
}
h5 {
    font-size: 14px;
}
h6 {
}
a {
    color: #3366CC;
    font-size: 105%;
    font-weight: normal;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
p {
    font-size: 115%;
}
.aligncenter {
    clear: both;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.no_list {
    list-style: none outside none;
}
.no_list li {
    margin: 0;
    padding: 0;
}
input.text[type="text"] {
    padding: 6px;
    position: relative;
    top: -4px;
}
.button, .read_more, input[type="button"], input[type="submit"] {
    background: none repeat scroll 0 0 #F5F5F5;
    border: 1px solid #888888;
    color: #444444;
    font-weight: bold;
    padding: 6px 10px;
    text-decoration: none;
}
.button:hover, .read_more:hover, input[type="button"]:hover, input[type="submit"]:hover {
    border: 1px solid #3366CC;
    color: #444444;
}
.read_more {
    float: right;
    margin: 10px 0;
}
header {
    background: none repeat scroll 0 0 #111111;
    height: 40px;
    width: 100%;
}
footer {
    background: none repeat scroll 0 0 #2D2D2D;
    height: 50px;
    padding: 5px 0;
    width: 100%;
}
header ul {
    list-style: none outside none;
}
header li a {
    color: #FFFFFF;
    float: right;
    font-size: 14px;
    font-weight: bold;
    line-height: 14px;
    padding: 10px 5px;
    width:...