Windicss

Card List

Card Text

Page

Form

Footer

Button

Component

Card 3

This card has a footer and a button for interaction.

Last updated 5 mins ago Details

Card 3

This card has a footer and a button for interaction.

Last updated 5 mins ago Details

Card 3

This card has a footer and a button for interaction.

Last updated 5 mins ago Details

              
              

              <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
  <div class="flex flex-col">
    <div class="card h-full">
      <img src="https://dummyimage.com/700x400" class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card 3</h5>
        <p class="card-text">This card has a footer and a button for interaction.</p>
      </div>
      <div class="card-footer flex justify-between items-center">
        <small class="text-muted">Last updated 5 mins ago</small>
        <a href="#" class="btn btn-sm btn-outline-secondary">Details</a>
      </div>
    </div>
  </div>

  <div class="flex flex-col">
    <div class="card h-full">
      <img src="https://dummyimage.com/700x400" class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card 3</h5>
        <p class="card-text">This card has a footer and a button for interaction.</p>
      </div>
      <div class="card-footer flex justify-between items-center">
        <small class="text-muted">Last updated 5 mins ago</small>
        <a href="#" class="btn btn-sm btn-outline-secondary">Details</a>
      </div>
    </div>
  </div>

  <div class="flex flex-col">
    <div class="card h-full">
      <img src="https://dummyimage.com/700x400" class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card 3</h5>
        <p class="card-text">This card has a footer and a button for interaction.</p>
      </div>
      <div class="card-footer flex justify-between items-center">
        <small class="text-muted">Last updated 5 mins ago</small>
        <a href="#" class="btn btn-sm btn-outline-secondary">Details</a>
      </div>
    </div>
  </div>
</div>

Featured

Card 8

This card has a badge overlay on the image.

Card 8

This card has a badge overlay on the image.

Card 8

This card has a badge overlay on the image.

Card 3

A card with a vertical alignment for image and text.

Card 3

A card with a vertical alignment for image and text.

Card 3

A card with a vertical alignment for image and text.

                                  
                              
                              <div class="container py-5">
  <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
    <div class="flex flex-col">
      <div class="card h-full bg-light">
        <div class="card-body flex items-center">
          <div>
            <h5 class="card-title">Card 3</h5>
            <p class="card-text">A card with a vertical alignment for image and text.</p>
          </div>
          <img src="https://dummyimage.com/722x402" class="img-fluid rounded ml-3" style="width: 120px;" alt="...">
        </div>
      </div>
    </div>

    <div class="flex flex-col">
      <div class="card h-full bg-light">
        <div class="card-body flex items-center">
          <div>
            <h5 class="card-title">Card 3</h5>
            <p class="card-text">A card with a vertical alignment for image and text.</p>
          </div>
          <img src="https://dummyimage.com/722x402" class="img-fluid rounded ml-3" style="width: 120px;" alt="...">
        </div>
      </div>
    </div>

    <div class="flex flex-col">
      <div class="card h-full bg-light">
        <div class="card-body flex items-center">
          <div>
            <h5 class="card-title">Card 3</h5>
            <p class="card-text">A card with a vertical alignment for image and text.</p>
          </div>
          <img src="https://dummyimage.com/722x402" class="img-fluid rounded ml-3" style="width: 120px;" alt="...">
        </div>
      </div>
    </div>
  </div>
</div>

Card 4

A card with a list group to show details.

Item 1
Item 2
Item 3

Card 4

A card with a list group to show details.

Item 1
Item 2
Item 3

Card 4

A card with a list group to show details.

Item 1
Item 2
Item 3

                      
                      

                      <div class="container py-5">
  <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
    <div class="flex flex-col">
      <div class="card h-full">
        <div class="card-body">
          <h5 class="card-title">Card 4</h5>
          <p class="card-text">A card with a list group to show details.</p>
          <ul class="list-none p-0">
            <li class="py-2 px-4 border-b">Item 1</li>
            <li class="py-2 px-4 border-b">Item 2</li>
            <li class="py-2 px-4">Item 3</li>
          </ul>
        </div>
      </div>
    </div>

    <div class="flex flex-col">
      <div class="card h-full">
        <div class="card-body">
          <h5 class="card-title">Card 4</h5>
          <p class="card-text">A card with a list group to show details.</p>
          <ul class="list-none p-0">
            <li class="py-2 px-4 border-b">Item 1</li>
            <li class="py-2 px-4 border-b">Item 2</li>
            <li class="py-2 px-4">Item 3</li>
          </ul>
        </div>
      </div>
    </div>

    <div class="flex flex-col">
      <div class="card h-full">
        <div class="card-body">
          <h5 class="card-title">Card 4</h5>
          <p class="card-text">A card with a list group to show details.</p>
          <ul class="list-none p-0">
            <li class="py-2 px-4 border-b">Item 1</li>
            <li class="py-2 px-4 border-b">Item 2</li>
            <li class="py-2 px-4">Item 3</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

Card 23

This card includes a badge for notifications.

Notifications 5

New Comment
Friend Request
System Update

Card 23

This card includes a badge for notifications.

Notifications 5

New Comment
Friend Request
System Update

Card 23

This card includes a badge for notifications.

Notifications 5

New Comment
Friend Request
System Update

                      
                      
                      <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
  <div class="flex flex-col">
    <div class="card h-full">
      <div class="card-body">
        <h5 class="card-title">Card 23</h5>
        <p class="card-text">This card includes a badge for notifications.</p>
        <h6 class="mb-3">
          Notifications <span class="bg-red-500 text-white rounded-full px-2 py-1">5</span>
        </h6>
        <ul class="list-none p-0">
          <li class="py-2 px-4 border-b">New Comment</li>
          <li class="py-2 px-4 border-b">Friend Request</li>
          <li class="py-2 px-4">System Update</li>
        </ul>
      </div>
    </div>
  </div>

  <div class="flex flex-col">
    <div class="card h-full">
      <div class="card-body">
        <h5 class="card-title">Card 23</h5>
        <p class="card-text">This card includes a badge for notifications.</p>
        <h6 class="mb-3">
          Notifications <span class="bg-red-500 text-white rounded-full px-2 py-1">5</span>
        </h6>
        <ul class="list-none p-0">
          <li class="py-2 px-4 border-b">New Comment</li>
          <li class="py-2 px-4 border-b">Friend Request</li>
          <li class="py-2 px-4">System Update</li>
        </ul>
      </div>
    </div>
  </div>

  <div class="flex flex-col">
    <div class="card h-full">
      <div class="card-body">
        <h5 class="card-title">Card 23</h5>
        <p class="card-text">This card includes a badge for notifications.</p>
        <h6 class="mb-3">
          Notifications <span class="bg-red-500 text-white rounded-full px-2 py-1">5</span>
        </h6>
        <ul class="list-none p-0">
          <li class="py-2 px-4 border-b">New Comment</li>
          <li class="py-2 px-4 border-b">Friend Request</li>
          <li class="py-2 px-4">System Update</li>
        </ul>
      </div>
    </div>
  </div>
</div>

Card 25

A dark-themed card with an accordion.

This is the first item's accordion body.

This is the second item's accordion body.

Card 25

A dark-themed card with an accordion.

This is the first item's accordion body.

This is the second item's accordion body.

Card 25

A dark-themed card with an accordion.

This is the first item's accordion body.

This is the second item's accordion body.

                      
                      
                      <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
  <div class="flex flex-col">
    <div class="card h-full bg-gray-900 text-white">
      <div class="card-body">
        <h5 class="card-title">Card 25</h5>
        <p class="card-text">A dark-themed card with an accordion.</p>
        <div class="accordion" id="accordion25">
          <div class="accordion-item">
            <h2 class="accordion-header" id="headingOne">
              <button class="accordion-button bg-gray-800 text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                Accordion Item #1
              </button>
            </h2>
            <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordion25">
              <div class="accordion-body">
                This is the first item's accordion body.
              </div>
            </div>
          </div>
          <div class="accordion-item">
            <h2 class="accordion-header" id="headingTwo">
              <button class="accordion-button collapsed bg-gray-800 text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                Accordion Item #2
              </button>
            </h2>
            <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordion25">
              <div class="accordion-body">
                This is the second item's accordion body.
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="flex flex-col">
    <div class="card h-full bg-gray-900 text-white">
      <div class="card-body">
        <h5 class="card-title">Card 25</h5>
        <p class="card-text">A dark-themed card with an accordion.</p>
        <div class="accordion" id="accordion25">
          <div class="accordion-item">
            <h2 class="accordion-header" id="headingOne">
              <button class="accordion-button bg-gray-800 text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                Accordion Item #1
              </button>
            </h2>
            <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordion25">
              <div class="accordion-body">
                This is the first item's accordion body.
              </div>
            </div>
          </div>
          <div class="accordion-item">
            <h2 class="accordion-header" id="headingTwo">
              <button class="accordion-button collapsed bg-gray-800 text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                Accordion Item #2
              </button>
            </h2>
            <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordion25">
              <div class="accordion-body">
                This is the second item's accordion body.
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="flex flex-col">
    <div class="card h-full bg-gray-900 text-white">
      <div class="card-body">
        <h5 class="card-title">Card 25</h5>
        <p class="card-text">A dark-themed card with an accordion.</p>
        <div class="accordion" id="accordion25">
          <div class="accordion-item">
            <h2 class="accordion-header" id="headingOne">
              <button class="accordion-button bg-gray-800 text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                Accordion Item #1
              </button>
            </h2>
            <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordion25">
              <div class="accordion-body">
                This is the first item's accordion body.
              </div>
            </div>
          </div>
          <div class="accordion-item">
            <h2 class="accordion-header" id="headingTwo">
              <button class="accordion-button collapsed bg-gray-800 text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                Accordion Item #2
              </button>
            </h2>
            <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordion25">
              <div class="accordion-body">
                This is the second item's accordion body.
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Card 7

This card uses a table to organize information.

Feature	Details
Speed	Fast
Reliability	High

Card 7

This card uses a table to organize information.

Feature	Details
Speed	Fast
Reliability	High

Card 7

This card uses a table to organize information.

Feature	Details
Speed	Fast
Reliability	High

                      
                      
                      <div class="grid grid-cols-1 md:grid-cols-3 gap-4 py-5">
  <div class="col">
    <div class="card bg-light h-full">
      <div class="card-body">
        <h5 class="card-title">Card 7</h5>
        <p class="card-text">This card uses a table to organize information.</p>
        <table class="table-auto border-collapse border border-gray-300 w-full">
          <thead>
            <tr>
              <th class="border border-gray-300 px-4 py-2">Feature</th>
              <th class="border border-gray-300 px-4 py-2">Details</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td class="border border-gray-300 px-4 py-2">Speed</td>
              <td class="border border-gray-300 px-4 py-2">Fast</td>
            </tr>
            <tr>
              <td class="border border-gray-300 px-4 py-2">Reliability</td>
              <td class="border border-gray-300 px-4 py-2">High</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card bg-light h-full">
      <div class="card-body">
        <h5 class="card-title">Card 7</h5>
        <p class="card-text">This card uses a table to organize information.</p>
        <table class="table-auto border-collapse border border-gray-300 w-full">
          <thead>
            <tr>
              <th class="border border-gray-300 px-4 py-2">Feature</th>
              <th class="border border-gray-300 px-4 py-2">Details</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td class="border border-gray-300 px-4 py-2">Speed</td>
              <td class="border border-gray-300 px-4 py-2">Fast</td>
            </tr>
            <tr>
              <td class="border border-gray-300 px-4 py-2">Reliability</td>
              <td class="border border-gray-300 px-4 py-2">High</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card bg-light h-full">
      <div class="card-body">
        <h5 class="card-title">Card 7</h5>
        <p class="card-text">This card uses a table to organize information.</p>
        <table class="table-auto border-collapse border border-gray-300 w-full">
          <thead>
            <tr>
              <th class="border border-gray-300 px-4 py-2">Feature</th>
              <th class="border border-gray-300 px-4 py-2">Details</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td class="border border-gray-300 px-4 py-2">Speed</td>
              <td class="border border-gray-300 px-4 py-2">Fast</td>
            </tr>
            <tr>
              <td class="border border-gray-300 px-4 py-2">Reliability</td>
              <td class="border border-gray-300 px-4 py-2">High</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

Card Header

Card 8

This card uses a header and footer to frame its content.

Footer Text

Card Header

Card 8

This card uses a header and footer to frame its content.

Footer Text

Card Header

Card 8

This card uses a header and footer to frame its content.

Footer Text

                      
                      
                      <div class="grid grid-cols-1 md:grid-cols-3 gap-4 py-5">
  <div class="col">
    <div class="card h-full">
      <div class="card-header bg-blue-500 text-white text-center py-3">
        Card Header
      </div>
      <div class="card-body">
        <h5 class="card-title">Card 8</h5>
        <p class="card-text">This card uses a header and footer to frame its content.</p>
      </div>
      <div class="card-footer bg-gray-100 text-muted text-center py-3">
        Footer Text
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-full">
      <div class="card-header bg-blue-500 text-white text-center py-3">
        Card Header
      </div>
      <div class="card-body">
        <h5 class="card-title">Card 8</h5>
        <p class="card-text">This card uses a header and footer to frame its content.</p>
      </div>
      <div class="card-footer bg-gray-100 text-muted text-center py-3">
        Footer Text
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-full">
      <div class="card-header bg-blue-500 text-white text-center py-3">
        Card Header
      </div>
      <div class="card-body">
        <h5 class="card-title">Card 8</h5>
        <p class="card-text">This card uses a header and footer to frame its content.</p>
      </div>
      <div class="card-footer bg-gray-100 text-muted text-center py-3">
        Footer Text
      </div>
    </div>
  </div>
