JSFiddle - React, Tailwind, and code Playground

HTML

<h3 class="hide">Заголовок 1</h3>
<ul>
  <li>text 1</li>
</ul>
<h3 >Заголовок 2</h3>
<ul>
  <li>text 1</li>
  <li>text 2</li>
</ul>
<h3 class="hide">Заголовок 3</h3>
<ul>
  <li>text 1</li>
  <li>text 2</li>
</ul>

CSS

h3 {
	   cursor: pointer;
	  user-select: none;
    width: max-content;
	  position: relative;
	  font-size: 24px;
	  line-height: 1.2;
	  color: red;
	  padding-left: 28px;
	  padding-bottom: 18px;
	  font-weight: normal;
	}

	h3::after,
	h3::before {
	  position: absolute;
	  content: '';
	  background-color: red;
	  transition: 0.3s opacity;
	}

	h3::after {
	  top: 14px;
	  left: 0px;
	  width: 13px;
	  height: 3px;
	}


	h3::before {
	  opacity: 0;
	  top: 9px;
	  left: 5px;
	  width: 3px;
	  height: 13px;
	}

	.hide::before {
	  opacity: 1;
	}

	.hide+ul {
	  display: none;
	}