Layout con Navbar y Sidebar

Formularios

Nombre

Biografía

Subir archivo

Arrastra tus archivos aquí o haz clic para subir

País

Buscar

🔍 ❌

Code

                
                  <div class="form-group">
                    <label for="name">Nombre</label>
                    <input type="text" id="name" class="form-control" placeholder="Tu nombre" />

                    <label for="bio">Biografía</label>
                    <textarea id="bio" class="form-control" placeholder="Cuéntanos sobre ti..."></textarea>
                  </div>

                  <div class="form-group">
                    <label for="file-upload" class="form-label">Subir archivo</label>
                    <input type="file" id="file-upload" class="form-control-file" />
                  </div>

                  <div class="file-drop-zone" id="drop-zone">
                    <input type="file" id="file-input" class="file-input" multiple />
                    <p id="drop-message"><strong>Arrastra tus archivos aquí</strong> o haz clic para subir</p>
                    <ul id="file-list" class="file-list"></ul>
                  </div>

                  <div class="form-group">
                    <label for="country">País</label>
                    <select id="country" class="form-control">
                      <option>Selecciona tu país</option>
                      <option>México</option>
                      <option>Argentina</option>
                      <option>Colombia</option>
                    </select>
                  </div>

                  <div class="form-group">
                    <label for="buscar">Buscar</label>
                    <div class="input-icon-group">
                      <span class="icon-left">
                        🔍
                      </span>
                      <input id="buscar" type="text" class="form-control" placeholder="Buscar...">
                      <span class="icon-right">
                        ❌
                      </span>
                    </div>
                  </div>

CheckBox

Términos y condiciones

Code

                  
                    <div class="row">
                      <div class="input-check checkbox-primary">
                        <input class="input-check-input" type="checkbox" id="checkbox-todo-1" />
                        <label class="input-check-label" for="checkbox-todo-1">
                          <span class="checkbox-wrapper">
                            <span class="checkbox-bg"></span>
                            <svg fill="none" viewBox="0 0 24 24" class="checkbox-icon">
                              <path stroke-linejoin="round" stroke-linecap="round" stroke-width="3" stroke="currentColor"
                                d="M4 12L10 18L20 6" class="check-path"></path>
                            </svg>
                          </span>
                          Términos y condiciones
                        </label>
                      </div>
                      <div class="input-check checkbox-secondary" data-tooltip="Guardar cambios">
                        <input class="input-check-input" type="checkbox" id="checkbox-todo-2" />
                        <label class="input-check-label" for="checkbox-todo-2">
                          <span class="checkbox-wrapper">
                            <span class="checkbox-bg"></span>
                            <svg fill="none" viewBox="0 0 24 24" class="checkbox-icon">
                              <path stroke-linejoin="round" stroke-linecap="round" stroke-width="3" stroke="currentColor"
                                d="M4 12L10 18L20 6" class="check-path"></path>
                            </svg>
                          </span>
                          Términos y condiciones
                        </label>
                      </div>
                      <div class="input-check checkbox-info">
                        <input class="input-check-input" type="checkbox" id="checkbox-todo-3" />
                        <label class="input-check-label" for="checkbox-todo-3">
                          <span class="checkbox-wrapper">
                            <span class="checkbox-bg"></span>
                            <svg fill="none" viewBox="0 0 24 24" class="checkbox-icon">
                              <path stroke-linejoin="round" stroke-linecap="round" stroke-width="3" stroke="currentColor"
                                d="M4 12L10 18L20 6" class="check-path"></path>
                            </svg>
                          </span>
                          Términos y condiciones
                        </label>
                      </div>
                      <div class="input-check checkbox-success text-line">
                        <input class="input-check-input" type="checkbox" id="checkbox-todo-4" />
                        <label class="input-check-label" for="checkbox-todo-4">
                          <span class="checkbox-wrapper">
                            <span class="checkbox-bg rounded-circle"></span>
                            <svg fill="none" viewBox="0 0 24 24" class="checkbox-icon">
                              <path stroke-linejoin="round" stroke-linecap="round" stroke-width="3" stroke="currentColor"
                                d="M4 12L10 18L20 6" class="check-path"></path>
                            </svg>
                          </span>
                          Términos y condiciones
                        </label>
                      </div>
                      <div class="input-check checkbox-warning">
                        <input class="input-check-input" type="checkbox" id="checkbox-todo-5" />
                        <label class="input-check-label" for="checkbox-todo-5">
                          <span class="checkbox-wrapper">
                            <span class="checkbox-bg"></span>
                            <svg fill="none" viewBox="0 0 24 24" class="checkbox-icon">
                              <path stroke-linejoin="round" stroke-linecap="round" stroke-width="3" stroke="currentColor"
                                d="M4 12L10 18L20 6" class="check-path"></path>
                            </svg>
                          </span>
                          Términos y condiciones
                        </label>
                      </div>
                      <div class="input-check checkbox-danger">
                        <input class="input-check-input" type="checkbox" id="checkbox-todo-6" />
                        <label class="input-check-label" for="checkbox-todo-6">
                          <span class="checkbox-wrapper">
                            <span class="checkbox-bg"></span>
                            <svg fill="none" viewBox="0 0 24 24" class="checkbox-icon">
                              <path stroke-linejoin="round" stroke-linecap="round" stroke-width="3" stroke="currentColor"
                                d="M4 12L10 18L20 6" class="check-path"></path>
                            </svg>
                          </span>
                          Términos y condiciones
                        </label>
                      </div>
                    </div>