</div>

Our Team

Discover the amazing individuals behind our success, working together to make a difference.

John Doe

UI Developer

Creating seamless user experiences and innovative interfaces with a touch of creativity.

Jane Smith

Graphic Designer

Crafting stunning visual designs that inspire and captivate audiences worldwide.

Emily Brown

Software Engineer

Developing robust and scalable solutions to power innovative technologies.

                      
                      

                      <section class="bg-light py-12">
  <div class="container">
    <div class="text-center mb-12">
      <h1 class="text-3xl font-bold text-dark uppercase mb-4">Our Team</h1>
      <p class="text-lg text-muted">Discover the amazing individuals behind our success, working together to make a difference.</p>
    </div>
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
      <div class="flex items-center">
        <img src="https://dummyimage.com/200x200" alt="team member" class="rounded-full mr-4 w-24 h-24">
        <div>
          <h5 class="font-bold text-dark">John Doe</h5>
          <p class="text-muted mb-1">UI Developer</p>
          <p class="text-muted text-sm">Creating seamless user experiences and innovative interfaces with a touch of creativity.</p>
          <div class="flex">
            <a href="#" class="text-muted mr-3"><i class="bi bi-facebook"></i></a>
            <a href="#" class="text-muted mr-3"><i class="bi bi-twitter"></i></a>
            <a href="#" class="text-muted"><i class="bi bi-linkedin"></i></a>
          </div>
        </div>
      </div>
      <div class="flex items-center">
        <img src="https://dummyimage.com/201x201" alt="team member" class="rounded-full mr-4 w-24 h-24">
        <div>
          <h5 class="font-bold text-dark">Jane Smith</h5>
          <p class="text-muted mb-1">Graphic Designer</p>
          <p class="text-muted text-sm">Crafting stunning visual designs that inspire and captivate audiences worldwide.</p>
          <div class="flex">
            <a href="#" class="text-muted mr-3"><i class="bi bi-facebook"></i></a>
            <a href="#" class="text-muted mr-3"><i class="bi bi-twitter"></i></a>
            <a href="#" class="text-muted"><i class="bi bi-linkedin"></i></a>
          </div>
        </div>
      </div>
      <div class="flex items-center">
        <img src="https://dummyimage.com/204x204" alt="team member" class="rounded-full mr-4 w-24 h-24">
        <div>
          <h5 class="font-bold text-dark">Emily Brown</h5>
          <p class="text-muted mb-1">Software Engineer</p>
          <p class="text-muted text-sm">Developing robust and scalable solutions to power innovative technologies.</p>
          <div class="flex">
            <a href="#" class="text-muted mr-3"><i class="bi bi-facebook"></i></a>
            <a href="#" class="text-muted mr-3"><i class="bi bi-twitter"></i></a>
            <a href="#" class="text-muted"><i class="bi bi-linkedin"></i></a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

NOBALISH

We provide the best services for your business growth. Let us help you reach new heights.

                      
                      
                      <div class="container-fluid w-full">
  <div class="grid grid-cols-1 md:grid-cols-2 items-center">
    <div>
      <h2 class="text-4xl mb-4">NOBALISH</h2>
      <p>We provide the best services for your business growth. Let us help you reach new heights.</p>
    </div>
    <div>
      <img src="https://dummyimage.com/722x402" class="w-full h-auto" alt="Image">
    </div>
  </div>
</div>

Innovative Solutions

Discover cutting-edge solutions for your business challenges. Let us help you stay ahead in a competitive world.

Trusted by top companies

                      
                      
                      <div class="container-fluid w-full">
  <div class="flex flex-wrap items-center py-12 bg-gray-100">
    <div class="w-full md:w-1/2 mb-8 md:mb-0">
      <h3 class="text-4xl font-semibold text-blue-600 mb-6">Innovative Solutions</h3>
      <p class="mb-6">Discover cutting-edge solutions for your business challenges. Let us help you stay ahead in a competitive world.</p>
      <div class="flex items-center">
        <i class="fas fa-check-circle text-green-500 mr-2"></i>
        <span>Trusted by top companies</span>
      </div>
    </div>
    <div class="w-full md:w-1/2">
      <img src="https://dummyimage.com/722x402" class="w-full h-auto" alt="Image">
    </div>
  </div>
</div>

Discover cutting-edge solutions .

Discover cutting-edge solutions for your business challenges. Let us help you stay ahead in a competitive world.

                      
                      
                      <section class="py-12">
  <div class="container mx-auto">
    <div class="flex flex-wrap items-center">
      <div class="w-full md:w-1/2 text-center md:text-left mb-8 md:mb-0">
        <h1 class="text-4xl font-bold text-gray-900 mb-6">
          Discover cutting-edge solutions.
          <br class="hidden lg:inline-block">
        </h1>
        <p class="text-lg text-gray-600 mb-6">Discover cutting-edge solutions for your business challenges. Let us help you stay ahead in a competitive world.</p>
        <button class="bg-blue-600 text-white px-6 py-3 rounded-lg text-lg">Button</button>
        <button class="border-2 border-gray-400 text-gray-700 px-6 py-3 rounded-lg text-lg ml-3">Button</button>
      </div>
      <div class="w-full md:w-1/2">
        <img class="w-full rounded-lg" alt="hero" src="https://dummyimage.com/720x600">
      </div>
    </div>
  </div>
</section>

Modern Features Showcase

Explore a range of cutting-edge features designed to elevate your experience.

Innovative Design

Seamless Integration

Enhanced Usability

Reliable Performance

Customizable Options

Scalable Solutions

                      
                      
                      <section class="py-5">
  <div class="container">
    <div class="row items-center">
      <div class="col-12 md:w-1/2 text-center md:text-left mb-4 md:mb-0">
        <div class="py-5">
          <div class="text-center mb-5">
            <h1 class="text-4xl font-bold text-primary mb-4">Modern Features Showcase</h1>
            <p class="text-lg text-muted">Explore a range of cutting-edge features designed to elevate your experience.</p>
          </div>
          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div class="flex items-center bg-light p-3 rounded">
              <i class="bi bi-check-circle-fill text-primary text-2xl mr-3"></i>
              <span class="font-medium">Innovative Design</span>
            </div>
            <div class="flex items-center bg-light p-3 rounded">
              <i class="bi bi-check-circle-fill text-primary text-2xl mr-3"></i>
              <span class="font-medium">Seamless Integration</span>
            </div>
            <div class="flex items-center bg-light p-3 rounded">
              <i class="bi bi-check-circle-fill text-primary text-2xl mr-3"></i>
              <span class="font-medium">Enhanced Usability</span>
            </div>
            <div class="flex items-center bg-light p-3 rounded">
              <i class="bi bi-check-circle-fill text-primary text-2xl mr-3"></i>
              <span class="font-medium">Reliable Performance</span>
            </div>
            <div class="flex items-center bg-light p-3 rounded">
              <i class="bi bi-check-circle-fill text-primary text-2xl mr-3"></i>
              <span class="font-medium">Customizable Options</span>
            </div>
            <div class="flex items-center bg-light p-3 rounded">
              <i class="bi bi-check-circle-fill text-primary text-2xl mr-3"></i>
              <span class="font-medium">Scalable Solutions</span>
            </div>
          </div>
        </div>
      </div>
      <div class="col-12 md:w-1/2">
        <img class="w-full rounded" alt="hero" src="https://dummyimage.com/720x600">
      </div>
    </div>
  </div>
</section>

Innovative Tech Solutions

Providing cutting-edge solutions to everyday challenges through technology and design.

100

text 1

200

text 2

300

text 3

400

text 4

500

text 5

600

text 6

700

text 7

800

text 8

                      
                      
                      <section class="text-muted">
  <div class="container py-5 flex flex-wrap">
    <div class="flex flex-wrap mb-3 mb-lg-0 lg:w-1/2 md:w-2/3 pr-lg-5">
      <div class="w-full mb-4">
        <h1 class="text-3xl mb-2 text-dark">Innovative Tech Solutions</h1>
        <p class="text-lg">Providing cutting-edge solutions to everyday challenges through technology and design.</p>
      </div>
      
      <div class="w-1/2 sm:w-1/3 lg:w-1/4 mb-4">
        <h2 class="text-2xl text-dark">100</h2>
        <p>text 1</p>
      </div>
      <div class="w-1/2 sm:w-1/3 lg:w-1/4 mb-4">
        <h2 class="text-2xl text-dark">200</h2>
        <p>text 2</p>
      </div>
      <div class="w-1/2 sm:w-1/3 lg:w-1/4 mb-4">
        <h2 class="text-2xl text-dark">300</h2>
        <p>text 3</p>
      </div>
      <div class="w-1/2 sm:w-1/3 lg:w-1/4 mb-4">
        <h2 class="text-2xl text-dark">400</h2>
        <p>text 4</p>
      </div>
      <div class="w-1/2 sm:w-1/3 lg:w-1/4 mb-4">
        <h2 class="text-2xl text-dark">500</h2>
        <p>text 5</p>
      </div>
      <div class="w-1/2 sm:w-1/3 lg:w-1/4 mb-4">
        <h2 class="text-2xl text-dark">600</h2>
        <p>text 6</p>
      </div>
      <div class="w-1/2 sm:w-1/3 lg:w-1/4 mb-4">
        <h2 class="text-2xl text-dark">700</h2>
        <p>text 7</p>
      </div>
      <div class="w-1/2 sm:w-1/3 lg:w-1/4 mb-4">
        <h2 class="text-2xl text-dark">800</h2>
        <p>text 8</p>
      </div>
    </div>
    <div class="lg:w-1/2 sm:w-2/3 w-full rounded-lg overflow-hidden mt-4 mt-lg-0">
      <img class="w-full h-auto" src="https://dummyimage.com/600x300" alt="statistic image">
    </div>
  </div>
</section>

Create and customize your design system
Leverage utilities for rapid development
From beginner to production-ready skills

                      
                      
                      <div class="w-full flex flex-col justify-center items-center bg-light py-6" style="background-image: url('https://picsum.photos/id/1018/1000'); background-size: cover; background-position: center;">
  <div class="container">
    <div class="card bg-white shadow-lg rounded-3 p-4" style="backdrop-filter: blur(20px);">
      <div class="card-body text-center">
        <div class="mb-4">
          <img src="https://dummyimage.com/722x402" class="w-full max-h-[100px]" alt="Bootstrap Logo">
        </div>
        <div class="border-t pt-4">
          <div class="mb-4">
            <ul class="list-none mb-8">
              <li class="flex items-start mb-3">
                <i class="bi bi-check-circle-fill text-primary me-2"></i>
                <span>Create and customize your design system</span>
              </li>
              <li class="flex items-start mb-3">
                <i class="bi bi-check-circle-fill text-primary me-2"></i>
                <span>Leverage utilities for rapid development</span>
              </li>
              <li class="flex items-start mb-3">
                <i class="bi bi-check-circle-fill text-primary me-2"></i>
                <span>From beginner to production-ready skills</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

                      
                      
                      <div class="flex items-center justify-center bg-gradient-to-br from-[#e0f7fa] via-[#80deea] to-[#26c6da]">
  <div class="w-full mx-auto bg-white rounded-lg shadow p-4 max-w-[600px]">
    <div class="text-center mb-4">
      <img src="https://dummyimage.com/722x402" class="w-full mb-3" alt="Placeholder Logo" />
    </div>

    <div class="mb-4">
      <h5 class="text-dark">Need innovative design frameworks?</h5>
      <p>
        <a href="/new-path/free-components" class="text-info no-underline">Discover unique tools →</a>
      </p>
    </div>

    <div class="mb-4">
      <h5 class="text-dark">Searching for cutting-edge platforms?</h5>
      <p>
        <a href="/new-path/premium-themes" class="text-info no-underline">Explore advanced systems →</a>
      </p>
    </div>

    <div class="mb-4">
      <h5 class="text-dark">Looking for a quick-start guide?</h5>
      <p>
        <a href="/new-path/cheatsheet" class="text-info no-underline">Find comprehensive insights →</a>
      </p>
    </div>

    <div class="mb-4">
      <h5 class="text-dark">Want to elevate your expertise?</h5>
      <p>
        <a href="/new-path/docs" class="text-info no-underline">Access professional resources →</a>
      </p>
    </div>

    <a href="/new-path/home" class="btn btn-info w-full text-white">
      Return to Next-Gen Solutions
    </a>
  </div>
</div>

Event Starting Soon

Join us for an exciting Saturday!

Start Time: 9:00 AM

Day

Hour

Min

