JSFiddle - React, Tailwind, and code Playground

by mamounothman

HTML

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="file:///home/josh/startpage/style.css">
        <title>Home</title>
      </head>
      <body>
        <div class="container">
          <div class="prompt">[<span>josh</span>@<span>Arch</span> ~]$ ./tree</div>
          <div class="tree">
            <h1>.</h1>
            <ul>
              <li>
                <h1>Code</h1>
                <ul>
                  <li><a href="https://github.com/joshuabl97">GitHub</a></li>
                  <li><a href="https://stackoverflow.com/questions/tagged/python">StackOverflow</a></li>
		  <li><a href="https://www.hackerrank.com/dashboard">Hacker Rank</a></li> 
		  <li><a href="https://projecteuler.net/">Project Euler</a></li> 
                </ul>
              </li>
              <li>
                <h1>Video</h1>
                <ul>
                  <li><a href="youtube.com">YouTube</a></li>
                  <li><a href="netflix.com">Netflix</a></li>
                </ul>
              </li>
              <li>
                <h1>Reddit</h1>
                <ul>
                  <li><a href="https://www.reddit.com/r/unixporn/">UnixPorn</a></li>
                  <li><a href="https://www.reddit.com/r/archlinux/">Arch Linux</a></li>
                  <li><a href="https://www.reddit.com/r/Python/">Python</a></li>
		  <li><a href="https://www.reddit.com/r/battlestations/">Battlestations</a> </li>
                </ul>
              </li>
	      <li>
                <h1>Tech</h1>
                <ul>
                  <li><a href="https://www.archlinux.org/">Arch Linux</a></li>
                  <li><a href="https://www.hackthebox.eu/">Hack the Box</a></li>
                </ul>
              </li>
              <li>
                <h1>General</h1>
                <ul>
                  <li><a href="gmail.com">G-Mail</a></li>
		  <li><a href="lastpass.com">LastPass</a></li>
                 ...

CSS

/* @import "/home/josh/.cache/wal/colors.css";

@font-face {
    font-family: "Hack";
    src: url("/home/josh/.fonts/ttf/Hack-Regular.ttf");
}*/ 


/* CSS variables
   Generated by 'wal' */
:root {
    --wallpaper: #e6bcd2;

    /* Special */
    --background: #1d2237;
    --foreground: #e6bcd2;
    --cursor: #e6bcd2;

    /* Colors */
    --color0: #1d2237;
    --color1: #5F58A0;
    --color2: #397DC1;
    --color3: #A2258A;
    --color4: #9C67A6;
    --color5: #D05A9F;
    --color6: #3391CE;
    --color7: #e6bcd2;
    --color8: #a18393;
    --color9: #5F58A0;
    --color10: #397DC1;
    --color11: #A2258A;
    --color12: #9C67A6;
    --color13: #D05A9F;
    --color14: #3391CE;
    --color15: #e6bcd2;
}


html {
    font-size: 18px;
    background: var(--wallpaper) !important;
    font-weight: bold; 
}

body {
    background-image: var(--wallpaper) !important;
}

.container {
    position: absolute;
    top: 50%;
    left: 45%;
    transform: translate(-50%, -50%);
    background: var(--color0);
    opacity: 0.3; 
    position:relative;
    z-index:-1;
}

.prompt {
    color: var(--color15);
    font-size: 18px; 
    font-weight: bold; 
}

.prompt~.prompt {
    padding: 1.5rem 0 0.3125rem;
}

span {
    color: var(--color15);
}

h1 {
    display: inline;
    font-size: 22px;
    font-weight: bold;
    color: var(--color15);
    position:relative;
    z-index: 111;
}

.tree > ul {
    margin: 0;
    padding-left: 1rem;
}

ul {
    list-style: none;
    padding-left: 2.5rem;
}

li {
    position: relative;
}

li::before, li::after {
    content: "";
    position: absolute;
    left: -0.75rem;
}

li::before {
    border-top: 1px solid #a7a9be;
    top: 0.75rem;
    width: 0.5rem;
}

li::after {
    border-left: 1px solid #a7a9be;
    height: 100%;
    top: 0.25rem;
}

li:last-child::after {
    height: 0.5rem;
}

a {
    font-family: var(--font);
    font-size: 1rem;
    color: var(--foreground);
    text-decoration: none;
    outline: none;
}

a:hover {
   ...