JSFiddle - React, Tailwind, and code Playground

by Christian Sonne

HTML

<script src="https://cdn.tailwindcss.com"></script>
<div class="h-screen bg-black m-0">
  <ul class="ml-2 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>
    </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

.container:not(.open) {
   margin-top: 0.25rem;
  margin-bottom: 0.75rem;
  li:not(:first-child) {
    margin-top: -3rem;
    list-style-type: none;
    z-index: 0;
  }
}

.container {
  margin-top: -0.5rem;
  cursor: pointer;
  li {
    margin-top: 0.5rem;
    transition: margin 0.2s;
  }
}

JavaScript

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