Second

                      
                      
                      <section class="py-8 bg-gradient-to-r from-indigo-500 to-indigo-700 dark:bg-gray-800 md:py-16">
  <div class="container max-w-5xl px-5 mx-auto">
    <div class="flex flex-col items-center mx-n5 md:flex-row">
      <div class="w-full px-5 mb-5 text-center md:mb-0 md:text-left">
        <h6 class="text-xs font-semibold text-indigo-800 uppercase md:text-base dark:text-gray-100">
          Event Starting Soon
        </h6>
        <h3 class="mx-2 text-2xl font-bold text-white md:text-4xl">
          Join us for an exciting Saturday!
        </h3>
        <h3 class="mt-4 text-lg font-bold text-white md:text-xl">
          Start Time: 9:00 AM
        </h3>
      </div>
      <div class="w-full px-5 md:w-auto">
        <div class="flex justify-center text-center text-white">
          <div class="w-20 py-3 mx-2 border rounded-lg md:w-24 md:py-4 bg-white bg-opacity-10 border-light">
            <div class="text-2xl font-semibold md:text-3xl">
              <span>0</span><span>2</span>
            </div>
            <div class="mt-3 text-xs uppercase opacity-75">
              Day
            </div>
          </div>
          <div class="w-20 py-3 mx-2 border rounded-lg md:w-24 md:py-4 bg-white bg-opacity-10 border-light">
            <div class="text-2xl font-semibold md:text-3xl">
              <span>0</span><span>9</span>
            </div>
            <div class="mt-3 text-xs uppercase opacity-75">
              Hour
            </div>
          </div>
          <div class="w-20 py-3 mx-2 border rounded-lg md:w-24 md:py-4 bg-white bg-opacity-10 border-light">
            <div class="text-2xl font-semibold md:text-3xl">
              <span>0</span><span>0</span>
            </div>
            <div class="mt-3 text-xs uppercase opacity-75">
              Min
            </div>
          </div>
          <div class="w-20 py-3 mx-2 border rounded-lg md:w-24 md:py-4 bg-white bg-opacity-10 border-light">
            <div class="text-2xl font-semibold md:text-3xl">
              <span>0</span><span>0</span>
            </div>
            <div class="mt-3 text-xs uppercase opacity-75">
              Second
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Feedback Overview

Extremely Happy

Many people felt very positive about the service, with a majority expressing satisfaction.

80%

Some users were less satisfied with certain aspects of the product, especially regarding usability.

60%

There were a few complaints about delivery times and product quality, but these were in the minority.

40%

Our team is reviewing all the feedback to identify key areas for improvement. We appreciate all the insights provided and will work towards making necessary enhancements. Thank you for your input!

                      
                      
                      <section class="flex flex-col lg:flex-row m-4 p-2 md:p-5">
  <div class="w-full p-2 md:p-6 bg-light rounded shadow">
    <h4 class="text-xl font-bold">Feedback Overview</h4>
    <div class="flex flex-wrap gap-4 m-2 mt-5">
      <div class="text-sm">
        <span class="bg-green-500 inline-block w-3 h-3 mr-2 align-middle"></span>
        Extremely Happy
      </div>
    </div>
    <div class="mt-5">
      <div class="flex flex-col md:flex-row items-center">
        <div class="w-full md:w-1/3 p-3">
          Many people felt very positive about the service, with a majority expressing satisfaction.
        </div>
        <div class="flex w-full md:w-2/3 min-h-[60px]">
          <span class="rounded-l p-3 text-center align-middle mr-1 bg-green-500 w-1/2 text-white">80%</span>
        </div>
      </div>
      <div class="flex flex-col md:flex-row items-center mt-4">
        <div class="w-full md:w-1/3 p-3">
          Some users were less satisfied with certain aspects of the product, especially regarding usability.
        </div>
        <div class="flex w-full md:w-2/3 min-h-[60px]">
          <span class="rounded-l p-3 text-center align-middle mr-1 bg-green-500 w-3/5 text-white">60%</span>
        </div>
      </div>
      <div class="flex flex-col md:flex-row items-center mt-4">
        <div class="w-full md:w-1/3 p-3">
          There were a few complaints about delivery times and product quality, but these were in the minority.
        </div>
        <div class="flex w-full md:w-2/3 min-h-[60px]">
          <span class="rounded-l p-3 text-center align-middle mr-1 bg-green-500 w-2/5 text-white">40%</span>
        </div>
      </div>
    </div>
    <p class="text-sm text-muted my-5 px-3">
      Our team is reviewing all the feedback to identify key areas for improvement. We appreciate all the insights provided and will work towards making necessary enhancements. Thank you for your input!
    </p>
  </div>
</section>

Recent Announcements

Updated Interface Design 05 / 10 / 2023

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed laoreet libero. Integer pretium tortor ut nulla condimentum.
5,000 New Job Listings 10 / 12 / 2023

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed laoreet libero. Integer pretium tortor ut nulla condimentum.
Top Companies Hiring 30 / 09 / 2023

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed laoreet libero. Integer pretium tortor ut nulla condimentum.

                      
                      
                      <h3 class="text-4xl text-dark font-bold mb-12 ml-3">Recent Announcements</h3>
<ol class="list-none">
  <li class="border-l-4">
    <div class="flex items-start">
      <div class="bg-primary w-6 h-6 flex justify-center items-center rounded-full mr-3">
        <svg aria-hidden="true" focusable="false" data-prefix="fas" class="text-white w-3 h-3" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
          <path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200z"></path>
        </svg>
      </div>
      <div class="p-4 rounded-lg shadow bg-light mb-4">
        <div class="flex justify-between mb-3">
          <a href="#" class="text-primary font-medium">Updated Interface Design</a>
          <a href="#" class="text-primary font-medium">05 / 10 / 2023</a>
        </div>
        <p class="text-dark mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed laoreet libero. Integer pretium tortor ut nulla condimentum.</p>
        <button type="button" class="btn btn-primary text-sm">Learn More</button>
        <button type="button" class="btn btn-outline-primary text-sm">Try Demo</button>
      </div>
    </div>
  </li>
  <li class="border-l-4">
    <div class="flex items-start">
      <div class="bg-success w-6 h-6 flex justify-center items-center rounded-full mr-3">
        <svg aria-hidden="true" focusable="false" data-prefix="fas" class="text-white w-3 h-3" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
        <path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200z"></path>
        </svg>
      </div>
      <div class="p-4 rounded-lg shadow bg-light mb-4">
        <div class="flex justify-between mb-3">
          <a href="#" class="text-primary font-medium">5,000 New Job Listings</a>
          <a href="#" class="text-primary font-medium">10 / 12 / 2023</a>
        </div>
        <p class="text-dark mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed laoreet libero. Integer pretium tortor ut nulla condimentum.</p>
        <button type="button" class="btn btn-primary text-sm">Explore More</button>
        <button type="button" class="btn btn-outline-primary text-sm">View Demo</button>
      </div>
    </div>
  </li>
  <li class="border-l-4">
    <div class="flex items-start">
      <div class="bg-info w-6 h-6 flex justify-center items-center rounded-full mr-3">
        <svg aria-hidden="true" focusable="false" data-prefix="fas" class="text-white w-3 h-3" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
        <path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200z"></path>
        </svg>
      </div>
      <div class="p-4 rounded-lg shadow bg-light mb-4">
        <div class="flex justify-between mb-3">
          <a href="#" class="text-primary font-medium">Top Companies Hiring</a>
          <a href="#" class="text-primary font-medium">30 / 09 / 2023</a>
        </div>
        <p class="text-dark mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed laoreet libero. Integer pretium tortor ut nulla condimentum.</p>
        <button type="button" class="btn btn-primary text-sm">Learn More</button>
        <button type="button" class="btn btn-outline-primary text-sm">See Demo</button>
      </div>
    </div>
  </li>
</ol>

We have solutions

Something Asked Questions

See what others often inquire about!

What is Bootstrap?

Bootstrap is a popular front-end framework that helps developers create beautiful, responsive websites quickly. It's filled with pre-styled components and tools to ease the web design process.

Can Bootstrap be used with React?

Absolutely! Bootstrap can be easily integrated with React to enhance the UI with responsive design elements and ready-to-use components.

What makes Bootstrap so popular?

Bootstrap's popularity is due to its easy-to-use grid system, reusable components, and extensive documentation. It helps developers quickly build well-structured and responsive websites.

Made with Bootstrap by Bootstrap Team.

                      
                      
                      <div class="flex items-center justify-center">
  <section class="px-5">
    <div class="mb-5 text-center">
      <h3 class="font-semibold mb-4 mt-5 text-2xl text-dark">We have solutions</h3>
      <h1 class="font-bold my-4 text-4xl text-dark">Something Asked Questions</h1>
      <p class="my-4 mx-auto text-lg text-muted">See what others often inquire about!</p>
    </div>
    <div class="grid grid-cols-1 lg:grid-cols-2 lg:gap-8">
      <div class="col-span-1 lg:col-span-2">
        <h5 class="mt-4 mb-2 font-semibold text-dark">What is Bootstrap?</h5>
        <div class="text-muted mb-4">
          Bootstrap is a popular front-end framework that helps developers create beautiful, responsive websites quickly. It's filled with pre-styled components and tools to ease the web design process.
        </div>
        <hr class="my-5">
        <h5 class="mt-4 mb-2 font-semibold text-dark">Can Bootstrap be used with React?</h5>
        <div class="text-muted mb-4">
          Absolutely! Bootstrap can be easily integrated with React to enhance the UI with responsive design elements and ready-to-use components.
        </div>
        <hr class="my-5">
        <h5 class="mt-4 mb-2 font-semibold text-dark">What makes Bootstrap so popular?</h5>
        <div class="text-muted mb-4">
          Bootstrap's popularity is due to its easy-to-use grid system, reusable components, and extensive documentation. It helps developers quickly build well-structured and responsive websites.
        </div>
      </div>
    </div>
    <div class="w-full pt-3 px-4 mb-5 text-center">
      <div class="text-muted text-sm">
        Made with <a class="font-semibold" href="/" target="_blank">Bootstrap</a> by <a href="#" class="font-semibold" target="_blank">Bootstrap Team</a>.
      </div>
    </div>
  </section>
</div>

NEW TOPIC

New Developments in the Tech World

The latest trends and innovations in the tech industry are transforming businesses.

12/30/2024 10:00 AM EDT

The tech industry has seen remarkable growth this year, with major advancements in artificial intelligence, cloud computing, and quantum technology.

Companies across the globe are investing heavily in these technologies, driving innovation and competition. Major players like Apple, Google, and Microsoft have unveiled new products aimed at revolutionizing how we work, communicate, and live.

AI applications are now widely used in healthcare, finance, and customer service. These developments promise to improve efficiency and productivity while also raising concerns about data privacy and job displacement.

Cloud services continue to expand, with many companies opting for hybrid and multi-cloud strategies to meet their needs. The shift towards remote work has accelerated the demand for scalable and secure cloud solutions.

                      
                      
                      <div class="w-full md:w-1/2 mx-auto">
  <div class="mx-4 my-3 text-sm">
    <a href="#" class="text-red-500 font-bold uppercase">NEW TOPIC</a>
  </div>
  <div class="w-full text-dark text-4xl px-4 font-bold">
    New Developments in the Tech World
  </div>
  
  <div class="w-full text-muted px-4 pb-4 pt-2">
    The latest trends and innovations in the tech industry are transforming businesses.
  </div>
  

  
  <div class="w-full text-muted mx-4">
    <p class="border-b py-3">12/30/2024 10:00 AM EDT</p>
  </div>
  
  <div class="px-4 w-full mx-auto mt-8">
    <p class="my-1">The tech industry has seen remarkable growth this year, with major advancements in artificial intelligence, cloud computing, and quantum technology.</p>
    <p class="my-1">Companies across the globe are investing heavily in these technologies, driving innovation and competition. Major players like Apple, Google, and Microsoft have unveiled new products aimed at revolutionizing how we work, communicate, and live.</p>
    <p class="my-1">AI applications are now widely used in healthcare, finance, and customer service. These developments promise to improve efficiency and productivity while also raising concerns about data privacy and job displacement.</p>
    <p class="my-1">Cloud services continue to expand, with many companies opting for hybrid and multi-cloud strategies to meet their needs. The shift towards remote work has accelerated the demand for scalable and secure cloud solutions.</p>
  </div>
</div>

What we do at our company:

01.

Investigation

We analyze data and insights, and take the time to understand your business goals. We ask the right questions to learn about your objectives.
02.

Planning

We develop strategies based on thorough research and strong planning to help you achieve success with data-driven decisions.
03.

Creative

We design intuitive and user-friendly interfaces that look great and are easy to maintain, perfectly suited for your business needs.
04.

Building

Our development process focuses on building solutions that not only work, but provide an excellent user experience and are simple to manage.
05.

Launching

We make sure everything is ready to go, providing smooth deployments that ensure your product reaches the right audience effectively.
06.

Launching

