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

2.2k

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

Skill showcase section for resume / porfolio website
show skill progression

Author:
Ava Brown

2 years ago

13.8k
blockquote

Author:
Freja Jensen

3 years ago

10.1k
Profile Card with Transparent
Dynamic Background: Darker gradient background for better contrast Floating colored blobs for visual interest Profile Image Glow: Added a gradient glow effect behind the profile picture Smoother hover transition Typography Improvements: Larger, bolder name text Subtle hover underline animation for the name Better spacing and hierarchy

Author:
KULDEEP

7 months ago

740
Calculator
This calculator uses CSS although it can be passed directly to tailwind

Author:
Ameth Galarcio

1 year ago

2.1k
chat ui advanced
Professional chat ui, connect me for jsx https://abhirajk.vercel.app/

Author:
Abhiraj

1 year ago

1.5k
Periodic Table with Tailwind CSS

Author:
Michael Andreuzza

1 year ago

2.6k
Card blog
Targeta para blog

Author:
Raul antonio de la cruz hernandez

2 months ago

145
Upvote downvote buttons

Author:
Lucas Martinez

3 years ago

11.7k
Animated Ripple Avatar
Ripple Effect Avatar (Tailwind CSS Component) A visually striking animated component that displays a centered avatar or image surrounded by expanding ripple circles. Built with Tailwind CSS and custom animations, this effect simulates a pulsing or water ripple reaction, drawing attention to the central image. Ideal for user profile sections, hero banners, landing pages, or highlighted features in modern web interfaces. The ripples gradually fade and expand, creating a soft, calming motion that enhances interactivity and depth.

Author:
Code Master(Mfuranziza Dusabe Hamza)

8 months ago

1.2k
Fancy underline

Author:
Simon Scheffer

3 years ago

12.5k
Privacy policy page template

Author:
Sameer Sultana

2 years ago

18.9k
Content Discovery Platform with Search & Filter
A modern, responsive web application built with Tailwind CSS that showcases content cards with search and filter functionality.

Author:
Sufyan jutt

2 months ago

209

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components