JSFiddle - React, Tailwind, and code Playground

by Jessica St. Peter

HTML

<div id="wrapper">
    
<h1>Organizational Chart</h1>

    <p>People and Families using services</p>
    <p>Membership</p>
    <p>Board of Directors</p>
    <div class="organization">
        	<h2>Board of Directors</h2>

        <ul id="board-of-directors">
            <li>	<a href="javascript:void(0)"><span class="chart-title">Executive Director</span> Maureen Brown</a>

                <ul id="organization-chart">
                    <li class="parent">	<a href="javascript:void(0)"><span class="chart-title">Administrative Support Person</span> Pam Copeland</a>

                    </li>
                    <li class="parent">	<a href="javascript:void(0)"><span class="chart-title">Manager of Quality Assurance</span> Michelle Della Ventura</a>

                    </li>
                    <li class="parent">	<a href="javascript:void(0)"><span class="chart-title">Manager of Community & Family Support</span> Sandy Leemet</a>

                        <ul>
                            <li class="child">	<a href="javascript:void(0)"><span class="chart-title">Family Support Case Managers</span></a>

                            </li>
                            <li class="child">	<a href="javascript:void(0)"><span class="chart-title">Inclusion Facilitators</span></a>

                            </li>
                        </ul>
                    </li>
                    <li class="parent">	<a href="javascript:void(0)"><span class="chart-title">Manager of Community Development</span> Margaret Fidler</a>

                        <ul>
                            <li class="child">	<a href="javascript:void(0)"><span class="chart-title">Volunteers</span></a>

                            </li>
                        </ul>
                    </li>
                    <li class="parent">	<a href="javascript:void(0)"><span class="chart-title">Residential Manager</span> Sandy Miscolkzi</a>

                        <ul>
                            <li class="child">	<a...

CSS

* {
    margin:0;
    padding:0;
    line-height:1.5em;
    font-family: Helvetica, Arial, sans-serif;
    font-size:14px;
}
#wrapper {
    margin-left:20px;
}
h1, h2, h3, h4, h5, h6 {
    margin: 15px 0px;
    font-weight:normal;
    color:#0099CC;
    font-family: Helvetica, Arial, sans-serif;
    line-height:1.4em;
}
h1 {
    font-size:32px;
}
h2 {
    font-size: 28px;
}
.chart-title {
    color: #09C;
    font-weight:bold;
}
.organization {
    font-family: arial, sans-serif;
    color:black;
    font-size: 14px;
    text-indent:0px !important;
    white-space: nowrap;
    overflow: hidden;
    position: relative;
}
#board-of-directors {
    margin-left:0px;
}
ul#organization-chart {
    list-style: none;
    float:left;
    border-left:1px solid #CCC;
    ;
    margin-left:30px;
    margin-top:2px;
}
.organization ul li {
    margin: 10px 0px 10px 0px;
    display:block;
    float:none;
    vertical-align: top;
    padding: 10px 20px;
}
li.parent {
    margin-left:20px !important;
}
li.parent::before {
    content:"";
    width:42px;
    height:100%;
    border-top:1px solid #CCC;
    position:absolute;
    margin-top:10px;
    left:50px;
}
/* Remove vertical connector from last element in chart */
 li.parent:last-child::before {
    border-left:1px solid white !important;
}
li.child {
    margin-left:42px !important;
}
li.child::before {
    content:"";
    width:32px;
    height:30px;
    border-bottom:1px solid #CCC;
    border-left:1px solid #CCC;
    position:absolute;
    margin-top:-18px;
    left:120px;
}
li.child:nth-child(n+2) {
    margin-top:-10px;
}
li.child:nth-child(n+2):before {
    height:60px;
    margin-top:-50px;
}
.organization a {
    text-decoration:none !important;
    color:black !important;
    padding:5px 10px;
    border-radius: 5px;
    border:1px solid #ccc;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
}
.organization li a:hover, .organization li a:hover+ul li a {
    background:...