Radio Buttons

radio-info

radio-success

radio-warning

radio-danger

radio-primary

radio-secondary

Code

                  
                    <div class="row">
                      <div class="input-radio radio-info">
                        <input type="radio" name="opcion" id="radio-1" />
                        <label for="radio-1">
                          <span class="radio-wrapper"></span>
                          radio-info
                        </label>
                      </div>
                      <div class="input-radio radio-success text-line">
                        <input type="radio" name="opcion" id="radio-2" />
                        <label for="radio-2">
                          <span class="radio-wrapper"></span>
                          radio-success
                        </label>
                      </div>
                      <div class="input-radio radio-warning">
                        <input type="radio" name="opcion" id="radio-3" />
                        <label for="radio-3">
                          <span class="radio-wrapper"></span>
                          radio-warning
                        </label>
                      </div>
                      <div class="input-radio radio-danger">
                        <input type="radio" name="opcion" id="radio-4" />
                        <label for="radio-4">
                          <span class="radio-wrapper"></span>
                          radio-danger
                        </label>
                      </div>
                      <div class="input-radio radio-primary">
                        <input type="radio" name="opcion" id="radio-5" />
                        <label for="radio-5">
                          <span class="radio-wrapper"></span>
                          radio-primary
                        </label>
                      </div>
                      <div class="input-radio radio-secondary">
                        <input type="radio" name="opcion" id="radio-6" />
                        <label for="radio-6">
                          <span class="radio-wrapper"></span>
                          radio-secondary
                        </label>
                      </div>
                    </div>

Botones

Code

                  
                    <div class="row">
                      <button class="btn btn-info" data-tooltip="Guardar cambios">Info</button>
                      <button class="btn btn-warning">Warning</button>
                      <button class="btn btn-danger">Danger</button>
                      <button class="btn btn-success">Success</button>
                      <button class="btn btn-primary">Primary</button>
                      <button class="btn btn-secondary">Secondary</button>
                      <button class="btn btn-light">Light</button>
                      <button class="btn btn-dark">Dark</button>
                    </div>
                    <div class="row">
                      <button class="btn btn-outline-info">Outline Info</button>
                      <button class="btn btn-outline-success">Outline success</button>
                      <button class="btn btn-outline-warning">Outline warning</button>
                      <button class="btn btn-outline-danger">Outline danger</button>
                      <button class="btn btn-outline-primary">Outline primary</button>
                      <button class="btn btn-outline-secondary">Outline secondary</button>
                      <button class="btn btn-outline-light">Outline light</button>
                      <button class="btn btn-outline-dark">Outline dark</button>
                    </div>
                    <div class="row">
                      <button class="btn btn-outline-danger btn-rounded">Outline Danger Rounded</button>
                      <button class="btn btn-ghost">Ghost Success</button>
                      <button class="btn btn-sm btn-dark">sm</button>
                      <button class="btn btn-danger btn-block">Block Danger</button>
                      <button class="btn btn-outline-primary btn-block" onclick="openModal('custom-modal')">Abrir modal</button>
                    </div>

