JSFiddle - React, Tailwind, and code Playground
by SoCu
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Textos</title>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<style type="text/css">
.oculto1,.oculto2,.oculto3{
margin-left: 1%;
display: none;
}
.info2_submenu1 span{
padding-left: 15px;
}
.blue-text {
font: 10pt comic sans ms;
color: blue;
}
td {
vertical-align: top;
}
</style>
</head>
<body>
<div>
<p>
<p>
<div>
<a><button type="button" style='width:257px; text-align: left; font: 11pt arial;' onclick="window.open('pagina.htm','_self');">
<span><i class="fa fa-angle-double-right blue-text" aria-hidden="true"></i> Boton 1</span></button></a>
</div>
<div class="info1">
<a href="#info1"><button type="button" style='width:257px; text-align: left; font: 11pt arial'>Libro 1</button></a>
</div>
<div id="<info1></info1>" class="oculto1">
<table>
<tr>
<td><span class="blue-text"><i class="fa fa-angle-double-right" aria-hidden="true"></i></span></td>
<td style='font: 11pt arial'><a href="pagina.htm">INDICE por artĂculos</a></td>
</tr>
<tr>
<td><span class="blue-text"><i class="fa fa-angle-double-right" aria-hidden="true"></i></span></td>
<td style='font: 11pt arial'><a href="pagina.htm">Cap. 1 - Jujubes marzipan chocolate cake wafer biscuit. Biscuit powder danish croissant cupcake macaroon.Jujubes marzipan chocolate cake wafer biscuit. Biscuit powder danish croissant cupcake macaroon.</a></td>
</tr>
<tr>
<td><span class="blue-text"><i class="fa fa-angle-double-right" aria-hidden="true"></i></span></td>
<td><a href="pagina.htm">Cap. 2 - Jujubes marzipan...