Home
Anonymous
Terms of Service Page Template

Terms of Service Page Template

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

Other

Author Anonymous

1.4k

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

Our features
Our features

Author:
Tanvir Hasan Bappy (Tanvir)

8 months ago

801
Footer
Elevate your website design with this sleek and minimalist light mode footer component by AB NAHID AGENCY. Crafted for clean UI experiences, it’s perfect for modern web apps, blogs, and business platforms. Easy to integrate, fully responsive, and built with scalability in mind—designed to blend seamlessly with any light-themed layout.

Author:
Abdul Jabbar Al Nahid

4 weeks ago

251
Popover
basic popover example

Author:
Dipti narayan

1 year ago

12.5k
Stepper - Without Buttons

Author:
farisubuntu

11 months ago

1.2k
htmlcss1

Author:
Anonymous

1 month ago

146
Aurora Spinner
Aurora Spinner using tailwindcss

Author:
Deepak Kumar Chouhan

7 months ago

1.1k
Notifications
Toast Notifications are lightweight and customizable components for displaying short messages or alerts. They are perfect for feedback on user actions, such as form submissions or system updates. Supports different types of notifications (success, error, warning, info). Automatically hides after a specified timeout. Option to include action buttons or close icons. Customizable styles, animation, and position on the screen.

Author:
Abhiraj

7 months ago

652
Hero Section
Modern Gradient Color Scheme - Uses a professional purple-to-teal gradient for visual appeal Animated Elements: Floating decorative circles with subtle animation Fade-in effect for the main illustration Pulsing status indicator Engaging Typography: Gradient text for key phrases Responsive font sizing Clean Poppins font family Social Proof Elements: Client avatars Star ratings Trust indicators ("Trusted by 500+ businesses") Call-to-Action Buttons: Primary gradient button Secondary outlined button Hover effects and transitions Visual Hierarchy: Clear headline with emphasis on transformation Supporting subheading Balanced layout with image Performance Indicators: ROI badge Growth metric badge Responsive Design: Works on mobile and desktop Grid layout that adapts to screen size

Author:
KULDEEP

1 month ago

342
HTMLCODE
123

Author:
Anonymous

1 month ago

62
htmlcss2

Author:
Elsa Khan

1 month ago

99
Fancy underline

Author:
Simon Scheffer

2 years ago

11.7k
Attractive Feature Section
With Gradient Color 6 Features

Author:
KULDEEP

1 month ago

195

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components