We make sure everything is ready to go, providing smooth deployments that ensure your product reaches the right audience effectively.

                      
                      
                      <div class="p-4 text-gray-500">
  <h1 class="mb-8 text-center text-3xl font-bold text-blue-600">What we do at our company:</h1>
  <ul class="flex justify-center flex-wrap gap-4">
    <li class="flex">
      <div class="px-4 text-3xl font-light text-teal-500">01.</div>
      <div>
        <div class="text-2xl font-bold text-gray-900">Investigation</div>
        <p class="max-w-xs py-2 text-gray-500">We analyze data and insights, and take the time to understand your business goals. We ask the right questions to learn about your objectives.</p>
      </div>
    </li>
    <li class="flex">
      <div class="px-4 text-3xl font-light text-teal-500">02.</div>
      <div>
        <div class="text-2xl font-bold text-gray-900">Planning</div>
        <p class="max-w-xs py-2 text-gray-500">We develop strategies based on thorough research and strong planning to help you achieve success with data-driven decisions.</p>
      </div>
    </li>
    <li class="flex">
      <div class="px-4 text-3xl font-light text-teal-500">03.</div>
      <div>
        <div class="text-2xl font-bold text-gray-900">Creative</div>
        <p class="max-w-xs py-2 text-gray-500">We design intuitive and user-friendly interfaces that look great and are easy to maintain, perfectly suited for your business needs.</p>
      </div>
    </li>
    <li class="flex">
      <div class="px-4 text-3xl font-light text-teal-500">04.</div>
      <div>
        <div class="text-2xl font-bold text-gray-900">Building</div>
        <p class="max-w-xs py-2 text-gray-500">Our development process focuses on building solutions that not only work, but provide an excellent user experience and are simple to manage.</p>
      </div>
    </li>
    <li class="flex">
      <div class="px-4 text-3xl font-light text-teal-500">05.</div>
      <div>
        <div class="text-2xl font-bold text-gray-900">Launching</div>
        <p class="max-w-xs py-2 text-gray-500">We make sure everything is ready to go, providing smooth deployments that ensure your product reaches the right audience effectively.</p>
      </div>
    </li>
    <li class="flex">
      <div class="px-4 text-3xl font-light text-teal-500">06.</div>
      <div>
        <div class="text-2xl font-bold text-gray-900">Launching</div>
        <p class="max-w-xs py-2 text-gray-500">We make sure everything is ready to go, providing smooth deployments that ensure your product reaches the right audience effectively.</p>
      </div>
    </li>
  </ul>
</div>

Pricing Plans

Choose the best plan for our service. Each plan has different features and benefits.

*Prices are monthly

Basic Plan

¥500/month

Basic Features
Support Included

Team Plan

¥1500/month

Team Features
24/7 Support
Multiple Account Management

Pro Plan

¥3500/month

Advanced Features
Dedicated Support
Priority Access
Additional Benefits

                      
                      

                      <div class="bg-gray-100 px-5 py-5">
  <div class="w-full mx-auto bg-white px-5 py-10 text-gray-600 mb-10">
    <div class="max-w-5xl mx-auto md:flex">
      <div class="md:w-1/4 md:flex md:flex-col">
        <div class="text-left w-full flex-grow md:pr-5">
          <h1 class="text-4xl font-bold mb-5">Pricing Plans</h1>
          <h3 class="text-md font-medium mb-5">Choose the best plan for our service. Each plan has different features and benefits.</h3>
        </div>
        <div class="w-full mb-2">
          <p class="text-xs">*Prices are monthly</p>
        </div>
      </div>
      <div class="md:w-3/4">
        <div class="max-w-4xl mx-auto md:flex">
          <div class="w-full md:w-1/3 md:max-w-none bg-white px-8 md:px-10 py-8 md:py-10 mb-3 mx-auto md:my-2 rounded-md shadow-lg shadow-gray-600 md:flex md:flex-col">
            <div class="w-full flex-grow">
              <h2 class="text-center font-bold uppercase mb-4">Basic Plan</h2>
              <h3 class="text-center font-bold text-4xl mb-5">¥500<span class="text-sm">/month</span></h3>
              <ul class="text-sm mb-8">
                <li class="leading-tight"><i class="mdi mdi-check-bold text-lg"></i> Basic Features</li>
                <li class="leading-tight"><i class="mdi mdi-check-bold text-lg"></i> Support Included</li>
              </ul>
            </div>
            <div class="w-full">
              <button class="font-bold bg-gray-600 hover:bg-gray-700 text-white rounded-md px-10 py-2 transition-colors w-full">Buy Now</button>
            </div>
          </div>
          <div class="w-full md:w-1/3 md:max-w-none bg-white px-8 md:px-10 py-8 md:py-10 mb-3 mx-auto md:-mx-3 md:mb-0 rounded-md shadow-lg shadow-gray-600 md:relative md:z-50 md:flex md:flex-col">
            <div class="w-full flex-grow">
              <h2 class="text-center font-bold uppercase mb-4">Team Plan</h2>
              <h3 class="text-center font-bold text-4xl md:text-5xl mb-5">¥1500<span class="text-sm">/month</span></h3>
              <ul class="text-sm mb-8">
                <li class="leading-tight"><i class="mdi mdi-check-bold text-lg"></i> Team Features</li>
                <li class="leading-tight"><i class="mdi mdi-check-bold text-lg"></i> 24/7 Support</li>
                <li class="leading-tight"><i class="mdi mdi-check-bold text-lg"></i> Multiple Account Management</li>
              </ul>
            </div>
            <div class="w-full">
              <button class="font-bold bg-gray-600 hover:bg-gray-700 text-white rounded-md px-10 py-2 transition-colors w-full">Buy Now</button>
            </div>
          </div>
          <div class="w-full md:w-1/3 md:max-w-none bg-white px-8 md:px-10 py-8 md:py-10 mb-3 mx-auto md:my-2 rounded-md shadow-lg shadow-gray-600 md:flex md:flex-col">
            <div class="w-full flex-grow">
              <h2 class="text-center font-bold uppercase mb-4">Pro Plan</h2>
              <h3 class="text-center font-bold text-4xl mb-5">¥3500<span class="text-sm">/month</span></h3>
              <ul class="text-sm mb-8">
                <li class="leading-tight"><i class="mdi mdi-check-bold text-lg"></i> Advanced Features</li>
                <li class="leading-tight"><i class="mdi mdi-check-bold text-lg"></i> Dedicated Support</li>
                <li class="leading-tight"><i class="mdi mdi-check-bold text-lg"></i> Priority Access</li>
                <li class="leading-tight"><i class="mdi mdi-check-bold text-lg"></i> Additional Benefits</li>
              </ul>
            </div>
            <div class="w-full">
              <button class="font-bold bg-gray-600 hover:bg-gray-700 text-white rounded-md px-10 py-2 transition-colors w-full">Buy Now</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Nobalish

Join Now

Innovative Design

Explore a range of cutting-edge features designed to elevate your experience.

Solutions

Providing cutting-edge solutions to everyday challenges through technology and design.

Innovative Tech

Discover the amazing individuals behind our success, working together to make a difference.

Create Account

Fill in the details below to create your account.

                      
                      
                      <div class="bg-white pb-12">
  <div class="container px-4">
    <div class="flex justify-between items-center py-4">
      <a href="/" class="flex items-center gap-2.5 text-2xl font-bold text-dark">
        Nobalish
      </a>
      <nav class="hidden lg:flex gap-12">
        <a href="#" class="text-lg font-semibold text-muted transition duration-100 hover:text-indigo-500 active:text-indigo-700">Dashboard</a>
        <a href="#" class="inline-flex items-center gap-1 text-lg font-semibold text-indigo-500">
          News
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-dark" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M7 7l5 5-5 5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </a>
        <a href="#" class="text-lg font-semibold text-muted transition duration-100 hover:text-indigo-500 active:text-indigo-700">Plans</a>
        <a href="#" class="text-lg font-semibold text-muted transition duration-100 hover:text-indigo-500 active:text-indigo-700">Contact</a>
      </nav>
      <div class="ml-3 hidden sm:flex flex-col gap-2.5 sm:flex-row justify-center">
        <a href="#" class="btn btn-indigo btn-sm text-white">Join Now</a>
      </div>

      <button type="button" class="inline-flex items-center gap-2 rounded-lg bg-light px-2.5 py-2 text-sm font-semibold text-muted ring-indigo-300 hover:bg-gray-300 focus-visible:ring">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 20 20" fill="currentColor">
          <path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h6a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd" />
        </svg>
        Menu
      </button>
    </div>
    <div class="hidden lg:block w-full bg-light border rounded-lg shadow-sm">
      <div class="container flex max-w-screen-lg gap-8 p-8">
        <div class="w-2/3">
          <a href="#" class="group flex gap-4 mb-4">
            <div class="flex justify-center items-center rounded-lg bg-indigo-500 text-white shadow-lg transition duration-100 group-hover:bg-indigo-600 group-active:bg-indigo-700" style="height: 48px; width: 48px;">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 2v20m10-10H2" />
              </svg>
            </div>
            <div>
              <div class="font-semibold mb-1">Innovative Design</div>
              <p class="text-sm text-muted">Explore a range of cutting-edge features designed to elevate your experience.</p>
            </div>
          </a>
          <a href="#" class="group flex gap-4 mb-4">
            <div class="flex justify-center items-center rounded-lg bg-indigo-500 text-white shadow-lg transition duration-100 group-hover:bg-indigo-600 group-active:bg-indigo-700" style="height: 48px; width: 48px;">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
              </svg>
            </div>
            <div>
              <div class="font-semibold mb-1">Solutions</div>
              <p class="text-sm text-muted">Providing cutting-edge solutions to everyday challenges through technology and design.</p>
            </div>
          </a>
          <a href="#" class="group flex gap-4 mb-4">
            <div class="flex justify-center items-center rounded-lg bg-indigo-500 text-white shadow-lg transition duration-100 group-hover:bg-indigo-600 group-active:bg-indigo-700" style="height: 48px; width: 48px;">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z" />
              </svg>
            </div>
            <div>
              <div class="font-semibold mb-1">Innovative Tech</div>
              <p class="text-sm text-muted">Discover the amazing individuals behind our success, working together to make a difference.</p>
            </div>
          </a>
          <a href="#" class="group flex gap-4 mb-4">
            <div class="flex justify-center items-center rounded-lg bg-indigo-500 text-white shadow-lg transition duration-100 group-hover:bg-indigo-600 group-active:bg-indigo-700" style="height: 48px; width: 48px;">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                <path d="M12 3V7H8V3H12zM3 7H7V3H3V7zM7 17H3V13H7V17zM13 7H17V3H13V7zM17 13H13V17H17V13z" />
              </svg>
            </div>
            <div>
              <div class="font-semibold mb-1">Create Account</div>
              <p class="text-sm text-muted">Fill in the details below to create your account.</p>
            </div>
          </a>
        </div>
      </div>
    </div>
  </div>
</div>

credit card

Credit Card Number

Expiration Date

Security Code

                      
                      
                      <div class="flex items-center justify-center bg-gradient-to-br from-blue-500 to-purple-700 text-white">
    <div class="w-full max-w-md p-4 mx-auto bg-white rounded-lg shadow-lg">
        <div class="mx-auto mb-4">
            <div class="mb-3">
                <label for="name" class="block text-sm font-medium text-gray-700">Credit Card</label>
                <input type="text" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500" id="name" placeholder="Full Name" />
            </div>
            <div class="mb-3">
                <label for="cardNumber" class="block text-sm font-medium text-gray-700">Credit Card Number</label>
                <input type="text" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500" id="cardNumber" placeholder="1234 5678 9012 3456" maxlength="19" />
            </div>
            <div class="flex space-x-4">
                <div class="w-2/3 mb-3">
                    <label for="expiryDate" class="block text-sm font-medium text-gray-700">Expiration Date</label>
                    <input type="text" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500" id="expiryDate" placeholder="MM/YY" maxlength="5" pattern="\d{2}/\d{2}" />
                </div>
                <div class="w-1/3 mb-3">
                    <label for="cvv" class="block text-sm font-medium text-gray-700">Security Code</label>
                    <input type="text" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500" id="cvv" placeholder="123" maxlength="3" pattern="\d{3}" />
                </div>
            </div>
            <button class="w-full mt-4 px-6 py-2 bg-gray-800 text-white font-semibold rounded-md hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500">Complete Purchase</button>
        </div>
    </div>
</div>

Create Account

Fill in the details below to create your account.

Created using Nobalish.

                      
                      

                      <div class="flex items-center justify-center">
  <div class="card shadow-lg rounded-3xl p-5 bg-white">
    <h4 class="text-3xl font-bold text-blue-500">Create Account</h4>
    <p class="mt-2 text-lg text-gray-600">Fill in the details below to create your account.</p>
    <form class="mt-4">
      <div class="mb-4">
        <label for="username" class="block text-sm font-medium text-gray-700">Username</label>
        <input type="text" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500" id="username" placeholder="Choose a username" />
      </div>
      <div class="mb-4">
        <label for="useremail" class="block text-sm font-medium text-gray-700">Email Address</label>
        <input type="email" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500" id="useremail" placeholder="Enter your email address" />
      </div>
      <div class="mb-4">
        <label for="userpassword" class="block text-sm font-medium text-gray-700">Password</label>
        <input type="password" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500" id="userpassword" placeholder="Set your password" />
      </div>
      <div class="mb-6 flex items-center">
        <input type="checkbox" class="form-checkbox h-4 w-4 text-blue-500 border-gray-300 rounded" id="acceptTerms" />
        <label class="ml-2 text-sm text-gray-600" for="acceptTerms">
          I agree to the <a href="#" class="text-blue-500">Privacy Policy</a> and <a href="#" class="text-blue-500">Terms of Service</a>.
        </label>
      </div>
      <button type="submit" class="w-full py-2 px-4 bg-green-500 text-white font-semibold rounded-md hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-500">Sign Up</button>
      <p class="mt-3 text-center text-sm text-gray-500">
        Already have an account? <a href="#" class="text-blue-500">Log In</a>
      </p>
    </form>
    <div class="pt-4 text-center text-sm text-gray-400">
      Created using <a class="text-gray-500" href="#" target="_blank">Nobalish</a>.
    </div>
  </div>
