<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
  <link rel="stylesheet" href="main.css">
</head>
<body>
  <div style="display: none;"></div>
  <header class="bg-dark text-white py-3">
  <div class="container d-flex justify-content-between align-items-center">
    <a href="#" class="text-white h4 mb-0">ModernKit</a>
    <nav>
      <ul class="list-unstyled d-flex mb-0">
        <li class="ml-3"><a href="#" class="text-white">Home</a></li>
        <li class="ml-3"><a href="#" class="text-white">About</a></li>
        <li class="ml-3"><a href="#" class="text-white">Contact</a></li>
      </ul>
    </nav>
  </div>
</header>
  <main class="container py-5">
        <h1>UI Components Showcase</h1>

    <section>
        <h2>Tabs</h2>
        <div class="tabs">
            <div class="tab-headers">
                <button class="tab-button active" data-tab="tab1">Tab 1</button>
                <button class="tab-button" data-tab="tab2">Tab 2</button>
                <button class="tab-button" data-tab="tab3">Tab 3</button>
            </div>
            <div class="tab-content">
                <div id="tab1" class="tab-pane active">
                    <h3>Content for Tab 1</h3>
                    <p>This is the content for the first tab. It can contain any HTML elements.</p>
                </div>
                <div id="tab2" class="tab-pane">
                    <h3>Content for Tab 2</h3>
                    <p>This is the content for the second tab. More information here.</p>
                </div>
                <div id="tab3" class="tab-pane">
                    <h3>Content for Tab 3</h3>
                    <p>This is the content for the third tab. Even more details.</p>
                </div>
            </div>
        </div>
    </section>

    <section>
        <h2>Slider (Swiper)</h2>
        <!-- Slider main container -->
        <div class="swiper">
            <!-- Additional required wrapper -->
            <div class="swiper-wrapper">
                <!-- Slides -->
                <div class="swiper-slide">Slide 1</div>
                <div class="swiper-slide">Slide 2</div>
                <div class="swiper-slide">Slide 3</div>
            </div>
            <!-- If we need pagination -->
            <div class="swiper-pagination"></div>

            <!-- If we need navigation buttons -->
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>

            <!-- If we need scrollbar -->
            <div class="swiper-scrollbar"></div>
        </div>
    </section>

    <section>
        <h2>Modal (Micromodal)</h2>
        <button data-micromodal-trigger="modal-1">Open Modal</button>

        <div class="modal micromodal-slide" id="modal-1" aria-hidden="true">
            <div class="modal__overlay" tabindex="-1" data-micromodal-close>
                <div class="modal__container" role="dialog" aria-modal="true" aria-labelledby="modal-1-title">
                    <header class="modal__header">
                        <h2 class="modal__title" id="modal-1-title">
                            Micromodal Example
                        </h2>
                        <button class="modal__close" aria-label="Close modal" data-micromodal-close></button>
                    </header>
                    <div class="modal__content" id="modal-1-content">
                        <p>This is a simple modal window powered by Micromodal.</p>
                        <p>You can put any content here.</p>
                    </div>
                    <footer class="modal__footer">
                        <button class="modal__btn" data-micromodal-close aria-label="Close this dialog window">Close</button>
                    </footer>
                </div>
            </div>
        </div>
    </section>
  </main>

  <footer class="bg-dark text-white py-3 mt-5">
  <div class="container text-center">
    <p class="mb-0">&copy; 2025 ModernKit. All rights reserved.</p>
  </div>
</footer>  <script src="js/main.js"></script>
</body>
</html>