JSFiddle - React, Tailwind, and code Playground

by Chase Wilson

CSS

.dialog-wrapper {position:absolute; top:80px; font-family: "lucida grande",tahoma,verdana,arial,sans-serif; font-size: 11px; line-height: 1.28; color: #333; z-index: 1000;}
.dialog-wrapper .dialog-background {position: absolute; top: 0; left: 0;  background-color: rgb(82, 82, 82); opacity: 0.7; -moz-border-radius: 10px; border-radius: 8px;}
.dialog-wrapper .dialog-inner {position: relative; top: 0; left: 0; padding: 10px;}

.dialog-wrapper .dialog-inner .dialog-title {margin: 0; padding: 5px 10px; font-size: 14px; font-weight: bold; color: #fff; background: #6D84B4; border: 1px solid #3B5998; border-bottom: none; }

.dialog-wrapper .dialog-inner .dialog-body {border: 1px solid #555; position: relative;background: #fff;}

.dialog-wrapper .dialog-inner .dialog-footer {position:absolute; width: 100%; bottom: 0px;background: #f2f2f2; border-top:1px #e6e6e6 solid;}
.dialog-wrapper .dialog-inner .dialog-footer .action-links {list-style: none; margin: 0; padding: 8px 10px; text-align: right;}
.dialog-wrapper .dialog-inner .dialog-footer .action-links li {display: inline-block; margin: 0; padding: 0;}
.dialog-wrapper .dialog-inner .dialog-footer .action-links li a {display: block; padding: 0;  margin-left: 4px; font-size: 13px; line-height: normal; vertical-align: top; font-weight: bold; text-decoration: none; border: 1px solid #999;}
.dialog-wrapper .dialog-footer .action-links li a  span {padding: 2px 6px 4px; display: block; color: #333; text-shadow: 0px 1px 1px #fff; border-top: 1px #fff solid; background: #eee;}
.dialog-wrapper .inputbox, .dialog-wrapper textarea { padding: 3px; font-size: 11px; border: 1px solid #BDC7D8;}
.dialog-wrapper .dialog-footer .action-links li.blue a {border-color: #29447E #29447E #1A356E; }
.dialog-wrapper .dialog-footer .action-links li.blue a span {color: #fff; border-top-color: #86a1c2; background-color: #5B74A8; text-shadow: none;}

JavaScript

(function(doc,win,j){
  var extend = function(original){
        var  i =  1
            ,l = arguments.length
            ,key ,extend;
        
        for (; i < l; i++){
          extended = arguments[i] || {};
          for (key in extended){
            original[key] = extended[key];
          }
        }
        return original;
      };
  
  
  var Dialog = win.Dialog = function(options){
    this.initialize(options)
  };
  
  Dialog.create = function(options){
    return new Dialog(options);
  };
  
  Dialog.prototype = {
    options: {
       height: 100
      ,width: 100
      ,modal: false
      ,title: null
      ,actions: null
    }
    ,initialize: function(options){
      extend(this.options, options);
      this.createContainer();
    }
    
    ,createContainer: function(){
      var  options = this.options;
      
      var  container = this.container = doc.createElement('div')
          ,$container = this.$container = j(container);
      $container.addClass('dialog-wrapper');
      if(options.class) $container.addClass(options.class);
      
      var  dialogInner = doc.createElement('div')
          ,$dialogInner = j(dialogInner);
      $dialogInner.addClass('dialog-inner');
      
      var  background = doc.createElement('div')
          ,$background = j(background).addClass('dialog-background');
      $background.css({'height':options.height,'width':options.width});
      
      if(options.title){
        this._buildTitle();
      }
      
      if(options.actions){
        this._buildFooter();
      }
      
      container.appendChild(background);
      container.appendChild(dialogInner);
      
    }
    
    ,_buildTitle: function(){
      var  title = this.title = doc.createElement('div')
          ,$title = this.$title = j(title);
      $title.addClass('dialog-title');
      
      return title;
    }
    
    ,_buildFooter: function(){
      var  footer = this.footer = doc.createElement('div')
          ,$footer = this.$footer =...