</div>

                      
                      
                      <div class="py-5 px-3 min-w-full">
  <div class="bg-white p-5 mx-auto shadow-lg rounded-lg w-max">
    <form action="">
      <div class="mb-4 flex items-center">
        <label for="number" class="mr-4 text-right font-semibold text-secondary" style="width: 120px;">Contact Number</label>
        <input type="number" id="number" name="number" placeholder="Enter your number" class="form-input text-lg p-2 rounded-md w-full">
      </div>
      <div class="mb-4 flex items-center">
        <label for="range" class="mr-4 text-right font-semibold text-secondary" style="width: 120px;">Experience Level</label>
        <input type="range" id="range" name="range" class="form-range w-full">
      </div>
      <div class="mb-4 flex items-center">
        <label for="file" class="mr-4 text-right font-semibold text-secondary" style="width: 120px;">Upload File</label>
        <input type="file" id="file" name="file" class="form-input text-lg p-2 rounded-md w-full">
      </div>
      <div class="mb-4 flex items-center">
        <label for="date" class="mr-4 text-right font-semibold text-secondary" style="width: 120px;">Event Date</label>
        <input type="date" id="date" name="date" class="form-input text-lg p-2 rounded-md w-full">
      </div>
      <div class="mb-4 flex items-center">
        <label for="month" class="mr-4 text-right font-semibold text-secondary" style="width: 120px;">Start Month</label>
        <input type="month" id="month" name="month" class="form-input text-lg p-2 rounded-md w-full">
      </div>
      <div class="mb-4 flex items-center">
        <label for="time" class="mr-4 text-right font-semibold text-secondary" style="width: 120px;">Preferred Time</label>
        <input type="time" id="time" name="time" class="form-input text-lg p-2 rounded-md w-full">
      </div>
      <div class="mb-4 flex items-center">
        <label for="password" class="mr-4 text-right font-semibold text-secondary" style="width: 120px;">Password</label>
        <input type="password" id="password" name="password" placeholder="Create a password" class="form-input text-lg p-2 rounded-md w-full">
      </div>
      <div class="text-right">
        <button type="submit" class="bg-green-500 hover:bg-green-600 text-white font-semibold py-2 px-6 rounded-lg">Submit</button>
      </div>
    </form>
  </div>
</div>

Let's Connect

Welcome to our contact page. Feel free to share your thoughts or ask questions, and we'll get back to you as soon as possible.

                      
                      

                      <div class="bg-gray-100 py-6 sm:py-8 lg:py-12">
  <div class="container mx-auto px-4 md:px-8">
    <div class="mb-10 md:mb-16">
      <h2 class="mb-4 text-center text-2xl font-bold text-gray-800 md:mb-6 lg:text-3xl">Let's Connect</h2>
      <p class="mx-auto max-w-screen-md text-center text-gray-500 md:text-lg">Welcome to our contact page. Feel free to share your thoughts or ask questions, and we'll get back to you as soon as possible.</p>
    </div>
    <form class="mx-auto grid gap-4 max-w-screen-md">
      <div class="w-full md:w-1/2">
        <label for="first-name" class="mb-2 block text-sm text-gray-800">Name of the Explorer*</label>
        <input name="first-name" class="form-input w-full p-3 rounded-md border border-gray-300" id="first-name" placeholder="Your full name" required />
      </div>
      <div class="w-full md:w-1/2">
        <label for="last-name" class="mb-2 block text-sm text-gray-800">Family Name*</label>
        <input name="last-name" class="form-input w-full p-3 rounded-md border border-gray-300" id="last-name" placeholder="Your surname" required />
      </div>
      <div class="w-full">
        <label for="company" class="mb-2 block text-sm text-gray-800">Organization Name</label>
        <input name="company" class="form-input w-full p-3 rounded-md border border-gray-300" id="company" placeholder="Enter your organization" />
      </div>
      <div class="w-full">
        <label for="email" class="mb-2 block text-sm text-gray-800">Your Email Address*</label>
        <input name="email" class="form-input w-full p-3 rounded-md border border-gray-300" id="email" placeholder="email@example.com" required />
      </div>
      <div class="w-full">
        <label for="subject" class="mb-2 block text-sm text-gray-800">Topic of Discussion*</label>
        <input name="subject" class="form-input w-full p-3 rounded-md border border-gray-300" id="subject" placeholder="Subject of your message" required />
      </div>
      <div class="w-full">
        <label for="message" class="mb-2 block text-sm text-gray-800">Your Thoughts*</label>
        <textarea name="message" class="form-input w-full p-3 rounded-md border border-gray-300" id="message" rows="6" placeholder="Write your message here" required></textarea>
      </div>
      <div class="w-full flex justify-between items-center">
        <button class="bg-green-500 hover:bg-green-600 text-white px-8 py-3 text-sm font-semibold rounded-md" type="submit">Send Your Message</button>
        <span class="text-sm text-gray-500">*Required fields</span>
      </div>
      <p class="text-xs text-gray-500">By submitting, you agree to our <a href="#" class="underline text-blue-500">Terms and Conditions</a>.</p>
    </form>
  </div>
</div>

                      
                      
                      <form>
  <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
    <div>
      <label for="product_name" class="block text-sm font-semibold text-gray-700">Product Name</label>
      <input type="text" id="product_name" class="mt-1 p-2 border border-gray-300 rounded-lg w-full" placeholder="Gadget X100" required>
    </div>
    <div>
      <label for="brand_name" class="block text-sm font-semibold text-gray-700">Brand Name</label>
      <input type="text" id="brand_name" class="mt-1 p-2 border border-gray-300 rounded-lg w-full" placeholder="TechNova" required>
    </div>
    <div>
      <label for="price" class="block text-sm font-semibold text-gray-700">Price</label>
      <input type="text" id="price" class="mt-1 p-2 border border-gray-300 rounded-lg w-full" placeholder="$499.99" required>
    </div>
    <div>
      <label for="availability" class="block text-sm font-semibold text-gray-700">Availability</label>
      <input type="text" id="availability" class="mt-1 p-2 border border-gray-300 rounded-lg w-full" placeholder="In Stock" required>
    </div>
    <div>
      <label for="category" class="block text-sm font-semibold text-gray-700">Category</label>
      <input type="text" id="category" class="mt-1 p-2 border border-gray-300 rounded-lg w-full" placeholder="Electronics" required>
    </div>
    <div>
      <label for="rating" class="block text-sm font-semibold text-gray-700">Customer Rating</label>
      <input type="number" id="rating" class="mt-1 p-2 border border-gray-300 rounded-lg w-full" placeholder="4.5" required>
    </div>
  </div>
  
  <div class="mb-6">
    <label for="manufacturer_email" class="block text-sm font-semibold text-gray-700">Manufacturer Email</label>
    <input type="email" id="manufacturer_email" class="mt-1 p-2 border border-gray-300 rounded-lg w-full" placeholder="support@technova.com" required>
  </div>

  <div class="mb-6">
    <label for="warranty_period" class="block text-sm font-semibold text-gray-700">Warranty Period</label>
    <input type="text" id="warranty_period" class="mt-1 p-2 border border-gray-300 rounded-lg w-full" placeholder="2 years" required>
  </div>

  <div class="mb-6 flex items-center">
    <input id="accept_terms" type="checkbox" value="" class="h-4 w-4 text-indigo-600 border-gray-300 rounded" required>
    <label for="accept_terms" class="ml-2 text-sm text-gray-700">I agree to the <a href="#" class="text-indigo-600">terms and conditions</a>.</label>
  </div>

  <button type="submit" class="w-full py-3 mt-4 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700">Add Product</button>
</form>

Contact Information

Location Address 123 Tech Street, Silicon Valley, CA, USA

Phone Number +1 (800) 123 4567

Email Address contact@company.com

Web Address www.companywebsite.com

Contact Us

The Connections section allows you to manage your connections and communication with others.

                      
                      

                      <div class="py-6">
  <div class="flex justify-center">
    <div class="w-full sm:w-11/12 lg:w-1/2 bg-white p-4 rounded-lg">
      <div class="flex h-full">
        <div class="w-full lg:w-1/3 bg-blue-600 p-4 text-white">
          <h2 class="font-bold mb-4">Contact Information</h2>
          <p class="font-semibold mb-3">
            Location Address
            <span class="block text-gray-200">123 Tech Street, Silicon Valley, CA, USA</span>
          </p>
          <p class="font-semibold mb-3">
            Phone Number
            <span class="block text-gray-200">+1 (800) 123 4567</span>
          </p>
          <p class="font-semibold mb-3">
            Email Address
            <span class="block text-gray-200">contact@company.com</span>
          </p>
          <p class="font-semibold mb-3">
            Web Address
            <span class="block text-gray-200">www.companywebsite.com</span>
          </p>
        </div>
        <div class="w-full lg:w-2/3 bg-gray-100 p-4">
          <h2 class="font-bold mb-4 text-blue-600">Contact Us</h2>
          <form>
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-4">
              <div>
                <input type="text" class="form-input rounded-full p-2 w-full" placeholder="Full Name" />
              </div>
              <div>
                <input type="email" class="form-input rounded-full p-2 w-full" placeholder="Your Email" />
              </div>
            </div>
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-4">
              <div>
                <input type="tel" class="form-input rounded-full p-2 w-full" placeholder="Your Phone Number" />
              </div>
              <div>
                <input type="text" class="form-input rounded-full p-2 w-full" placeholder="Message Subject" />
              </div>
            </div>
            <div class="mb-4">
              <textarea class="form-input rounded-lg p-2 w-full" placeholder="Your Inquiry" rows="6"></textarea>
            </div>
            <div class="text-center">
              <button type="submit" class="px-6 py-3 bg-blue-600 text-white font-semibold rounded-full">Submit</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>

<p class="text-center text-gray-500 mt-4">The Connections section allows you to manage your connections and communication with others.</p>

Get Started with Amazing Projects

Join thousands of businesses growing with our powerful solutions.

Services

About Us

Resources

Legal

Social

Quick Links

                      
                      <div class="bg-light text-center lg:text-left">
  <div class="container py-6">
    <div class="mb-6">
      <h2 class="font-bold text-primary">Get Started with Amazing Projects</h2>
      <p class="text-muted">Join thousands of businesses growing with our powerful solutions.</p>
    </div>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-6 gap-6 text-left">
      <div>
        <h5 class="font-bold text-primary">Services</h5>
        <ul class="space-y-2">
          <li><a href="#" class="text-secondary">Overview</a></li>
          <li><a href="#" class="text-secondary">Support</a></li>
          <li><a href="#" class="text-secondary">Features</a></li>
          <li><a href="#" class="text-secondary">Pricing</a></li>
          <li><a href="#" class="text-secondary">Blog</a></li>
          <li><a href="#" class="text-secondary">Updates</a></li>
        </ul>
      </div>
      <div>
        <h5 class="font-bold text-primary">About Us</h5>
        <ul class="space-y-2">
          <li><a href="#" class="text-secondary">Our Team</a></li>
          <li><a href="#" class="text-secondary">Careers</a></li>
          <li><a href="#" class="text-secondary">News</a></li>
          <li><a href="#" class="text-secondary">Partnerships</a></li>
          <li><a href="#" class="text-secondary">Contact</a></li>
        </ul>
      </div>
      <div>
        <h5 class="font-bold text-primary">Resources</h5>
        <ul class="space-y-2">
          <li><a href="#" class="text-secondary">FAQ</a></li>
          <li><a href="#" class="text-secondary">Documentation</a></li>
          <li><a href="#" class="text-secondary">Support Center</a></li>
          <li><a href="#" class="text-secondary">Community</a></li>
        </ul>
      </div>
      <div>
        <h5 class="font-bold text-primary">Legal</h5>
        <ul class="space-y-2">
          <li><a href="#" class="text-secondary">Privacy Policy</a></li>
          <li><a href="#" class="text-secondary">Terms of Use</a></li>
          <li><a href="#" class="text-secondary">Cookies Policy</a></li>
        </ul>
      </div>
      <div>
        <h5 class="font-bold text-primary">Social</h5>
        <ul class="space-y-2">
          <li><a href="#" class="text-secondary">Twitter</a></li>
          <li><a href="#" class="text-secondary">Facebook</a></li>
          <li><a href="#" class="text-secondary">LinkedIn</a></li>
          <li><a href="#" class="text-secondary">Instagram</a></li>
        </ul>
      </div>
      <div>
        <h5 class="font-bold text-primary">Quick Links</h5>
        <ul class="space-y-2">
          <li><a href="#" class="text-secondary">Blog</a></li>
          <li><a href="#" class="text-secondary">Events</a></li>
          <li><a href="#" class="text-secondary">Help Center</a></li>
          <li><a href="#" class="text-secondary">Newsletter</a></li>
        </ul>
      </div>
    </div>
    <hr class="my-4">
    <div class="flex justify-between items-center">
      <div class="text-muted">
        <small>© 2023 Your Company. All Rights Reserved.</small>
      </div>
    </div>
  </div>
