JSFiddle - React, Tailwind, and code Playground

by basmaat

HTML

<script src="http://jsplumb.googlecode.com/files/jquery.jsPlumb-1.3.2-all-min.js"></script>
<!DOCTYPE html>
<html>
  <head>
    <title>Multi-Line Button</title>
    <link href='multi-line-button.css' rel='stylesheet' />
      
  </head>
  <body>
    <p>
      The buttons below look amazing on Firefox and Safari and decent on Internet Explorer 6-8.
    </p>
    <p>
      <span id='flow3'>  
      <a id='flow1' class='multi-line-button' href='#' style='width:14em'>
        <span class='title'>Start Free Trial</span>
        <span class='subtitle'>30-days free! Signup in 60 seconds</span>
      </a>
      </span> 
    </p>
    <p>
      <span id='flow4'>  
      <a id='flow2' class='multi-line-button green' href='#' style='width:14em'>
        <span class='title'>Start Free Trial</span>
        <span class='subtitle'>30-days free! Signup in 60 seconds</span>
      </a>
        </span>
    </p>
    <p>
      <a class='multi-line-button red' href='#' style='width:14em'>
        <span class='title'>Start Free Trial</span>
        <span class='subtitle'>30-days free! Signup in 60 seconds</span>
      </a>
    </p>
    <p>
      <a class='multi-line-button orange' href='#' style='width:14em'>
        <span class='title'>Start Free Trial</span>
        <span class='subtitle'>30-days free! Signup in 60 seconds</span>
      </a>
    </p>
  </body>
</html>

CSS

/* line 14, ../../../.rvm/gems/ruby-1.8.7-p302/gems/compass-0.10.5/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-size: 100%;
  font-family: inherit;
  vertical-align: baseline;
}

/* line 17, ../../../.rvm/gems/ruby-1.8.7-p302/gems/compass-0.10.5/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
body {
  line-height: 1;
  color: black;
  background: white;
}

/* line 19, ../../../.rvm/gems/ruby-1.8.7-p302/gems/compass-0.10.5/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
ol, ul {
  list-style: none;
}

/* line 21, ../../../.rvm/gems/ruby-1.8.7-p302/gems/compass-0.10.5/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
table {
  border-collapse: separate;
  border-spacing: 0;
  vertical-align: middle;
}

/* line 23, ../../../.rvm/gems/ruby-1.8.7-p302/gems/compass-0.10.5/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

/* line 25, ../../../.rvm/gems/ruby-1.8.7-p302/gems/compass-0.10.5/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
q, blockquote {
  quotes: "" "";
}
/* line 96, ../../../.rvm/gems/ruby-1.8.7-p302/gems/compass-0.10.5/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
q:before, q:after, blockquote:before, blockquote:after {
  content: "";
}

/* line 27, ../../../.rvm/gems/ruby-1.8.7-p302/gems/compass-0.10.5/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
a img {
  border: none;
}

/* line 6, multi-line-button.sass...

JavaScript

jsPlumb.connect({source: $('#flow3'), target: $("#flow4"), 
                 endpoint:"Rectangle",
                 connector:"Flowchart",
                 anchors:["Center", "Center"]
                 });