<div class="container"><h1>Bootstrap  tab panel example (using nav-pills)  </h1></div>
<div id="exTab1" class="container"> 
<ul  class="nav nav-pills">
      <li class="active">
        <a  href="#1a" data-toggle="tab">Overview</a>
      </li>
      <li><a href="#2a" data-toggle="tab">Using nav-pills</a>
      </li>
      <li><a href="#3a" data-toggle="tab">Applying clearfix</a>
      </li>
      <li><a href="#4a" data-toggle="tab">Background color</a>
      </li>
    </ul>

      <div class="tab-content clearfix">
        <div class="tab-pane active" id="1a">
          <h3>Content's background color is the same for the tab</h3>
        </div>
        <div class="tab-pane" id="2a">
          <h3>We use the class nav-pills instead of nav-tabs which automatically creates a background color for the tab</h3>
        </div>
        <div class="tab-pane" id="3a">
          <h3>We applied clearfix to the tab-content to rid of the gap between the tab and the content</h3>
        </div>
          <div class="tab-pane" id="4a">
          <h3>We use css to change the background color of the content to be equal to the tab</h3>
        </div>
      </div>
  </div>


<hr></hr>
<div class="container"><h2>Example tab 2 (using standard nav-tabs)</h2></div>

<div id="exTab2" class="container"> 
<ul class="nav nav-tabs">
      <li class="active">
        <a  href="#1" data-toggle="tab">Overview</a>
      </li>
      <li><a href="#2" data-toggle="tab">Without clearfix</a>
      </li>
      <li><a href="#3" data-toggle="tab">Solution</a>
      </li>
    </ul>

      <div class="tab-content ">
        <div class="tab-pane active" id="1">
          <h3>Standard tab panel created on bootstrap using nav-tabs</h3>
        </div>
        <div class="tab-pane" id="2">
          <h3>Notice the gap between the content and tab after applying a background color</h3>
        </div>
        <div class="tab-pane" id="3">
          <h3>add clearfix to tab-content (see the css)</h3>
        </div>
      </div>
  </div>

<hr></hr>

<div class="container"><h2>Example 3 </h2></div>
<div id="exTab3" class="container"> 
<ul  class="nav nav-pills">
      <li class="active">
        <a  href="#1b" data-toggle="tab">Overview</a>
      </li>
      <li><a href="#2b" data-toggle="tab">Using nav-pills</a>
      </li>
      <li><a href="#3b" data-toggle="tab">Applying clearfix</a>
      </li>
      <li><a href="#4a" data-toggle="tab">Background color</a>
      </li>
    </ul>

      <div class="tab-content clearfix">
        <div class="tab-pane active" id="1b">
          <h3>Same as example 1 but we have now styled the tab's corner</h3>
        </div>
        <div class="tab-pane" id="2b">
          <h3>We use the class nav-pills instead of nav-tabs which automatically creates a background color for the tab</h3>
        </div>
        <div class="tab-pane" id="3b">
          <h3>We applied clearfix to the tab-content to rid of the gap between the tab and the content</h3>
        </div>
          <div class="tab-pane" id="4b">
          <h3>We use css to change the background color of the content to be equal to the tab</h3>
        </div>
      </div>
  </div>


<!-- Bootstrap core JavaScript
    
<!DOCTYPE html>

<html lang="es">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Para mi Mejor Amiga</title>

    <style>

        body {

            font-family: Arial, sans-serif;

            margin: 0;

            padding: 0;

            background: linear-gradient(120deg, #ff9a9e, #fad0c4);

            color: #333;

            display: flex;

            justify-content: center;

            align-items: center;

            height: 100vh;

            overflow: hidden; /* Para evitar barras de desplazamiento */

        }

        .container {

            text-align: center;

            background: white;

            padding: 30px;

            border-radius: 15px;

            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);

            max-width: 400px;

            width: 90%;

        }

        h1 {

            color: #ff6f91;

        }

        p {

            font-size: 18px;

            margin: 15px 0;

        }

        .heart {

            font-size: 50px;

            color: #ff6f91;

            margin: 20px 0;

        }

        .button {

            display: inline-block;

            padding: 10px 20px;

            margin-top: 20px;

            text-decoration: none;

            background: #ff6f91;

            color: white;

            border-radius: 5px;

            font-size: 16px;

            transition: background 0.3s ease;

        }

        .button:hover {

            background: #ff4f6d;

        }

        /* Estilo para los corazoncitos que aparecerán */

        .heart-icon {

            position: absolute;

            font-size: 30px;

            color: #ff6f91;

            animation: float 2s ease-in-out infinite;

        }

        @keyframes float {

            0% {

                transform: translateY(0) scale(1);

            }

            50% {

                transform: translateY(-50px) scale(1.2);

            }

            100% {

                transform: translateY(0) scale(1);

            }

        }

    </style>

</head>

<body>

    <div class="container">

        <h1>Para mi Mejor Amiga</h1>

        <div class="heart">❤️</div>

        <p>Eres como el código perfecto: sin errores y siempre funcionando a mi favor.</p>

        <p>Gracias por estar siempre ahí, amiga. Eres una de las mejores partes de mi vida.</p>

        <a class="button" href="#"Eres la mejor!</a>

    </div>

    <script>

        // Selecciona el botón

        const button = document.querySelector('.button');

        // Función que dispersa los corazoncitos

        button.addEventListener('mouseenter', function() {

            for (let i = 0; i < 30; i++) {

                const heart = document.createElement('span');

                heart.classList.add('heart-icon');

                heart.textContent = '❤️';

                // Establece una posición aleatoria en la pantalla

                heart.style.left = `${Math.random() * 100}vw`;

                heart.style.top = `${Math.random() * 100}vh`;

                // Agrega el corazón al body

                document.body.appendChild(heart);

                // Elimina el corazón después de la animación

                setTimeout(() => {

                    heart.remove();

                }, 2000); // Tiempo de la animación (2 segundos)

            }

        });

    </script>

</body>

</html>

External CSS

  1. //maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.