Textos

text-info text-success text-warning text-danger text-primary text-secondary text-dark text-light text-black text-white

text-xs
text-sm
text-base
text-md
text-lg
text-2xl
text-3xl
text-4xl
text-5xl
font-bold
font-medium
font-light

Code

                  
                    <label class="text-info">text-info</label>
                    <label class="text-warning">text-warning</label>
                    <label class="text-danger">text-danger</label>
                    <label class="text-success">text-success</label>
                    <label class="text-primary">text-primary</label>
                    <label class="text-secondary">text-secondary</label>
                    <label class="text-dark">text-dark</label>
                    <label class="text-light">text-light</label>
                    <label class="text-black">text-black</label>
                    <label class="text-white">text-white</label>
                    <p class="text-xs"> text-xs </p>
                    <p class="text-sm"> text-sm </p>
                    <p class="text-base"> text-base </p>
                    <p class="text-md"> text-md </p>
                    <p class="text-lg"> text-lg </p>
                    <p class="text-2xl"> text-2xl </p>
                    <p class="text-3xl"> text-3xl </p>
                    <p class="text-4xl"> text-4xl </p>
                    <p class="text-5xl"> text-5xl </p>
                    <p class="text-lg font-bold"> font-bold </p>
                    <p class="text-lg font-medium"> font-medium </p>
                    <p class="text-lg font-light"> font-light </p>

Toast

Code

                  
                      <button class="btn btn-info" onclick="showToast('Hubo un error al guardar', 'info', 5000)">Info</button>
                      <button class="btn btn-success" onclick="showToast('Hubo un error al guardar', 'success', 5000)">Success</button>                     
                      <button class="btn btn-warning" onclick="showToast('Hubo un error al guardar', 'warning', 5000)">Warning</button>
                      <button class="btn btn-danger" onclick="showToast('Hubo un error al guardar', 'danger', 5000)">Danger</button>

                      También agregar de forma global

                      <div id="toast-container"> </div>

width de acuerdo al parienton

w-100

w-75

w-50

w-25

w-auto

width: w-[auto, 25, 50, 75, 100] ajusta el ancho del div de acuerdo al tamaño del div padre, dependiendo del porcentaje seleccionado
ejemplo: aqui se tiene un div col-lg-6 el cual se extiende a la mitad del ancho de la pantalla de acuerdo al tamaño de este elemento se va adaptar el div hijo

height de acuerdo al parienton

h-100

h-75

h-50

h-25

h-auto

height: h-[auto, 25, 50, 75, 100] ajusta la altura del div de acuerdo al tamaño del div padre, dependiendo del porcentaje seleccionado
ejemplo comportamiento 1: aqui se tiene un div col-lg-6 que tiene un vh-50 el cual se extiende la altura del div a el 50% de la altura de la pantalla
ejemplo comportamiento 2: dentro del div del ejemplo 1 se tiene un div con el porcentaje de la altura deceada la cual se adapta a la altura del div padre

Filas y columnas Responsive

col-lg-4

comportamiento del div col

Se agrega dependiendo del tamaño de la pantalla

Col: se necesita para el comportamineto secuencial entre cols aparte de dar un espaciado entre col y col
col-1: col-[cualquier número] es para el tamaño en pantallas pequeñas (celular)
col-md-3: col-md-[cualquier número] es para el tamaño en pantallas intermedio (tablets y algunas laptops pequeñas)
col-lg-3: col-lg-[cualquier número] es para el tamaño en pantallas grandes (pantalla, laptop, equipos de escritorio)

