Carousel Indicators

                    <section class="flex items-center justify-center p-8">
  <div class="carousel-container">
    <div class="carousel w-full">
      <div id="slide1" class="carousel-item relative w-full">
        <img src="https://images.unsplash.com/photo-1454942901704-3c44c11b2ad1" class="w-full" alt="Landscape" />
        <div class="absolute flex justify-between transform -translate-y-1/2 left-5 right-5 top-1/2">
          <a href="#slide4" class="btn btn-circle">❮</a> 
          <a href="#slide2" class="btn btn-circle">❯</a>
        </div>
      </div> 
      <div id="slide2" class="carousel-item relative w-full">
        <img src="https://images.unsplash.com/photo-1619441207978-3d326c46e2c9" class="w-full" alt="Landscape" />
        <div class="absolute flex justify-between transform -translate-y-1/2 left-5 right-5 top-1/2">
          <a href="#slide1" class="btn btn-circle">❮</a> 
          <a href="#slide3" class="btn btn-circle">❯</a>
        </div>
      </div> 
      <div id="slide3" class="carousel-item relative w-full">
        <img src="https://images.unsplash.com/photo-1506744038136-46273834b3fb" class="w-full" alt="Landscape" />
        <div class="absolute flex justify-between transform -translate-y-1/2 left-5 right-5 top-1/2">
          <a href="#slide2" class="btn btn-circle">❮</a> 
          <a href="#slide4" class="btn btn-circle">❯</a>
        </div>
      </div> 
      <div id="slide4" class="carousel-item relative w-full">
        <img src="https://images.unsplash.com/photo-1508739773434-c26b3d09e071" class="w-full" alt="Landscape" />
        <div class="absolute flex justify-between transform -translate-y-1/2 left-5 right-5 top-1/2">
          <a href="#slide3" class="btn btn-circle">❮</a> 
          <a href="#slide1" class="btn btn-circle">❯</a>
        </div>
      </div>
    </div>
    <div class="flex justify-center w-full py-2 gap-2">
      <a href="#slide1" class="btn btn-xs">1</a>
      <a href="#slide2" class="btn btn-xs">2</a>
      <a href="#slide3" class="btn btn-xs">3</a>
      <a href="#slide4" class="btn btn-xs">4</a>
    </div>
  </div>
</section>

<style>
  .carousel-container {
    width: 100%;
    max-width: 800px;
  }
  
  .carousel {
    position: relative;
    overflow: hidden;
  }
  
  .carousel-item {
    display: none;
    width: 100%;
  }
  
  .carousel-item:target {
    display: block;
  }
  
  .w-full {
    width: 100%;
  }
  
  .relative {
    position: relative;
  }
  
  .absolute {
    position: absolute;
  }
  
  .flex {
    display: flex;
  }
  
  .justify-between {
    justify-content: space-between;
  }
  
  .justify-center {
    justify-content: center;
  }
  
  .transform {
    transform: translateY(-50%);
  }
  
  .-translate-y-1\/2 {
    transform: translateY(-50%);
  }
  
  .left-5 {
    left: 1.25rem;
  }
  
  .right-5 {
    right: 1.25rem;
  }
  
  .top-1\/2 {
    top: 50%;
  }
  
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    cursor: pointer;
    border-radius: 0.5rem;
    border: 1px solid transparent;
    padding: 0.5rem 1rem;
    font-weight: 500;
    background-color: rgba(255, 255, 255, 0.7);
    color: #333;
  }
  
  .btn-circle {
    border-radius: 9999px;
    padding: 0.5rem;
    width: 2.5rem;
    height: 2.5rem;
  }
  
  .btn-xs {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
  }
  
  .py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
  
  .gap-2 {
    gap: 0.5rem;
  }
</style>