</div>

My Website

This footer component is part of a larger, open-source library of Bootstrap components. Learn more by going to the official My Website Documentation.

                      
                      

                      <div class="container">
  <div class="p-4 bg-light rounded-lg shadow-sm">
    <div class="flex justify-between items-center">
      <a href="#" target="_blank" class="flex items-center mb-4 sm:mb-0">
        <span class="text-2xl font-bold text-dark">My Website</span>
      </a>
      <ul class="flex flex-wrap mb-6 sm:mb-0">
        <li>
          <a href="#" class="mr-4 text-sm text-muted hover:underline">Home</a>
        </li>
        <li>
          <a href="#" class="mr-4 text-sm text-muted hover:underline">Terms of Service</a>
        </li>
        <li>
          <a href="#" class="mr-4 text-sm text-muted hover:underline">Support</a>
        </li>
        <li>
          <a href="#" class="text-sm text-muted hover:underline">Feedback</a>
        </li>
      </ul>
    </div>
    <hr class="my-4 border-gray-200" />
    <span class="block text-sm text-muted text-center">© 2022 <a href="#" target="_blank" class="hover:underline">My Website™</a>. All Rights Reserved.</span>
  </div>
  <p class="mt-4">This footer component is part of a larger, open-source library of Bootstrap components. Learn more by going to the official <a class="text-primary hover:underline" href="#" target="_blank">My Website Documentation</a>.</p>
</div>

                      
                      
                      
   
     
       Company
       Partners
       Careers
       Newsroom
       Updates
     
     
       
         
                            
       
         
                            
       
         
                            
       
         
       
     
                      
   © 2021 - Present CompanyX. All rights reserved.

                      
                      
                      <div class="container py-5">
  <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4">
    <div>
      <button class="btn w-full bg-blue-500 text-white hover:bg-blue-600">Primary Button</button>
    </div>
    <div>
      <button class="btn w-full border border-gray-300 text-gray-700 hover:bg-gray-100">Outline Button</button>
    </div>
    <div>
      <button class="btn w-full bg-green-500 text-white hover:bg-green-600">
        <i class="bi bi-check-circle me-2"></i> Success Button
      </button>
    </div>
    <div>
      <button class="btn w-full bg-yellow-500 text-white hover:bg-yellow-600" data-bs-toggle="tooltip" data-bs-placement="top" title="This is a tooltip!">
        Warning Button
      </button>
    </div>
    <div>
      <button class="btn w-full bg-red-500 text-white hover:bg-red-600">
        Delete <span class="badge bg-light text-dark ms-2">5</span>
      </button>
    </div>
    <div>
      <button class="btn w-full bg-teal-500 text-white hover:bg-teal-600">Info Button</button>
    </div>
    <div>
      <button class="btn w-full bg-gray-800 text-white hover:bg-gray-900">Dark Button</button>
    </div>
    <div>
      <button class="btn w-full bg-white text-gray-800 border border-gray-300 hover:bg-gray-100">Light Button</button>
    </div>
  </div>
</div>

                      
                      
                      <div class="container py-5">
  <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4">
    <div>
      <button class="w-full py-3 px-4 text-white border-0 rounded-3 bg-gradient-to-r from-[#ff7e5f] to-[#000] text-lg font-semibold uppercase transform transition-transform duration-200 hover:scale-110 hover:shadow-lg">
        Gradient Button
      </button>
    </div>
    <div>
      <button class="w-full py-3 px-4 text-white border-0 rounded-3 bg-gradient-to-r from-[#5fff7c] to-[#000] text-lg font-semibold uppercase transform transition-transform duration-200 hover:scale-110 hover:shadow-lg">
        Gradient Button
      </button>
    </div>
    <div>
      <button class="w-full py-3 px-4 text-white border-0 rounded-3 bg-gradient-to-r from-[#b0dfc0] to-[#000] text-lg font-semibold uppercase transform transition-transform duration-200 hover:scale-110 hover:shadow-lg">
        Gradient Button
      </button>
    </div>
    <div>
      <button class="w-full py-3 px-4 text-white border-0 rounded-3 bg-gradient-to-r from-[#b6b4b8] to-[#000] text-lg font-semibold uppercase transform transition-transform duration-200 hover:scale-110 hover:shadow-lg">
        Gradient Button
      </button>
    </div>
    <div>
      <button class="w-full py-3 px-4 text-white border-0 rounded-3 bg-gradient-to-r from-[#6443bf] to-[#000] text-lg font-semibold uppercase transform transition-transform duration-200 hover:scale-110 hover:shadow-lg">
        Gradient Button
      </button>
    </div>
    <div>
      <button class="w-full py-3 px-4 text-white border-0 rounded-3 bg-gradient-to-r from-[#b700ff] to-[#000] text-lg font-semibold uppercase transform transition-transform duration-200 hover:scale-110 hover:shadow-lg">
        Gradient Button
      </button>
    </div>
    <div>
      <button class="w-full py-3 px-4 text-white border-0 rounded-3 bg-gradient-to-r from-[#ff1bdd] to-[#000] text-lg font-semibold uppercase transform transition-transform duration-200 hover:scale-110 hover:shadow-lg">
        Gradient Button
      </button>
    </div>
    <div>
      <button class="w-full py-3 px-4 text-white border-0 rounded-3 bg-gradient-to-r from-[#dbfd17] to-[#060606] text-lg font-semibold uppercase transform transition-transform duration-200 hover:scale-110 hover:shadow-lg">
        Gradient Button
      </button>
    </div>
  </div>
</div>

                      
                      

                      <div class="container py-5">
  <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4">
    <div>
      <button class="w-full py-3 px-4 text-white bg-[#dc3545] text-lg font-semibold uppercase rounded-full transform transition-transform duration-200 hover:scale-110 hover:shadow-lg">
        Button
      </button>
    </div>
    <div>
      <button class="w-full py-3 px-4 text-white bg-[#0533ff] text-lg font-semibold uppercase rounded-full transform transition-transform duration-200 hover:scale-110 hover:shadow-lg">
        Button
      </button>
    </div>
    <div>
      <button class="w-full py-3 px-4 text-white bg-[#15ff09] text-lg font-semibold uppercase rounded-full transform transition-transform duration-200 hover:scale-110 hover:shadow-lg">
        Button
      </button>
    </div>
    <div>
      <button class="w-full py-3 px-4 text-white bg-[#999b1c] text-lg font-semibold uppercase rounded-full transform transition-transform duration-200 hover:scale-110 hover:shadow-lg">
        Button
      </button>
    </div>
    <div>
      <button class="w-full py-3 px-4 text-white bg-[#00f7ff] text-lg font-semibold uppercase rounded-full transform transition-transform duration-200 hover:scale-110 hover:shadow-lg">
        Button
      </button>
    </div>
    <div>
      <button class="w-full py-3 px-4 text-white bg-[#5f09ff] text-lg font-semibold uppercase rounded-full transform transition-transform duration-200 hover:scale-110 hover:shadow-lg">
        Button
      </button>
    </div>
    <div>
      <button class="w-full py-3 px-4 text-white bg-[#ff00d9] text-lg font-semibold uppercase rounded-full transform transition-transform duration-200 hover:scale-110 hover:shadow-lg">
        Button
      </button>
    </div>
    <div>
      <button class="w-full py-3 px-4 text-white bg-[#ff9100] text-lg font-semibold uppercase rounded-full transform transition-transform duration-200 hover:scale-110 hover:shadow-lg">
        Button
      </button>
    </div>
  </div>
</div>

                      
                      
                      <div class="container py-5">
  <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4">
    <div>
      <button class="w-full bg-red-500 text-white rounded-full p-4 text-lg font-semibold uppercase transform transition-all duration-200 hover:scale-110 hover:shadow-lg">Red</button>
    </div>
    <div>
      <button class="w-full bg-green-500 text-white rounded-full p-4 text-lg font-semibold uppercase transform transition-all duration-200 hover:scale-110 hover:shadow-lg">Green</button>
    </div>
    <div>
      <button class="w-full bg-blue-500 text-white rounded-full p-4 text-lg font-semibold uppercase transform transition-all duration-200 hover:scale-110 hover:shadow-lg">Blue</button>
    </div>
    <div>
      <button class="w-full bg-yellow-500 text-white rounded-full p-4 text-lg font-semibold uppercase transform transition-all duration-200 hover:scale-110 hover:shadow-lg">Yellow</button>
    </div>
    <div>
      <button class="w-full bg-white text-black rounded-full p-4 text-lg font-semibold uppercase transform transition-all duration-200 hover:scale-110 hover:shadow-lg">White</button>
    </div>
    <div>
      <button class="w-full bg-gray-500 text-white rounded-full p-4 text-lg font-semibold uppercase transform transition-all duration-200 hover:scale-110 hover:shadow-lg">Gray</button>
    </div>
    <div>
      <button class="w-full bg-teal-500 text-white rounded-full p-4 text-lg font-semibold uppercase transform transition-all duration-200 hover:scale-110 hover:shadow-lg">Teal</button>
    </div>
    <div>
      <button class="w-full bg-black text-white rounded-full p-4 text-lg font-semibold uppercase transform transition-all duration-200 hover:scale-110 hover:shadow-lg">Black</button>
    </div>
  </div>
</div>

                      
                      

                      <div class="container py-5">
  <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4">
    <div>
      <button class="w-full border-2 border-red-500 text-red-500 rounded-full p-4 text-lg font-semibold uppercase transform transition-all duration-200 hover:scale-110 hover:shadow-lg">Red</button>
    </div>
    <div>
      <button class="w-full border-2 border-green-500 text-green-500 rounded-full p-4 text-lg font-semibold uppercase transform transition-all duration-200 hover:scale-110 hover:shadow-lg">Green</button>
    </div>
    <div>
      <button class="w-full border-2 border-blue-500 text-blue-500 rounded-full p-4 text-lg font-semibold uppercase transform transition-all duration-200 hover:scale-110 hover:shadow-lg">Blue</button>
    </div>
    <div>
      <button class="w-full border-2 border-yellow-500 text-yellow-500 rounded-full p-4 text-lg font-semibold uppercase transform transition-all duration-200 hover:scale-110 hover:shadow-lg">Yellow</button>
    </div>
    <div>
      <button class="w-full border-2 border-gray-500 text-gray-500 rounded-full p-4 text-lg font-semibold uppercase transform transition-all duration-200 hover:scale-110 hover:shadow-lg">Gray</button>
    </div>
    <div>
      <button class="w-full border-2 border-teal-500 text-teal-500 rounded-full p-4 text-lg font-semibold uppercase transform transition-all duration-200 hover:scale-110 hover:shadow-lg">Teal</button>
    </div>
    <div>
      <button class="w-full border-2 border-black text-black rounded-full p-4 text-lg font-semibold uppercase transform transition-all duration-200 hover:scale-110 hover:shadow-lg">Black</button>
    </div>
  </div>
