JSFiddle - React, Tailwind, and code Playground

by Christian Sonne

HTML

<div class="h-screen bg-black m-0">
        <ul class="ml-2 relative  
           border-l-2 border-gray-400 p-2 text-white">
            <li class="relative ml-0.5 list-disc rounded-md border-2 border-gray-400 bg-gray-900 p-2 marker:text-gray-400 my-2">Game of Thrones</li>
            <div class="container inline-block">
                <li class="relative ml-0.5 list-disc rounded-md border-2 border-gray-400 bg-gray-900 p-2 marker:text-gray-400">House of the Dragon</li>
                <li class="relative ml-0.5 list-disc rounded-md border-2 border-gray-400 bg-gray-900 p-2 marker:text-gray-400">Dune</li>
                <li class="relative ml-0.5 list-disc rounded-md border-2 border-gray-400 bg-gray-900 p-2 marker:text-gray-400 z-0">Return of the King</li>
                <li class="relative ml-0.5 list-disc rounded-md border-2 border-gray-400 bg-gray-900 p-2 marker:text-gray-400 z-0">The Two Towers</li>
                <li class="relative ml-0.5 list-disc rounded-md border-2 border-gray-400 bg-gray-900 p-2 marker:text-gray-400 z-0">The Neverending Story</li>
            </div>
            <li class="relative ml-0.5 list-disc rounded-md border-2 border-gray-400 bg-gray-900 p-2 marker:text-gray-400 my-2">Game of Knives</li>
            <li class="relative ml-0.5 list-disc rounded-md border-2 border-gray-400 bg-gray-900 p-2 marker:text-gray-400 my-2 ">Game of Groans</li>
        </ul>
    </div>

CSS

:root {
  --transition-duration: 0.2s;
}

.container li::marker {
  transition: color 0.3s ease-out;
}

.container:not(.open) li:not(:first-child)::marker {
  color: transparent;
}

.container li:first-child:before {
  position: absolute;
  content: '>';
  right: 1rem;
  rotate: 90deg;
  transition: rotate var(--transition-duration) ease-out;
}

.container.open li:first-child:before {
  rotate: -90deg;
}


.container:not(.open) li:after {
  content: ' +4'
}

.container li:not(:first-child) {
  margin-top: -2.75rem;
  transition: all var(--transition-duration) ease-out;
}

.container li:nth-child(2) {
  margin-top: calc(4px - 2.75rem);
  z-index: 2;
}

.container li:nth-child(3) {
  margin-top: calc(4px - 2.75rem);
  z-index: 1;
}

.container.open li:not(:first-child) {
  margin-top: 0.5rem;
}

.container li:first-child {
  cursor: pointer;
  transition: all var(--transition-duration);
  z-index: 3;
  position: relative;
}

JavaScript

[...document.querySelectorAll('.container')].map(el => el.addEventListener('click', (el) => {el.currentTarget.classList.toggle('open')}, false))