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

Marquee Slider of Client Logos – Smooth Scrolling Brand Showcase
Enhance your website's credibility with a sleek marquee slider displaying client logos. This continuously scrolling slider provides a dynamic and engaging way to showcase your trusted partnerships, ensuring a professional and visually appealing design. Perfect for businesses, portfolios, and service-based websites.

M Junaid

1 year ago

1.5k
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.

Abhiraj

1 year ago

2k
Pixel Blast
Pixel Blast

Raul antonio de la cruz hernandez

11 months ago

1.3k
re schedule

Anonymous

18 hours ago

7
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

KULDEEP

1 year ago

1.4k
Product Details Page
This section will show all the information about a selected product, including its title, description, price, images, and specifications.

mohit kulkarni

1 year ago

1.5k
hello world
by salvator

Anonymous

1 year ago

1.2k
Native HTML Accordion
native html accordion summary details

Cristian

2 years ago

2.8k
tab6
table

Anonymous

4 days ago

18
Periodic Table with Tailwind CSS

Michael Andreuzza

2 years ago

3k
background animation
background animation

Anonymous

10 months ago

1.2k
Engineering Project Dashboard
Track engineering assignments, project progress, technology stack, and delivery timelines in one simple dashboard.

Ayyamperumal S

6 months ago

462