</div>

                      
                      
                      <div class="container py-5">
  <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4">
    <div>
      <button class="btn bg-blue-500 text-white w-full flex justify-center items-center p-3 rounded-xl hover:scale-105 hover:shadow-lg">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-house-door mr-2" viewBox="0 0 16 16">
          <path d="M8 3.293l6 6V13h-4v3H6v-3H2V9.293l6-6zM0 9.293l7-7 7 7V14h-3v-4h-8v4H0V9.293z"/>
        </svg>
        Home
      </button>
    </div>
    <div>
      <button class="btn bg-green-500 text-white w-full flex justify-center items-center p-3 rounded-xl hover:scale-105 hover:shadow-lg">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-search mr-2" viewBox="0 0 16 16">
          <path d="M11.742 10.344a6 6 0 1 0-1.398 1.398l4.672 4.671a1 1 0 1 0 1.414-1.414l-4.672-4.671zM12 6a5.978 5.978 0 0 1-1.162 3.626l-4.326-4.327A5.978 5.978 0 0 1 12 6z"/>
        </svg>
        Search
      </button>
    </div>
    <div>
      <button class="btn bg-yellow-500 text-white w-full flex justify-center items-center p-3 rounded-xl hover:scale-105 hover:shadow-lg">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-plus-circle mr-2" viewBox="0 0 16 16">
          <path d="M8 3a5 5 0 1 0 5 5 5 5 0 0 0-5-5zM8 0a8 8 0 1 1-8 8 8 8 0 0 1 8-8zm0 14a6 6 0 1 0-6-6 6 6 0 0 0 6 6z"/>
        </svg>
        Add
      </button>
    </div>
    <div>
      <button class="btn bg-red-500 text-white w-full flex justify-center items-center p-3 rounded-xl hover:scale-105 hover:shadow-lg">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-gear mr-2" viewBox="0 0 16 16">
          <path d="M8 3.5a4.5 4.5 0 1 0 4.5 4.5A4.5 4.5 0 0 0 8 3.5zM8 1a5 5 0 1 1-5 5 5 5 0 0 1 5-5z"/>
        </svg>
        Settings
      </button>
    </div>
    <div>
      <button class="btn bg-teal-500 text-white w-full flex justify-center items-center p-3 rounded-xl hover:scale-105 hover:shadow-lg">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-cart mr-2" viewBox="0 0 16 16">
          <path d="M0 1a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v1h9V1a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v1h1a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h1V1zM1 2h1v1H1zM14 2h1v1h-1zM0 12h16V4H0z"/>
        </svg>
        Cart
      </button>
    </div>
    <div>
      <button class="btn bg-pink-500 text-white w-full flex justify-center items-center p-3 rounded-xl hover:scale-105 hover:shadow-lg">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-heart mr-2" viewBox="0 0 16 16">
          <path d="M8 13s3-2.5 6-5c2-2 2-4 0-6-2-2-4-2-6 0-2-2-4-2-6 0-2 2-2 4 0 6 3 2.5 6 5 6 5z"/>
        </svg>
        Favorite
      </button>
    </div>
    <div>
      <button class="btn bg-gray-500 text-white w-full flex justify-center items-center p-3 rounded-xl hover:scale-105 hover:shadow-lg">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-chat mr-2" viewBox="0 0 16 16">
          <path d="M2 4a2 2 0 0 0 2-2h8a2 2 0 0 0 2 2v8a2 2 0 0 0-2 2H4a2 2 0 0 0-2-2V4zm3 0v8h8V4H5z"/>
        </svg>
        Messages
      </button>
    </div>
    <div>
      <button class="btn bg-black text-white w-full flex justify-center items-center p-3 rounded-xl hover:scale-105 hover:shadow-lg">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-person mr-2" viewBox="0 0 16 16">
          <path d="M8 1a4 4 0 1 1-4 4 4 4 0 0 1 4-4zm0 8a6 6 0 0 0-6 6v1h12v-1a6 6 0 0 0-6-6z"/>
        </svg>
        Profile
      </button>
    </div>
  </div>
</div>

Sun

Mon

Tue

Wed

Thu

Fri

Sat

Sun

Mon

Tue

Wed

Thu

Fri

Sat

                      
                      
                      <div class="p-4">
  <div class="flex justify-start md:justify-center bg-white shadow-sm rounded overflow-auto mx-auto py-3 px-2 mb-4">
    <div class="flex flex-col items-center rounded-full mx-1 transition-all bg-gray-800 text-white shadow-sm hover:shadow-lg cursor-pointer p-3">
      <p class="mb-1 text-sm">Sun</p>
      <p class="mb-0 font-bold">1</p>
    </div>
    <div class="flex flex-col items-center rounded-full mx-1 transition-all bg-gray-800 text-white shadow-sm hover:shadow-lg cursor-pointer p-3">
      <p class="mb-1 text-sm">Mon</p>
      <p class="mb-0 font-bold">2</p>
    </div>
    <div class="flex flex-col items-center rounded-full mx-1 transition-all bg-gray-800 text-white shadow-sm hover:shadow-lg cursor-pointer p-3">
      <p class="mb-1 text-sm">Tue</p>
      <p class="mb-0 font-bold">3</p>
    </div>
    <div class="flex flex-col items-center rounded-full mx-1 transition-all bg-blue-500 text-white shadow-lg relative p-3">
      <p class="mb-1 text-sm">Wed</p>
      <p class="mb-0 font-bold">4</p>
    </div>
    <div class="flex flex-col items-center rounded-full mx-1 transition-all bg-gray-800 text-white shadow-sm hover:shadow-lg cursor-pointer p-3">
      <p class="mb-1 text-sm">Thu</p>
      <p class="mb-0 font-bold">5</p>
    </div>
    <div class="flex flex-col items-center rounded-full mx-1 transition-all bg-gray-800 text-white shadow-sm hover:shadow-lg cursor-pointer p-3">
      <p class="mb-1 text-sm">Fri</p>
      <p class="mb-0 font-bold">6</p>
    </div>
    <div class="flex flex-col items-center rounded-full mx-1 transition-all bg-gray-800 text-white shadow-sm hover:shadow-lg cursor-pointer p-3">
      <p class="mb-1 text-sm">Sat</p>
      <p class="mb-0 font-bold">7</p>
    </div>
  </div>
  <div class="flex justify-start md:justify-center bg-white shadow-sm rounded overflow-auto mx-auto py-3 px-2">
    <div class="flex flex-col items-center rounded mx-1 transition-all bg-gray-200 text-gray-800 shadow-sm hover:shadow-lg cursor-pointer p-3">
      <p class="mb-1 text-sm">Sun</p>
      <p class="mb-0 font-bold">1</p>
    </div>
    <div class="flex flex-col items-center rounded mx-1 transition-all bg-gray-200 text-gray-800 shadow-sm hover:shadow-lg cursor-pointer p-3">
      <p class="mb-1 text-sm">Mon</p>
      <p class="mb-0 font-bold">2</p>
    </div>
    <div class="flex flex-col items-center rounded mx-1 transition-all bg-gray-200 text-gray-800 shadow-sm hover:shadow-lg cursor-pointer p-3">
      <p class="mb-1 text-sm">Tue</p>
      <p class="mb-0 font-bold">3</p>
    </div>
    <div class="flex flex-col items-center rounded mx-1 bg-blue-500 text-white shadow-lg relative p-3">
      <p class="mb-1 text-sm">Wed</p>
      <p class="mb-0 font-bold">4</p>
    </div>
    <div class="flex flex-col items-center rounded mx-1 transition-all bg-gray-200 text-gray-800 shadow-sm hover:shadow-lg cursor-pointer p-3">
      <p class="mb-1 text-sm">Thu</p>
      <p class="mb-0 font-bold">5</p>
    </div>
    <div class="flex flex-col items-center rounded mx-1 transition-all bg-gray-200 text-gray-800 shadow-sm hover:shadow-lg cursor-pointer p-3">
      <p class="mb-1 text-sm">Fri</p>
      <p class="mb-0 font-bold">6</p>
    </div>
    <div class="flex flex-col items-center rounded mx-1 transition-all bg-gray-200 text-gray-800 shadow-sm hover:shadow-lg cursor-pointer p-3">
      <p class="mb-1 text-sm">Sat</p>
      <p class="mb-0 font-bold">7</p>
    </div>
  </div>
</div>

Holiday Sale - Up to 40% off on home decor! Shop Now

                      
                      
                      <div class="flex items-center justify-center">
  <div class="grid min-h-[25vh] w-full place-items-center overflow-auto rounded-lg p-4">
    <div role="alert" class="alert alert-primary flex items-center p-4 rounded-lg">
      <div class="mr-5">
        <p class="font-bold text-yellow-500">
          Holiday Sale
          <span class="text-gray-300">
            - Up to 40% off on home decor!
          </span>
          <span title="" class="inline-flex items-center justify-center text-sm font-bold text-yellow-500 ml-3">
            Shop Now
            <svg class="w-3 h-3 ml-1" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></svg>
          </span>
        </p>
      </div>
      <button class="btn-close absolute top-0 right-0" type="button"></button>
    </div>
  </div>
</div>

<div class="flex items-center justify-center">
  <div class="grid min-h-[25vh] w-full place-items-center overflow-auto rounded-lg p-4">
    <div role="alert" class="alert alert-danger flex items-center p-4 rounded-lg">
      <div class="mr-5">
        <p class="font-bold text-yellow-500">
          Holiday Sale
          <span class="text-gray-300">
            - Up to 40% off on home decor!
          </span>
          <span title="" class="inline-flex items-center justify-center text-sm font-bold text-yellow-500 ml-3">
            Shop Now
            <svg class="w-3 h-3 ml-1" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></svg>
          </span>
        </p>
      </div>
      <button class="btn-close absolute top-0 right-0" type="button"></button>
    </div>
  </div>
</div>

<div class="flex items-center justify-center">
  <div class="grid min-h-[25vh] w-full place-items-center overflow-auto rounded-lg p-4">
    <div role="alert" class="alert alert-success flex items-center p-4 rounded-lg">
      <div class="mr-5">
        <p class="font-bold text-yellow-500">
          Holiday Sale
          <span class="text-gray-300">
            - Up to 40% off on home decor!
          </span>
          <span title="" class="inline-flex items-center justify-center text-sm font-bold text-yellow-500 ml-3">
            Shop Now
            <svg class="w-3 h-3 ml-1" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></svg>
          </span>
        </p>
      </div>
      <button class="btn-close absolute top-0 right-0" type="button"></button>
    </div>
  </div>
</div>

<div class="flex items-center justify-center">
  <div class="grid min-h-[25vh] w-full place-items-center overflow-auto rounded-lg p-4">
    <div role="alert" class="alert alert-info flex items-center p-4 rounded-lg">
      <div class="mr-5">
        <p class="font-bold text-yellow-500">
          Holiday Sale
          <span class="text-gray-300">
            - Up to 40% off on home decor!
          </span>
          <span title="" class="inline-flex items-center justify-center text-sm font-bold text-yellow-500 ml-3">
            Shop Now
            <svg class="w-3 h-3 ml-1" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></svg>
          </span>
        </p>
      </div>
      <button class="btn-close absolute top-0 right-0" type="button"></button>
    </div>
  </div>
</div>

Sample Heading One

Sample Heading Two

Sample Heading Three

Sample Heading Four

Sample Heading Five

Sample Heading Six

                      
                      
                      <div class="container my-5">
  <div class="flex flex-col gap-4 text-left">
    <h1 class="font-bold text-blue-500 text-4xl">Sample Heading One</h1>
    <h2 class="font-bold text-gray-600 text-3xl">Sample Heading Two</h2>
    <h3 class="font-bold text-green-500 text-2xl">Sample Heading Three</h3>
    <h4 class="font-bold text-yellow-500 text-xl">Sample Heading Four</h4>
    <h5 class="font-bold text-teal-400 text-lg">Sample Heading Five</h5>
    <p class="font-semibold text-gray-500 text-base">Sample Heading Six</p>
  </div>
</div>

                      
                      
                      <nav aria-label="Page navigation example">
  <ul class="flex list-none p-0 m-0">
    <li class="page-item">
      <a href="#" class="page-link px-3 py-2 border rounded-l-lg hover:bg-gray-100" aria-label="Previous">
        <span aria-hidden="true">&laquo; Previous</span>
      </a>
    </li>
    <li class="page-item">
      <a href="#" class="page-link px-3 py-2 border hover:bg-gray-100">1</a>
    </li>
    <li class="page-item">
      <a href="#" class="page-link px-3 py-2 border hover:bg-gray-100">2</a>
    </li>
    <li class="page-item active" aria-current="page">
      <a href="#" class="page-link px-3 py-2 border bg-blue-500 text-white hover:bg-blue-600">3</a>
    </li>
    <li class="page-item">
      <a href="#" class="page-link px-3 py-2 border hover:bg-gray-100">4</a>
    </li>
    <li class="page-item">
      <a href="#" class="page-link px-3 py-2 border hover:bg-gray-100">5</a>
    </li>
    <li class="page-item">
      <a href="#" class="page-link px-3 py-2 border rounded-r-lg hover:bg-gray-100" aria-label="Next">
        <span aria-hidden="true">Next &raquo;</span>
      </a>
    </li>
  </ul>
</nav>

Flexible Billing

2.0%

for transactions within Europe

3.5%

for international transactions

Premium Business Plan

2.0%

for transactions within Europe

3.5%

for international transactions

                      
                      

                      <div class="container py-5">
  <div class="flex justify-center flex-wrap">
    <div class="w-full sm:w-1/2 lg:w-1/3 mb-4">
      <div class="card shadow-lg border rounded-lg">
        <div class="card-header text-center bg-light text-primary font-bold">
          Flexible Billing
        </div>
        <div class="card-body">
          <div class="flex justify-center mb-4">
            <div class="text-center">
              <h3 class="text-2xl">2.0%</h3>
              <p class="text-sm text-muted mt-2">for transactions within Europe</p>
            </div>
            <div class="text-center ml-5">
              <h3 class="text-2xl">3.5%</h3>
              <p class="text-sm text-muted mt-2">for international transactions</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="w-full sm:w-1/2 lg:w-1/3 mb-4">
      <div class="card shadow-lg border rounded-lg">
        <div class="card-header text-center bg-dark text-white font-bold">
          Premium Business Plan
        </div>
        <div class="card-body">
          <div class="flex justify-center mb-4">
            <div class="text-center">
              <h3 class="text-2xl">2.0%</h3>
              <p class="text-sm text-muted mt-2">for transactions within Europe</p>
            </div>
            <div class="text-center ml-5">
              <h3 class="text-2xl">3.5%</h3>
              <p class="text-sm text-muted mt-2">for international transactions</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

December 2024