bg-primary

bg-secondary

bg-info

bg-success

bg-warning

bg-danger

bg-.gradient

bg-glass bg-rounded

Acordiones

Opción A

Contenido de la opción A.

Opción B

Contenido de la opción B.

Opción C

Contenido de la opción C (otro grupo).

Opción D

Contenido de la opción D.

los acordiones se agrupan de acuerdo a un div.accordion-group el cual es el padre, para que los acordiones hijos div.accordion-item cierren el uno al otro y no mantenerse todos abiertos

Code

                
                  <div class="row">
                    <div class="col col-6 col-md-6 col-lg-6">
                      <div class="accordion-group">
                        <div class="accordion-item">
                          <div class="accordion-header">Opción A</div>
                          <div class="accordion-body">
                            <p>Contenido de la opción A.</p>
                          </div>
                        </div>
                        <div class="accordion-item">
                          <div class="accordion-header">Opción B</div>
                          <div class="accordion-body">
                            <p>Contenido de la opción B.</p>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="col col-6 col-md-6 col-lg-6">
                      <div class="accordion-group">
                        <div class="accordion-item">
                          <div class="accordion-header">Opción C</div>
                          <div class="accordion-body bg-glass">
                            <p>Contenido de la opción C (otro grupo).</p>
                          </div>
                        </div>
                        <div class="accordion-item">
                          <div class="accordion-header">Opción D</div>
                          <div class="accordion-body">
                            <p>Contenido de la opción D.</p>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>

Cards

Título

Contenido

Pie de tarjeta

configuración base de un card

                
                  <div class="card">
                    <div class="card-header">Título</div>
                    <div class="card-body">Contenido</div>
                    <div class="card-footer">Pie de tarjeta</div>
                  </div>

Contenido

Pie de tarjeta

card con imagen

                
                  <div class="card bg-glass">
                    <img class="card-img-top"
                      src="https://imgs.search.brave.com/YeQz22OJLawqpu_PvvrJMQUO_WvQSbkBPz3lPaUK6gc/rs:fit:860:0:0:0/g:ce/aHR0cHM6Ly93YWxs/cGFwZXJzLmNvbS9p/bWFnZXMvaGQvYmx1/ZS1xdW90ZS1iYXRt/YW4tbG9nby1pcGhv/bmUtNTYzMDRwMDlp/aWNsYmU2bi5qcGc"
                      alt="Fondo" />
                    <div class="card-body">Contenido</div>
                    <div class="card-footer">Pie de tarjeta</div>
                  </div>

Título

Descripción

card con imagen background

                
                  <div class="card card-bg-img">
                    <img class="card-img-top"
                      src="https://wallpapers.com/images/high/yellow-crosswalk-minimal-background-3bthfv5fde150doe.webp"
                      alt="Fondo" />
                    <div class="card-overlay">
                      <h3>Título</h3>
                      <p>Título</p>
                    </div>
                  </div>

Pasa el cursor sobre mí

card interactivo, se agrega card-interactive al card para ampliar al pasar sobre este

                
                  <div class="card card-interactive">
                    <div class="card-body">
                      Pasa el cursor sobre mí
                    </div>
                  </div>

Frente

Reverso

card flip

                
                  <div class="card card-flip h-50">
                    <div class="card-flip-inner">
                      <div class="card-flip-front">
                        <h3>Frente</h3>
                      </div>
                      <div class="card-flip-back">
                        <p>Reverso</p>
                      </div>
                    </div>
                  </div>

Nombre del Usuario

Información o descripción breve.

