JSFiddle - React, Tailwind, and code Playground

by Максим Тюльпаков

HTML

<label class="spoiler"> <input type="checkbox"> <u>Тайтл спойлера</u>
<div class="body">
    <br>
    <p>
    <a href="#1"> Ссылка 1 </a><br>
    <a href="#2"> Ссылка 2 </a><br>
    <a href="#3"> Ссылка 3 </a><br>
    </p>
</div>
 </label>

CSS

.spoiler {
    display: block;
    width: 100%;
   
}
.spoiler > .title {
    display: block;
    padding: 4px;
}
.spoiler > .body {
    padding: 4px;
    border-top: #ccc solid 1px;
    display: none;
}
.spoiler > :checked ~ .body {
    display: block;
}
u:hover {
    color: red; /* Цвет ссылки при наведении на нее курсора мыши */  
    text-decoration: underline; /* Добавляем подчеркивание */
   }