Privacy Policy 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.2k 6

Fork Fullscreen

<div class="min-h-screen bg-gray-50">
  <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">Privacy Policy</h1>

<section class="mb-8">
        <h2 class="text-xl font-semibold text-gray-800 mb-4">Information We Collect</h2>
        <p class="text-gray-600 leading-relaxed">
          We collect information that you provide directly to us, including when you create an account,
          make a purchase, sign up for our newsletter, or contact us for support. This may include:
        </p>
        <div class="mt-4 space-y-2">
          <div class="flex items-start">
            <div class="flex-shrink-0 h-6 w-6 text-blue-500">
              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
                  d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
              </svg>
            </div>
            <span class="ml-3 text-gray-600">Name and contact information</span>
          </div>
          <div class="flex items-start">
            <div class="flex-shrink-0 h-6 w-6 text-blue-500">
              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
                  d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
              </svg>
            </div>
            <span class="ml-3 text-gray-600">Payment information</span>
          </div>
          <div class="flex items-start">
            <div class="flex-shrink-0 h-6 w-6 text-blue-500">
              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
                  d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
              </svg>
            </div>
            <span class="ml-3 text-gray-600">Device and usage information</span>
          </div>
        </div>
      </section>

<section class="mb-8">
        <h2 class="text-xl font-semibold text-gray-800 mb-4">How We Use Your Information</h2>
        <div class="bg-gray-50 rounded-lg p-6">
          <ul class="space-y-4">
            <li class="flex items-start">
              <div class="flex-shrink-0 h-6 w-6 text-blue-500">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
                </svg>
              </div>
              <span class="ml-3 text-gray-600">To provide and maintain our services</span>
            </li>
            <li class="flex items-start">
              <div class="flex-shrink-0 h-6 w-6 text-blue-500">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
                </svg>
              </div>
              <span class="ml-3 text-gray-600">To process your transactions</span>
            </li>
            <li class="flex items-start">
              <div class="flex-shrink-0 h-6 w-6 text-blue-500">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
                </svg>
              </div>
              <span class="ml-3 text-gray-600">To send you marketing communications</span>
            </li>
          </ul>
        </div>
      </section>

<section class="mb-8">
        <h2 class="text-xl font-semibold text-gray-800 mb-4">Data Security</h2>
        <div class="prose text-gray-600">
          <p class="mb-4">
            We implement appropriate technical and organizational security measures to protect your personal
            information.
            However, please note that no method of transmission over the Internet is 100% secure.
          </p>
          <div class="bg-blue-50 border-l-4 border-blue-500 p-4 rounded">
            <p class="text-blue-700">
              We regularly review and update our security practices to enhance the protection of your data.
            </p>
          </div>
        </div>
      </section>

<section class="mb-8">
        <h2 class="text-xl font-semibold text-gray-800 mb-4">Your Rights</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">Access</h3>
            <p class="text-gray-600">You can request access to your personal data at any time.</p>
          </div>
          <div class="bg-gray-50 p-6 rounded-lg">
            <h3 class="font-medium text-gray-900 mb-2">Rectification</h3>
            <p class="text-gray-600">You can request correction of your personal data.</p>
          </div>
          <div class="bg-gray-50 p-6 rounded-lg">
            <h3 class="font-medium text-gray-900 mb-2">Erasure</h3>
            <p class="text-gray-600">You can request deletion of your personal data.</p>
          </div>
          <div class="bg-gray-50 p-6 rounded-lg">
            <h3 class="font-medium text-gray-900 mb-2">Portability</h3>
            <p class="text-gray-600">You can request transfer of your data to another service.</p>
          </div>
        </div>
      </section>

<section>
        <h2 class="text-xl font-semibold text-gray-800 mb-4">Contact Us</h2>
        <div class="bg-gray-50 rounded-lg p-6">
          <p class="text-gray-600 mb-4">
            If you have any questions about this Privacy Policy, please contact us at:
          </p>
          <div class="flex items-center space-x-2 text-blue-600">
            <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
              stroke="currentColor">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={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>
            <a href="mailto:privacy@example.com" class="hover:underline">privacy@example.com</a>
          </div>
        </div>
      </section>
    </div>
  </div>
</div>

Related Examples

Sticky fullpage pages / slides

Hasan AlDoy (McDoy)

1 year ago

2k
Ethical Fashion

Tanvir Hasan Bappy (Tanvir)

1 year ago

1.6k
Recipe card
A modern and responsive Tailwind CSS recipe card with image, ingredients, and instructions. Supports dark mode and mobile view.

Rajesh Pandey

1 year ago

1.9k
Cloudscape 404 Error Page
A unique responsive 404 page built with pure HTML and Tailwind CSS .

JUGENDRA GANGWAR

1 month ago

30
Model Performance Rings
Model Performance Rings

Omer fils ELENGA

3 weeks ago

30
3d element

Omer fils ELENGA

11 months ago

825
Bento grid

Anonymous

3 days ago

12
Login / Register Form
Tailwind CSS styling only – no frameworks required Smooth tab switch with JavaScript Fully responsive for mobile and desktop Clean, modern form design with interactive elements

KULDEEP

1 year ago

1.7k
AI Orb For Voice To Voice

Hamza Atig

7 months ago

906
Popover
basic popover example

Dipti narayan

3 years ago

13.8k
AI Trends Showcase
A clean and modern intelligence feed component for showcasing AI, technology, startup, and research updates with automatic rotation, smooth navigation, and responsive layouts. Perfect For Showcase AI, technology, and innovation stories using a premium editorial-style carousel. Designed with a clean dark aesthetic, automatic slide rotation, interactive breadcrumbs, navigation controls, and a responsive layout that works seamlessly across desktop and mobile devices.

Ayyamperumal S

4 months ago

327
Innovative Developer & Digital Creator
Innovative Developer

gidy

1 year ago

1.5k