card con imagen 3d

                
                  <div class="card bg-glass">
                    <div class="badge-3d">
                      <img class="image-zoom"
                        src="https://imgs.search.brave.com/e48ZC5dWzgynuUD07cVXte6qBkP9yLYBG_RElEtYkX0/rs:fit:500:0:1:0/g:ce/aHR0cHM6Ly93YWxs/cGFwZXJzLmNvbS9p/bWFnZXMvaGQvcmVh/bGlzdGljLWJhdG1h/bi1hcnQtcG5nLWRj/by0yanZ2aWhndG80/dmc2Zjd3LnBuZw"
                        alt="Usuario" />
                    </div>
                    <div class="card-content">
                      <h3>Nombre del Usuario</h3>
                      <p>Información o descripción breve.</p>
                    </div>
                  </div>

Nombre del Usuario

Información o descripción breve.

card con articulo que sobresale

                
                  <div class="card bg-glass">
                    <div class="highlight-badge">
                      <img
                        src="https://imgs.search.brave.com/Rx801UYXcg21UlnXpNKB-lxX7oCOGomzu95lLzVnUnw/rs:fit:500:0:1:0/g:ce/aHR0cHM6Ly93YWxs/cGFwZXJzLmNvbS9p/bWFnZXMvaGQvYmF0/bWFuLXNpZGUtcHJv/ZmlsZS1wbmctMDUw/MzIwMjQtNnFwZ2Vx/aTF6am9tenhoOC5w/bmc"
                        alt="Usuario" />
                    </div>
                    <div class="card-content">
                      <h3>Nombre del Usuario</h3>
                      <p>Información o descripción breve.</p>
                    </div>
                  </div>

Desvanecido Vertical

Este card se desvanece de arriba hacia abajo.

card con desvanecido

                
                  <div class="card bg-glass fade-vertical">
                    <div class="card-body">
                      <h3>Desvanecido Vertical</h3>
                      <p>Este card se desvanece de arriba hacia abajo.</p>
                    </div>
                  </div>

body

info

card con boton

                
                  <div class="card">
                    <div class="card-img-top">
                      <img class="image-zoom" src="https://wallpapers.com/images/high/food-4k-ojt559b4aanavk2b.webp"
                        alt="Fondo" />
                      <div class="icon">
                        <button class="btn btn-rounded bg-info"><span>ℹ️</span></button>
                      </div>
                    </div>
                    <div class="card-body">
                      <h3>body</h3>
                      <p>info</p>
                    </div>
                  </div>

22 sep 2025

Juan Pérez

Desarrollador Full Stack con experiencia en Laravel, Angular y Flutter. Amante del café ☕.

card horizontal

                
                  <div class="card card-horizontal">
                    <div class="card-left bg-gradient justify-center">
                      <img
                        src="https://imgs.search.brave.com/e48ZC5dWzgynuUD07cVXte6qBkP9yLYBG_RElEtYkX0/rs:fit:500:0:1:0/g:ce/aHR0cHM6Ly93YWxs/cGFwZXJzLmNvbS9p/bWFnZXMvaGQvcmVh/bGlzdGljLWJhdG1h/bi1hcnQtcG5nLWRj/by0yanZ2aWhndG80/dmc2Zjd3LnBuZw"
                        alt="Usuario">
                    </div>
                    <div class="card-body">
                      <div class="row justify-end text-xs font-medium"> 22 sep 2025</div>
                      <h3>Juan Pérez</h3>
                      <p>Desarrollador Full Stack con experiencia en Laravel, Angular y Flutter. Amante del café ☕.</p>
                      <button class="btn bg-info">Ver Perfil</button>
                    </div>
                  </div>

⛔