Mo	Tu	We	Th	Fr	Sa	Su
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

                      
                      
                      <div class="container py-5">
  <div class="flex justify-center">
    <div class="card shadow-lg max-w-[22rem]">
      <div class="card-body bg-light rounded-t-lg">
        <div class="flex justify-between">
          <span class="font-semibold text-dark">December 2024</span>
          <div class="flex">
            <button aria-label="calendar backward" class="text-dark hover:text-muted">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                <path d="M0 0h24v24H0z" fill="none"/>
                <polyline points="15 6 9 12 15 18" />
              </svg>
            </button>
            <button aria-label="calendar forward" class="text-dark hover:text-muted ml-3">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                <path d="M0 0h24v24H0z" fill="none"/>
                <polyline points="9 6 15 12 9 18" />
              </svg>
            </button>
          </div>
        </div>
        <div class="flex justify-between pt-4 overflow-auto">
          <table class="table-auto w-full">
            <thead>
              <tr>
                <th class="text-center">Mo</th>
                <th class="text-center">Tu</th>
                <th class="text-center">We</th>
                <th class="text-center">Th</th>
                <th class="text-center">Fr</th>
                <th class="text-center">Sa</th>
                <th class="text-center">Su</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td class="pt-3 text-center"></td>
                <td class="pt-3 text-center"></td>
                <td class="pt-3 text-center"></td>
                <td class="pt-3 text-center"><p>1</p></td>
                <td class="pt-3 text-center"><p>2</p></td>
                <td class="pt-3 text-center"><p>3</p></td>
                <td class="pt-3 text-center"><p>4</p></td>
              </tr>
              <tr>
                <td class="pt-3 text-center"><p>5</p></td>
                <td class="pt-3 text-center"><p>6</p></td>
                <td class="pt-3 text-center"><p>7</p></td>
                <td class="pt-3 text-center"><a class="btn btn-primary rounded-full" href="#">8</a></td>
                <td class="pt-3 text-center"><p>9</p></td>
                <td class="pt-3 text-center"><p>10</p></td>
                <td class="pt-3 text-center"><p>11</p></td>
              </tr>
              <tr>
                <td class="pt-3 text-center"><p>12</p></td>
                <td class="pt-3 text-center"><p>13</p></td>
                <td class="pt-3 text-center"><p>14</p></td>
                <td class="pt-3 text-center"><p>15</p></td>
                <td class="pt-3 text-center"><p>16</p></td>
                <td class="pt-3 text-center"><p>17</p></td>
                <td class="pt-3 text-center"><p>18</p></td>
              </tr>
              <tr>
                <td class="pt-3 text-center"><p>19</p></td>
                <td class="pt-3 text-center"><p>20</p></td>
                <td class="pt-3 text-center"><p>21</p></td>
                <td class="pt-3 text-center"><p>22</p></td>
                <td class="pt-3 text-center"><p>23</p></td>
                <td class="pt-3 text-center"><p>24</p></td>
                <td class="pt-3 text-center"><p>25</p></td>
              </tr>
              <tr>
                <td class="pt-3 text-center"><p>26</p></td>
                <td class="pt-3 text-center"><p>27</p></td>
                <td class="pt-3 text-center"><p>28</p></td>
                <td class="pt-3 text-center"><p>29</p></td>
                <td class="pt-3 text-center"><p>30</p></td>
                <td class="pt-3 text-center"><p>31</p></td>
                <td class="pt-3 text-center"><p></p></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>

Choose your file or simply drag it here

Supported formats: SVG, PNG, JPG, GIF (MAX. 800x400px)

This file upload component is part of a comprehensive Bootstrap component library. For more details, visit the official Bootstrap Documentation.

                      
                      
                      <div class="container my-5">
  <div class="flex justify-center">
    <label for="dropzone-file" class="flex flex-col items-center justify-center w-full h-64 border-2 border-dashed border-secondary rounded-lg cursor-pointer bg-light hover:bg-light">
      <div class="flex flex-col items-center justify-center py-5">
        <svg class="w-10 h-10 mb-3 text-muted" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"></path>
        </svg>
        <p class="mb-2 text-muted"><span class="font-semibold">Choose your file</span> or simply drag it here</p>
        <p class="text-muted text-sm">Supported formats: SVG, PNG, JPG, GIF (MAX. 800x400px)</p>
      </div>
      <input id="dropzone-file" type="file" class="hidden" />
    </label>
  </div>
  <p class="mt-3">This file upload component is part of a comprehensive Bootstrap component library. For more details, visit the official <a class="text-primary" href="#" target="_blank">Bootstrap Documentation</a>.</p>
</div>

This section provides an overview of the user's profile and the key details that define the account. You can view and edit your basic information here. Switch tabs to access different sections.

In the Stats tab, you can monitor the overall performance of your account. Check metrics such as activity, engagement, and other key statistics to understand how well your profile is doing.

Here you can adjust your preferences, including notification settings, privacy options, and other personal configurations. Customize the platform to suit your needs and preferences.

The Connections section allows you to manage your connections and communication with others. You can add, remove, or update your contacts here for easy access and interaction.

                      
                      

                      <div class="container my-5">
    <ul class="nav nav-tabs" id="myTab" role="tablist">
        <li class="nav-item">
            <a class="nav-link" id="overview-tab" data-toggle="tab" href="#overview" role="tab" aria-controls="overview" aria-selected="false">Overview</a>
        </li>
        <li class="nav-item">
            <a class="nav-link active" id="stats-tab" data-toggle="tab" href="#stats" role="tab" aria-controls="stats" aria-selected="true">Stats</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" id="preferences-tab" data-toggle="tab" href="#preferences" role="tab" aria-controls="preferences" aria-selected="false">Preferences</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" id="connections-tab" data-toggle="tab" href="#connections" role="tab" aria-controls="connections" aria-selected="false">Connections</a>
        </li>
    </ul>
    <div class="tab-content mt-3" id="myTabContent">
        <div class="tab-pane fade" id="overview" role="tabpanel" aria-labelledby="overview-tab">
            <p class="text-muted">This section provides an overview of the user's profile and the key details that define the account. You can view and edit your basic information here. Switch tabs to access different sections.</p>
        </div>
        <div class="tab-pane fade show active" id="stats" role="tabpanel" aria-labelledby="stats-tab">
            <p class="text-muted">In the Stats tab, you can monitor the overall performance of your account. Check metrics such as activity, engagement, and other key statistics to understand how well your profile is doing.</p>
        </div>
        <div class="tab-pane fade" id="preferences" role="tabpanel" aria-labelledby="preferences-tab">
            <p class="text-muted">Here you can adjust your preferences, including notification settings, privacy options, and other personal configurations. Customize the platform to suit your needs and preferences.</p>
        </div>
        <div class="tab-pane fade" id="connections" role="tabpanel" aria-labelledby="connections-tab">
            <p class="text-muted">The Connections section allows you to manage your connections and communication with others. You can add, remove, or update your contacts here for easy access and interaction.</p>
        </div>
    </div>
  </div>

                      
                      
                      <div class="relative hidden lg:block h-full my-4 ms-4 shadow-lg w-1/4">
  <div class="h-full bg-gray-800 rounded-2xl">
    <div class="flex items-center justify-center pt-3">
      <img src="https://dummyimage.com/722x402" alt="Dummy Image" class="w-full h-auto rounded-lg">
    </div>
    <nav class="mt-3">
      <div>
        <a class="flex items-center justify-start w-full p-3 my-2 text-primary uppercase bg-gradient-to-r from-white to-gray-100 hover:text-gray-700" href="#">
          <span class="text-start">
            <i class="bi bi-house"></i>
          </span>
          <span class="ml-3 text-sm font-normal">
            Home
          </span>
        </a>
        <a class="flex items-center justify-start w-full p-3 my-2 text-muted uppercase transition-all hover:text-primary" href="#">
          <span class="text-start">
            <i class="bi bi-folder"></i>
          </span>
          <span class="ml-3 text-sm font-normal">
            Files
          </span>
        </a>
        <a class="flex items-center justify-start w-full p-3 my-2 text-muted uppercase transition-all hover:text-primary" href="#">
          <span class="text-start">
            <i class="bi bi-list-task"></i>
          </span>
          <span class="ml-3 text-sm font-normal">
            Tasks
          </span>
        </a>
        <a class="flex items-center justify-start w-full p-3 my-2 text-muted uppercase transition-all hover:text-primary" href="#">
          <span class="text-start">
            <i class="bi bi-calendar3"></i>
          </span>
          <span class="ml-3 text-sm font-normal">
            Schedule
          </span>
        </a>
        <a class="flex items-center justify-start w-full p-3 my-2 text-muted uppercase transition-all hover:text-primary" href="#">
          <span class="text-start">
            <i class="bi bi-clock"></i>
          </span>
          <span class="ml-3 text-sm font-normal">
            Timing
          </span>
        </a>
        <a class="flex items-center justify-start w-full p-3 my-2 text-muted uppercase transition-all hover:text-primary" href="#">
          <span class="text-start">
            <i class="bi bi-file-earmark"></i>
          </span>
          <span class="ml-3 text-sm font-normal">
            Documents
          </span>
        </a>
        <a class="flex items-center justify-start w-full p-3 my-2 text-muted uppercase transition-all hover:text-primary" href="#">
          <span class="text-start">
            <i class="bi bi-gear"></i>
          </span>
          <span class="ml-3 text-sm font-normal">
            Options
          </span>
        </a>
      </div>
    </nav>
  </div>
</div>

Our Achievements

50

Users

15

Subscribes

12

Downloads

20

Products

                      
                      

                      <section class="text-gray-600 body-font">
  <div class="container px-5 py-24 mx-auto">
    <div class="row w-100 mb-8">
      <div class="col-12 mb-6">
        <h1 class="display-4 font-weight-bold mb-2 text-dark">Our Achievements</h1>
        <div class="h-1 w-20 bg-success rounded"></div>
      </div>
    </div>
    <div class="row text-center">
      <div class="col-sm-3 col-6 mb-4">
        <div class="bg-success rounded-lg p-4">
            <h2 class="font-weight-medium display-3 text-white">50</h2>
            <p class="text-white font-weight-bold">Users</p>
        </div>
      </div>
      <div class="col-sm-3 col-6 mb-4">
        <div class="bg-success rounded-lg p-4">
            <h2 class="font-weight-medium display-3 text-white">15</h2>
            <p class="text-white font-weight-bold">Subscribes</p>
        </div>
      </div>
      <div class="col-sm-3 col-6 mb-4">
        <div class="bg-success rounded-lg p-4">
            <h2 class="font-weight-medium display-3 text-white">12</h2>
            <p class="text-white font-weight-bold">Downloads</p>
        </div>
      </div>
      <div class="col-sm-3 col-6 mb-4">
        <div class="bg-success rounded-lg p-4">
            <h2 class="font-weight-medium display-3 text-white">20</h2>
            <p class="text-white font-weight-bold">Products</p>
        </div>
      </div>
    </div>
  </div>
</section>

通知

未読メッセージが3件あります。

デバイスに通知を送信します。

通話が確認されました。
1時間前
新しいメッセージがあります！
1時間前
サブスクリプションが間もなく期限切れです！
2時間前

                      
                        
                      <div class="flex flex-col justify-center items-center bg-gray-100">
    <div class="container my-5">
        <div class="card shadow-sm border-0">
            <div class="card-body">
                <h5 class="card-title font-bold text-gray-900 mb-4">通知</h5>
                <p class="card-text text-muted mb-4">未読メッセージが3件あります。</p>
                <div class="flex items-center mb-3">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check-lg mr-2" viewBox="0 0 16 16">
                        <path d="M13.485 1.515a.5.5 0 0 1 .707 0l1.5 1.5a.5.5 0 0 1 0 .707l-9.5 9.5a.5.5 0 0 1-.707 0l-5-5a.5.5 0 0 1 .707-.707l4.646 4.647 9.146-9.147z"/>
                    </svg>
                    <div>
                        <small class="text-muted mb-4">デバイスに通知を送信します。</small>
                    </div>
                    <div class="form-check form-switch ml-auto">
                        <input class="form-check-input" type="checkbox" id="notificationSwitch" checked>
                    </div>
                </div>
                <ul class="list-none">
                    <li class="flex items-start mb-3">
                        <div class="rounded-full bg-blue-500 mr-3" style="width: 8px; height: 8px;"></div>
                        <div>
                            <p class="mb-0 font-semibold">通話が確認されました。</p>
                            <small class="text-muted">1時間前</small>
                        </div>
                    </li>
                    <li class="flex items-start mb-3">
                        <div class="rounded-full bg-blue-500 mr-3" style="width: 8px; height: 8px;"></div>
                        <div>
                            <p class="mb-0 font-semibold">新しいメッセージがあります！</p>
                            <small class="text-muted">1時間前</small>
                        </div>
                    </li>
                    <li class="flex items-start">
                        <div class="rounded-full bg-blue-500 mr-3" style="width: 8px; height: 8px;"></div>
                        <div>
                            <p class="mb-0 font-semibold">サブスクリプションが間もなく期限切れです！</p>
                            <small class="text-muted">2時間前</small>
                        </div>
                    </li>
                </ul>
                <button class="btn btn-primary w-full mt-4">
                    すべて既読にする
                </button>
            </div>
        </div>
    </div>
</div>