Terms of Service Page Template

This tailwind example is contributed by Anonymous, on 25-Dec-2024. Component is made with Tailwind v3.4. It is responsive.

Other

Author Anonymous

Tailwind v3.4 3.1k 5

Fork Fullscreen

<div class="bg-gray-50 min-h-screen">
  <div class="max-w-4xl mx-auto px-4 py-16">
    <div class="bg-white rounded-2xl shadow-xl p-8">
      <h1 class="text-3xl font-bold text-gray-900 mb-8">Terms of Service</h1>

<section class="mb-8">
        <h2 class="text-xl font-semibold text-gray-800 mb-4">1. Acceptance of Terms</h2>
        <div class="prose text-gray-600">
          <p>By accessing and using this website, you accept and agree to be bound by the terms and provision of this
            agreement.</p>
        </div>
      </section>

<section class="mb-8">
        <h2 class="text-xl font-semibold text-gray-800 mb-4">2. Use License</h2>
        <div class="bg-gray-50 rounded-lg p-6">
          <ul class="space-y-4 text-gray-600">
            <li class="flex gap-3">
              <svg class="h-6 w-6 text-blue-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
              </svg>
              <span>Permission is granted to temporarily download one copy of the materials for personal, non-commercial transitory viewing only.</span>
            </li>
            <li class="flex gap-3">
              <svg class="h-6 w-6 text-blue-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
              </svg>
              <span>This is the grant of a license, not a transfer of title.</span>
            </li>
          </ul>
        </div>
      </section>

<section class="mb-8">
        <h2 class="text-xl font-semibold text-gray-800 mb-4">3. Disclaimer</h2>
        <div class="bg-yellow-50 border-l-4 border-yellow-400 p-4">
          <div class="flex">
            <div class="flex-shrink-0">
              <svg class="h-5 w-5 text-yellow-400" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd"
                  d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
                  clip-rule="evenodd" />
              </svg>
            </div>
            <div class="ml-3">
              <p class="text-sm text-yellow-700">
                The materials on this website are provided on an 'as is' basis. We make no warranties, expressed or
                implied, and hereby disclaim and negate all other warranties including, without limitation, implied
                warranties or conditions of merchantability, fitness for a particular purpose, or non-infringement of
                intellectual property or other violation of rights.
              </p>
            </div>
          </div>
        </div>
      </section>

<section class="mb-8">
        <h2 class="text-xl font-semibold text-gray-800 mb-4">4. Limitations</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div class="bg-gray-50 p-6 rounded-lg">
            <h3 class="font-medium text-gray-900 mb-2">Time Limitations</h3>
            <p class="text-gray-600">Claims must be filed within 30 days of incident.</p>
          </div>
          <div class="bg-gray-50 p-6 rounded-lg">
            <h3 class="font-medium text-gray-900 mb-2">Liability</h3>
            <p class="text-gray-600">We shall not be held liable for any damages.</p>
          </div>
        </div>
      </section>

<section class="mb-8">
        <h2 class="text-xl font-semibold text-gray-800 mb-4">5. Revisions</h2>
        <div class="prose text-gray-600">
          <p>We may revise these terms of service at any time without notice. By using this website you are agreeing to
            be bound by the current version of these terms of service.</p>
        </div>
      </section>

<section>
        <h2 class="text-xl font-semibold text-gray-800 mb-4">6. Contact</h2>
        <div class="bg-gray-50 rounded-lg p-6 flex items-center justify-between">
          <p class="text-gray-600">Questions about the Terms of Service?</p>
          <a href="mailto:legal@example.com" class="inline-flex items-center text-blue-600 hover:text-blue-500">
            <svg class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
            </svg>
            Contact Us
          </a>
        </div>
      </section>
    </div>
  </div>
</div>

Related Examples

Testimonial that What Client Says

Abdul Baset Bappy

1 year ago

1.9k
dashboard

Anonymous

3 weeks ago

36
Interactive 3D Morphing Globe - Sphere to Star
3D interactive particle globe that morphs between a sphere and a star shape. Features custom glassmorphism UI, click-to-pulse bloom effects, and dynamic color themes. Built by Mostafa Niloy (Visernic Limited) using Three.js and Tailwind CSS.

Visernic

5 months ago

524
How it work

JUGENDRA GANGWAR

1 week ago

14
Tailwind CSS Navbar
Logo on the left. Main menu with a mega menu under "Services". Responsive design with a hamburger menu for mobile devices. Mega menu appears on hover for desktop and toggles on click for mobile.

KULDEEP

1 year ago

2k
delivery
It will help us get our stuff delivered to your home in a way that your ordered items are delivered to your home.

Nishimwe Jeanine

1 year ago

1.3k
Password Generator
This is a simple and responsive Password Generator built with HTML, Vanilla JavaScript, and Tailwind CSS. It allows users to create secure passwords by selecting custom options such as length, uppercase letters, lowercase letters, numbers, and symbols. Ideal for developers or users looking for a fast and customizable password tool.

SAURAV SINGH

1 year ago

1.5k
Login with social media

Anonymous

2 weeks ago

10
walletp2p

Anonymous

1 year ago

2.2k
Creative Bento Gallery
A modern bento-style gallery combining differently sized image cards in a structured and visually engaging layout.

JUGENDRA GANGWAR

3 months ago

321
dashboard2

John

4 weeks ago

15
About us section with Stats

JUGENDRA GANGWAR

3 weeks ago

38