Code

            
              <div class="carousel-container">
                <button class="carousel-btn left">❮</button>

                <div class="carousel-track">
                  <img
                    src="https://imgs.search.brave.com/ordSbl7vqvW2wwQiC2OoGiKjPCvNmL5NGxog-A2pO2k/rs:fit:860:0:0:0/g:ce/aHR0cHM6Ly93YWxs/cGFwZXJzLmNvbS9p/bWFnZXMvZmVhdHVy/ZWQvdGhlLWp1c3Rp/Y2UtbGVhZ3VlLWRh/cmstaDVuODd3c3E1/amdvdWp5NC5qcGc"
                    class="carousel-item" data-index="0" />
                  <img
                    src="https://imgs.search.brave.com/Jex7pbJ6Y1wbMonvhKf06xhPXWG8mHiyf5SUt9gjsFM/rs:fit:860:0:0:0/g:ce/aHR0cHM6Ly93YWxs/cGFwZXJzLmNvbS9p/bWFnZXMvZmVhdHVy/ZWQvYmF0LWZhbWls/eS0yc2R6MXZ5dHp1/MHI2dWFnLmpwZw"
                    class="carousel-item" data-index="1" />
                  <img
                    src="https://imgs.search.brave.com/5CG57mjkhf1hPSiOb92XFb-Gk_ikcFGfccRq_VAC324/rs:fit:860:0:0:0/g:ce/aHR0cHM6Ly9tLm1l/ZGlhLWFtYXpvbi5j/b20vaW1hZ2VzL00v/TVY1QlpHWTNNMlV5/TW1RdE1XTTVaaTAw/TmpnMUxXSXhPV1V0/WW1FME1qZzNaamcz/TlRkaVhrRXlYa0Zx/Y0djQC5qcGc"
                    class="carousel-item" data-index="2" />
                  <img
                    src="https://imgs.search.brave.com/YeQz22OJLawqpu_PvvrJMQUO_WvQSbkBPz3lPaUK6gc/rs:fit:860:0:0:0/g:ce/aHR0cHM6Ly93YWxs/cGFwZXJzLmNvbS9p/bWFnZXMvaGQvYmx1/ZS1xdW90ZS1iYXRt/YW4tbG9nby1pcGhv/bmUtNTYzMDRwMDlp/aWNsYmU2bi5qcGc"
                    class="carousel-item" data-index="3" />
                  <img
                    src="https://imgs.search.brave.com/BAPix4wEhr5B_JKr5Lxl8W4XnnFB1N42ZXl_7qxS0BA/rs:fit:860:0:0:0/g:ce/aHR0cHM6Ly9jZG4u/cGl4YWJheS5jb20v/cGhvdG8vMjAyMy8w/OS8yNS8xNC8wOS9h/aS1nZW5lcmF0ZWQt/ODI3NTE1NV82NDAu/anBn"
                    class="carousel-item" data-index="4" />
                </div>

                <button class="carousel-btn right">❯</button>
              </div>
              
              También agregar de forma global 
              funciona para todos los carousel

              <div id="imgModal" class="img-modal">
                <span class="close-modal">×</span>
                <button class="modal-nav left">❮</button>
                <img class="modal-content" id="modalImage" />
                <button class="modal-nav right">❯</button>
                <div class="modal-thumbnails" id="modalThumbnails"></div>
              </div>

Modal

en el botón agregar la funcion onclick="openModal('example-modal')" dando un nombre que no se duplique
agregar el modal con su identificador id="example-modal"

Code

                
                  <button class="btn btn-block btn-primary" onclick="openModal('example-modal')">
                    mostrar Modal
                  </button>
                  <div class="modal" id="example-modal">
                    <div class="modal-backdrop bg-glass"></div>
                    <div class="modal-content">
                      <div class="modal-header">
                        <div class="row justify-between">
                          <h2>Título del Modal</h2>
                          <button class="btn btn-transparent" onclick="closeModal('example-modal')">✖️</button>
                        </div>
                      </div>
                      <div class="modal-body">
                        <p>Este es un texto de ejemplo dentro del modal. Puedes colocar cualquier contenido aquí.</p>
                      </div>
                      <div class="modal-footer">
                        <button class="btn btn-success">
                          <span>Guardar</span>
                        </button>
                      </div>
                    </div>
                  </div>

Usuarios de la plataforma

