Home
Anonymous
Privacy Policy Page Template

Privacy Policy 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

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

Attractive Feature Section
With Gradient Color 6 Features

Author:
KULDEEP

3 weeks ago

157
Instagram Post UI Mockup
A static HTML and Tailwind CSS component that visually replicates the user interface of an Instagram post. This mockup includes the post header (avatar, username, options), image area, action buttons (like, comment, share, save), like count, caption, and comment section. It features responsive constraints and supports both light and dark mode, closely mimicking the look and feel of the actual Instagram app. Ideal for UI prototyping, style guides, or frontend development practice.

Author:
Hamza Atig

3 months ago

447
rotate card
rotate card

Author:
Tanvir Hasan Bappy (Tanvir)

8 months ago

1.3k
Checkbox models
Tailwind Checkbox models

Author:
QQ-VVN

2 months ago

420
Get in Touch – Let's Connect! Responsive Contact Section Using TailwindCSS
Need a website, have a project idea, or just want to say hello? Feel free to reach out! My Contact Section is built with Tailwind CSS, ensuring a clean, responsive, and user-friendly experience. Drop me a message, and let's create something amazing together!

Author:
Abdul Baset Bappy

4 months ago

488
OTP Verification Page
A responsive and interactive OTP verification page built with Tailwind CSS. The page features a gradient background, hover effects, and animations to enhance user experience. It includes input fields for the OTP, a resend OTP link, and a verify button. The design is optimized for both light and dark modes.

Author:
Abhiraj

6 months ago

1.2k
Mobile app
I'll create a comprehensive collection of professional app components that you can use to build modern mobile and web applications.

Author:
ishimwe prince

2 months ago

120
Login AND Signup
login and signup

Author:
Uwera Dorcas

2 months ago

191
Why Choose Us - Our Core Strengths
Discover what sets us apart with this engaging "Why Choose Us" section. Highlighting three key pillars—passion, honesty, and continuous improvement—this component features a bold, centered headline with a striking blue accent

Author:
Vikas Kushwah

4 months ago

516
Order History
Order History

Author:
Tanvir Hasan Bappy (Tanvir)

4 months ago

425
Modern Testimonial
A simple and easy to use component for reviews and testimonials.

Author:
Coastal UI

5 months ago

686
background animation
background animation

Author:
Jayendra Madara

1 year ago

2.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components