JSFiddle - React, Tailwind, and code Playground

by Nivaldo

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>

CSS

.node image{
          border-color: 2px solid orange;
           border-radius: 25px;
        }

        .node text { font: 12px sans-serif; }

        .link {
           fill: none;
           stroke: #fff;
           stroke-width: 3px;
        }

        #wrap{
        background:#ddd;
        }

      .g-hover-card {
        position: absolute;  
        text-align: center;
        background-color: #fff;
      }

      .g-hover-card img {
        width: 280px;
        height: 135px;
      }

      .g-hover-card .user-avatar {
        position: relative;
        top: -40px;
        margin-bottom: -40px;
      }

      .g-hover-card .user-avatar img {
        width: 80px;
        height: 80px;
        max-width: 80px;
        max-height: 80px;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
      }

      .g-hover-card .info {
        padding: 4px 8px 10px;
      }

      .g-hover-card  .info.title {
        margin-bottom: 4px;
        font-size: 24px;
        line-height: 1;
        color: #262626;
        vertical-align: middle;
      }

      .g-hover-card  .info.descriptions {
        font-family: 'Lato', sans-serif;
        overflow: hidden;
        font-size: 12px;
        line-height: 20px;
        color: #737373;
        text-overflow: ellipsis;
      }

      .g-hover-card .bottom {
        padding: 0 20px;
        margin-bottom: 17px;
      }

      .g-hover-card .bottom a{
        cursor: pointer;
        font-family: 'Satisfy', serif;
        color: #FD6A62;
        font-size: 1.5em;
        font-weight: 200;
        padding: 1px 1px 1px 1px;

      }
      .g-hover-card .bottom a:hover{
        background: #8AC9F4;
      }


      .g-hover-card{
        width: 280px;
        padding-top: 0;
        overflow: hidden;
      }

JavaScript

var data = [
    {
        "name": "Shell Sy",
        "parent": "null",
        "img": "http:\/\/graph.facebook.com\/100005920489027\/picture",
    },
     {
        "name": "Zaraki Kenpachi",
        "parent": "Shell Sy",
        "img": "http:\/\/graph.facebook.com\/100003691011204\/picture",
         "level":"yellow"
    },
     {
        "name": "Zaraki Kenpachi",
        "parent": "Shell Sy",
        "img": "http:\/\/graph.facebook.com\/100003691011204\/picture",
         "level":"yellow"
    },
     {
        "name": "Zaraki Kenpachi",
        "parent": "Shell Sy",
        "img": "http:\/\/graph.facebook.com\/100003691011204\/picture",
         "level":"yellow"
    },
     {
        "name": "Zaraki Kenpachi",
        "parent": "Shell Sy",
        "img": "http:\/\/graph.facebook.com\/100003691011204\/picture",
         "level":"yellow"
    },
     {
        "name": "Zaraki Kenpachi",
        "parent": "Shell Sy",
        "img": "http:\/\/graph.facebook.com\/100003691011204\/picture",
         "level":"yellow",
         "children": [
             {
                "name": "Zaraki Kenpachi",
                "parent": "Shell Sy",
                "img": "http:\/\/graph.facebook.com\/100003691011204\/picture",
                 "level":"yellow"
            },
             {
                "name": "Zaraki Kenpachi",
                "parent": "Shell Sy",
                "img": "http:\/\/graph.facebook.com\/100003691011204\/picture",
                 "level":"yellow"
            },
             {
                "name": "Zaraki Kenpachi",
                "parent": "Shell Sy",
                "img": "http:\/\/graph.facebook.com\/100003691011204\/picture",
                 "level":"yellow"
            }
         ]
    },
     {
        "name": "Zaraki Kenpachi",
        "parent": "Shell Sy",
        "img": "http:\/\/graph.facebook.com\/100003691011204\/picture",
         "level":"yellow"
    },
     {
        "name": "Zaraki Kenpachi",
        "parent": "Shell Sy",
  ...