CSS Family Tree
Convert this html css code for react js <!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF 8"> <link rel="apple touch icon" type="image/png" href="https://cpwebassets.codepen.io/assets/favicon/apple touch icon 5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png" /> <meta name="apple mobile web app title" content="CodePen"> <link rel="shortcut icon" type="image/x icon" href="https://cpwebassets.codepen.io/assets/favicon/favicon aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico" /> <link rel="mask icon" type="image/x icon" href="https://cpwebassets.codepen.io/assets/favicon/logo pin b4b4269c16397ad2f0f7a01bcdf513a1994f4c94b8af2f191c09eb0d601762b1.svg" color="#111" /> <title>CSS Family Tree</title> <link rel="canonical" href="https://codepen.io/Pestov/pen/AvQmxv"> <style> /*Now the CSS*/ * {margin: 0; padding: 0;} .tree ul { padding top: 20px; position: relative; transition: all 0.5s; webkit transition: all 0.5s; moz transition: all 0.5s; } .tree li { float: left; text align: center; list style type: none; position: relative; padding: 20px 5px 0 5px; transition: all 0.5s; webkit transition: all 0.5s; moz transition: all 0.5s; } /*We will use ::before and ::after to draw the connectors*/ .tree li::before, .tree li::after{ content: ''; position: absolute; top: 0; right: 50%; border top: 1px solid #ccc; width: 50%; height: 20px; } .tree li::after{ right: auto; left: 50%; border left: 1px solid #ccc; } /*We need to remove left right connectors from elements without any siblings*/ .tree li:only child::after, .tree li:only child::before { display: none; } /*Remove space from the top of single children*/ .tree li:only child{ padding top: 0;} /*Remove left connector from first child and right connector from last child*/ .tree li:first child::before, .tree li:last child::after{ border: 0 none; } /*Adding back the vertical connector to the last nodes*/ .tree li:last child::before{ border right: 1px solid #ccc; border radius: 0 5px 0 0; webkit border radius: 0 5px 0 0; moz border radius: 0 5px 0 0; } .tree li:first child::after{ border radius: 5px 0 0 0; webkit border radius: 5px 0 0 0; moz border radius: 5px 0 0 0; } /*Time to add downward connectors from parents*/ .tree ul ul::before{ content: ''; position: absolute; top: 0; left: 50%; border left: 1px solid #ccc; width: 0; height: 20px; } .tree li a{ border: 1px solid #ccc; padding: 5px 10px; text decoration: none; color: #666; font family: arial, verdana, tahoma; font size: 11px; display: inline block; border radius: 5px; webkit border radius: 5px; moz border radius: 5px; transition: all 0.5s; webkit transition: all 0.5s; moz transition: all 0.5s; } /*Time for some hover effects*/ /*We will apply the hover effect the the lineage of the element also*/ .tree li a:hover, .tree li a:hover+ul li a { background: #c8e4f8; color: #000; border: 1px solid #94a0b4; } /*Connector styles on hover*/ .tree li a:hover+ul li::after, .tree li a:hover+ul li::before, .tree li a:hover+ul::before, .tree li a:hover+ul ul::before{ border color: #94a0b4; } /*Thats all. I hope you enjoyed it. Thanks :)*/ </style> <script> window.console = window.console || function(t) {}; </script> </head> <body translate="no"> <! We will create a family tree using just CSS(3) The markup will be simple nested lists > <div class="tree"> <ul> <li> <a href="#">Parent</a> <ul> <li> <a href="#">Child</a> <ul> <li> <a href="#">Grand Child</a> </li> </ul> </li> <li> <a href="#">Child</a> <ul> <li><a href="#">Grand Child</a></li> <li> <a href="#">Grand Child</a> <ul> <li> <a href="#">Great Grand Child</a> </li> <li> <a href="#">Great Grand Child</a> </li> <li> <a href="#">Great Grand Child</a> </li> </ul> </li> <li><a href="#">Grand Child</a></li> </ul> </li> </ul> </li> </ul> </div> </body> </html>
