JSFiddle - React, Tailwind, and code Playground

by Gereltod Gotsbayar

HTML

<script src="http://www.ericmmartin.com/wordpress/wp-content/plugins/simplemodal-login/js/jquery.simplemodal.js"></script>
<div style="width: 800px; margin: 20px auto; text-align: justify">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In bibendum sagittis nunc sit amet ultrices. Nam bibendum felis id sem iaculis non pellentesque turpis cursus. Vestibulum ullamcorper nisi sit amet urna semper ac tincidunt velit faucibus. Nullam vel risus in diam ullamcorper tempor ac id turpis. Ut rhoncus nibh vel felis tristique laoreet. Vestibulum ac magna nisl. Aenean vulputate, ligula eu mollis varius, metus dui egestas massa, ac vehicula libero felis id elit. Cras eros justo, sollicitudin in congue id, adipiscing et tortor. Integer in dolor at odio venenatis dapibus quis a nulla. Pellentesque eget magna risus, ac aliquam ligula. Integer sollicitudin pellentesque nisi non rhoncus. Nunc id tortor magna. Duis id lacus ipsum. Nullam nec vehicula sem. Aenean nisl dui, vulputate id convallis in, tincidunt et lectus. Sed malesuada accumsan luctus.
    
    Proin a cursus ante. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam ultricies neque eu ante mattis sed mollis mi pellentesque. Suspendisse ultricies risus sed nisl luctus a scelerisque mauris condimentum. Aliquam ullamcorper lobortis nibh, id vestibulum sapien eleifend vel. Nam viverra lectus vestibulum mi lacinia fringilla. Vestibulum adipiscing vehicula ullamcorper. Aliquam tincidunt est sed arcu faucibus auctor. Vestibulum ut erat sed tellus rhoncus luctus sit amet a magna. Donec ligula ipsum, commodo sit amet aliquet elementum, facilisis nec augue. Proin volutpat, eros et vehicula porttitor, velit mauris interdum magna, vulputate pulvinar eros nulla nec purus. Sed consectetur turpis ut diam venenatis vel euismod turpis dapibus. Donec non est at nibh sollicitudin fringilla sit amet sed justo. Cras non neque purus, eget sollicitudin augue. Ut ac ligula nulla.
    
   ...

CSS

/* Infotext Bold */
@font-face {
    font-family: 'Infotext Semibold Roman';
    src: url('fonts/InfoText-Bold.otf'); /* IE */
    /* src: local('Infotext Semibold Roman'),url('fonts/InfoText-Bold.ttf'), format('truetype');*/ /* non-IE */
}

/* Calibri */
@font-face {
    font-family: Calibri;
    src: url("fonts/ed016df2-7c1e-4e9a-98fb-2b544232a25b-2.eot");
    src: local("Calibri"), url("fonts/ed016df2-7c1e-4e9a-98fb-2b544232a25b-3.woff") format("woff"), url("fonts/ed016df2-7c1e-4e9a-98fb-2b544232a25b-1.ttf") format("truetype"), url("fonts/ed016df2-7c1e-4e9a-98fb-2b544232a25b-4.svg#web") format("svg");
    font-style: normal;
    font-weight: normal;
}

/* Calibri Bold */
@font-face {
    font-family: Calibri;
    src: url("fonts/48f6f215-90a0-448b-a3db-ed042351ca68-2.eot");
    src: local("Calibri Bold"), url("fonts/48f6f215-90a0-448b-a3db-ed042351ca68-3.woff") format("woff"), url("fonts/48f6f215-90a0-448b-a3db-ed042351ca68-1.ttf") format("truetype");
    font-style: normal;
    font-weight: bold;
}

a.button {color: #f00}
a.button:hover {cursor: pointer}

#modal {width: 1008px; margin: 0px auto; text-align: left;}
#modal-title-bar {width: 1008px; height: 70px; background: url('../images/modal-title-bar.png') top left no-repeat; position: relative;}
#modal-title-name {font: normal 24px 'Infotext Semibold Roman'; color: #fff; position: absolute; top: 15px; left: 20px;}
#modal-title-link {position: absolute; right: 20px; top: 25px;}
#modal-title-link a {font: normal 16px Calibri; color: #a6a6a6;}
#modal-container {margin: 0px 9px; width: 930px; padding: 10px 30px; background-color: #fff; font: italic 14px Calibri; color: #999999;}
#modal-comment {font-size: 18px; margin-bottom: 20px;}
#modal-col1 {float: left; width: 60px; display: inline;}
#modal-col2 {float: left; width: 520px; padding-left: 20px; display: inline;}
#modal-col3 {float: left; width: 330px; display: inline;}
#modal-container h2 {font: normal 24px 'Infotext Semibold Roman'; color: #444; margin:...

JavaScript

$("document").ready(function() {
    function isValidEmailAddress(emailAddress) {
        var pattern = new RegExp(/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i);
        return pattern.test(emailAddress);
    }
    $("#modal").modal({
        onOpen: function(dialog) {
            dialog.overlay.fadeIn('slow', function() {
                dialog.data.hide();
                dialog.container.fadeIn('slow', function() {
                    dialog.data.slideDown('slow');
                });
            });
        },
        opacity: 80,
        overlayCss: {
            backgroundColor: "#000"
        },
        minHeight: 570,
        minWidth: 730,
        escClose: false
    });
    $("#modal-already a").click(function() {
        $.modal.close();
        $("#modal").hide();
    });
    $("#modal-email").click(function() {
        $(this).val('');
    })
    $("#modal-submit").click(function() {
        if(!isValidEmailAddress($("#modal-email").val())) {
            $("#modal-email").val('put valid email here');
        };
    });
});