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 2.9k 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

carte visa black

Omer fils ELENGA

4 months ago

269
Fancy underline

Simon Scheffer

3 years ago

13.3k
login Form

John

6 days ago

8
Comparison Pricing Table Component
A responsive pricing table built with HTML and Tailwind CSS, comparing two plans (Free and Unlimited) with a clear feature checklist. Includes distinct styling for the premium plan and a toggle for monthly/annual pricing display.

Hamza Atig

1 year ago

2.1k
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.4k
Sidebar
This is the sidebar that I use in my projects, I use grid to be able to manage the space issue a little better, it seems like a clean and modern design, it is more than anything for the dashboards that you want to create

Ameth Galarcio

1 year ago

4.7k
default template

Anonymous

1 year ago

751
Apple Dock Navigation Bar

Cristian

1 year ago

3k
pages / slides

MD Fardous Alom

1 year ago

2.3k
Typewriter animation effect
Build using only Tailwind CSS; no JavaScript is required. This is a continuous typing effect. If you want to stop it after the text is typed for the first time, then you can remove 'infinite' from [typing: 'typing 2s steps(20) infinite alternate, blink .7s infinite'] from the config file.

Samuel Dawson

3 years ago

22.1k
admindashboard
creates a responsive, interactive admin dashboard using Tailwind CSS, Font Awesome, Chart.js, and custom JavaScript animations. It's called "Materially Dashboard" and is designed for presenting key statistics and analytics data in a visually appealing manner.

ishimwe shadad

1 year ago

1.4k
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

311