#	Nombre	Email	Rol	Estado
1	Ana López	ana@example.com	Admin	Activo
Dirección: Calle Falsa 123 Notas: Usuario creado manualmente, acceso completo al sistema. Teléfono: 555-1234
2	Carlos Ruiz	carlos@example.com	Editor	Pendiente
Dirección: Calle Falsa 1234567 Notas: Esta pendiente este loco Teléfono: 555-1234
1	Ana López	ana@example.com	Admin	Activo
Dirección: Calle Falsa 123 Notas: Usuario creado manualmente, acceso completo al sistema. Teléfono: 555-1234
2	Carlos Ruiz	carlos@example.com	Editor	Pendiente
Dirección: Calle Falsa 1234567 Notas: Esta pendiente este loco Teléfono: 555-1234
1	Ana López	ana@example.com	Admin	Activo
Dirección: Calle Falsa 123 Notas: Usuario creado manualmente, acceso completo al sistema. Teléfono: 555-1234
2	Carlos Ruiz	carlos@example.com	Editor	Pendiente
Dirección: Calle Falsa 1234567 Notas: Esta pendiente este loco Teléfono: 555-1234
1	Ana López	ana@example.com	Admin	Activo
Dirección: Calle Falsa 123 Notas: Usuario creado manualmente, acceso completo al sistema. Teléfono: 555-1234
2	Carlos Ruiz	carlos@example.com	Editor	Pendiente
Dirección: Calle Falsa 1234567 Notas: Esta pendiente este loco Teléfono: 555-1234
2	Carlos Ruiz	carlos@example.com	Editor	Pendiente
Dirección: Calle Falsa 1234567 Notas: Esta pendiente este loco Teléfono: 555-1234
1	Ana López	ana@example.com	Admin	Activo
Dirección: Calle Falsa 123 Notas: Usuario creado manualmente, acceso completo al sistema. Teléfono: 555-1234
2	Carlos Ruiz	carlos@example.com	Editor	Pendiente
Dirección: Calle Falsa 1234567 Notas: Esta pendiente este loco Teléfono: 555-1234

Code

                
                      <div class="table-responsive">
                        <table class="styled-table">
                          <thead class="bg-primary">
                            <tr>
                              <th>#</th>
                              <th>Nombre</th>
                              <th>Email</th>
                              <th>Rol</th>
                              <th>Estado</th>
                              <th>Detalles</th>
                            </tr>
                          </thead>
                          <tbody class="table-scroll">
                            <tr class="main-row">
                              <td>1</td>
                              <td>Ana López</td>
                              <td>ana@example.com</td>
                              <td>Admin</td>
                              <td><span class="badge success">Activo</span></td>
                              <td><button class="btn btn-sm btn-outline-info toggle-row">Ver más</button></td>
                            </tr>
                            <tr class="detail-row">
                              <td colspan="6">
                                <div class="row-details">
                                  <p><strong>Dirección:</strong> Calle Falsa 123</p>
                                  <p><strong>Notas:</strong> Usuario creado manualmente, acceso completo al sistema.</p>
                                  <p><strong>Teléfono:</strong> 555-1234</p>
                                </div>
                              </td>
                            </tr>
                            <tr class="main-row">
                              <td>2</td>
                              <td>Carlos Ruiz</td>
                              <td>carlos@example.com</td>
                              <td>Editor</td>
                              <td><span class="badge warning">Pendiente</span></td>
                              <td><button class="btn btn-sm btn-outline-info toggle-row">Ver más</button></td>
                            </tr>
                            <tr class="detail-row">
                              <td colspan="6">
                                <div class="row-details">
                                  <p><strong>Dirección:</strong> Calle Falsa 1234567</p>
                                  <p><strong>Notas:</strong> Esta pendiente este loco</p>
                                  <p><strong>Teléfono:</strong> 555-1234</p>
                                </div>
                              </td>
                            </tr>
                          </tbody>
                        </table>
                      </div>

Horizontal Tabs

Contenido del Tab 1

Contenido del Tab 2

Contenido del Tab 3

Vertical Tabs

Contenido del Tab A

Contenido del Tab B

Contenido del Tab C

Título

Contenido

Pie de tarjeta

Título

Contenido

Pie de tarjeta

Primera sección

Segunda sección

Tercera sección

Cuarta sección