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 li:not(:first-child) {
  margin-top: -46px;
  transition: all 0.3s ease-out;
}

.container:not(.open) li:first-child:before {
  content: '';
  position: absolute;
  right: -2px;
  height: 10px;
  bottom: 4px;
  left: -2px;
  border: red solid;
  border-width: 0 2px 2px 2px;
  border-radius: 0 0 0.4rem 0.4rem;
  z-index: -1;
  
}

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

.container li:first-child {
  cursor: pointer;
  transition: all 0.2s;
  z-index: 1;
  position: relative;
  padding-bottom: 16px;
}

.container {
  margin-bottom: 0.25rem;
}

JavaScript

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