JSFiddle - React, Tailwind, and code Playground

by lukerichison

HTML

<p class="head-leaf">Page Heading</p>
<p class="head-block">Subhead</p>
<p class="head-box">Subhead 2</p>
<p class="head-line">lots of text subhead</p>
<p class="head-large">lots of text subhead blah blah do do do</p>
<p class="leaf-break"></p>


<table>
    <tbody>
        <tr>
            <th scope="row">1. inspiration</th>
            <td>Look through our present and past body of work. What are your favorite things we’re doing or have done? Have you been feverishly collecting inspiration on your wedding pinterest board? We’ll probaby want to see that too!</td>
        </tr>
        <tr>
            <th scope="row">2. Contact</th>
            <td>Look through our present and past body of work. What are your favorite things we’re doing or have done? Have you been feverishly collecting inspiration on your wedding pinterest board? We’ll probaby want to see that too!</td>
        </tr>
        <tr>
            <th scope="row">3. finalization</th>
            <td>Look through our present and past body of work. What are your favorite things we’re doing or have done? Have you been feverishly collecting inspiration on your wedding pinterest board? We’ll probaby want to see that too!</td>
        </tr>
        <tr>
            <th scope="row">4. Commitment</th>
            <td>Look through our present and past body of work. What are your favorite things we’re doing or have done? Have you been feverishly collecting inspiration on your wedding pinterest board? We’ll probaby want to see that too!</td>
        </tr>
    </tbody>
</table>

CSS

@import url(http://fonts.googleapis.com/css?family=Arvo:400,400italic);
p.leaf-break {
    width: 100%;
    position: relative;
}
p.leaf-break:before {
    content: url(http://www.lukerichisondesign.com/images/ard/leaf-right.png);
    padding: 0 1em;
    background-color: #FFF;
}
p.leaf-break:after {
    position: absolute;
    content: '';
    left: 0;
    top: 50%;
    margin-top: 1px;
    width: 100%;
    height: 0;
    z-index: -1;
}

p.leaf-break:after,
p.head-box:after,
p.head-line:before,
p.head-line:after {
      border-top: 1px solid;
}

p.leaf-break,
p.head-leaf,
p.head-block,
p.head-box,
p.head-line {
    text-align: center;
}

p.head-leaf,
p.head-block,
p.head-box,
p.head-line,
p.head-large {font-family: 'Arvo', serif; font-size: 2em;}
p.head-large {font-style: italic;}

p.head-leaf:before,
p.head-leaf:after  { padding: 0 0.5em; }
p.head-leaf:before { content: url(http://www.lukerichisondesign.com/images/ard/leaf-left.png);}
p.head-leaf:after  { content: url(http://www.lukerichisondesign.com/images/ard/leaf-right.png);}

p.head-block,
p.head-box {
    background-color: #FFF4E7;
}
p.head-block {
    padding: 18px 0 16px;
}

p.head-box {
    width: 60%;
    margin: 0 auto;
    outline: 1px solid;
    border-top: 2px solid #FFF;
    border-left: 2px solid #FFF;
    padding: 16px 0;
    text-align: center;
    position: relative;
}
p.head-box:before,
p.head-box:after {
    position: absolute;
    content: '';
    z-index: -1;
}
p.head-box:before {
    width: 100%;
    height: 100%;
    bottom: -3px;
    right: -3px;
    padding: 2px 1px 1px 2px;
    background-color: #FFF4E7;
}
p.head-box:after {
    width: 166.666%;
    height: 0;
    top: 50%;
    left: -33.5%;
}

p.head-line {
    display: table;
    white-space: nowrap;
    
}
p.head-line:before,
p.head-line:after {
      content: '';
      display: table-cell;
      position: relative;
      top: 0.5em;
      width: 50%;
}
p.head-line:before { border-right: 2em solid #FFF; }
p.head-line:after {...