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

1.7k

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

Payment Cards

Author:
Shammi Nethupul

1 year ago

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

Author:
M Junaid

8 months ago

560
Feeds
This is a responsive social media feed interface built with Tailwind CSS that features a clean, modern design with excellent color contrast and visual hierarchy. Here's a detailed breakdown of its components and layout:

Author:
ishimwe shadad

9 months ago

991
Portfolio
This responsive portfolio with dark mode support includes: 1. Fully responsive design that works on both desktop and mobile devices 2. Dark mode toggle with system preference detection and local storage persistence 3. Indigo-800 and Blue-900 color scheme for primary colors in light and dark modes 4. Beautiful animations and effects: 1. Fade-in and slide-up animations for sections using Intersection Observer 2. Hover effects on projects and buttons 3. Smooth scrolling for navigation 5. Mobile-friendly navigation with a toggle menu 6. Sections for About, Projects, and Contact 7. A contact form with styled inputs 8. Social media links in the footer 9. Accessibility considerations (proper heading structure, color contrast, focus styles, ARIA labels) Key features: - The color scheme uses Indigo-800 for light mode and orange-400 for dark mode as primary colors - Dark mode toggle in the header with a sun/moon icon - Sections fade in and slide up as they enter the viewport - Project cards have a hover effect with scaling and increased shadow - The contact form has animated focus states - Social media icons change color on hover - The layout is responsive, with a hamburger menu for mobile screens - Smooth scrolling behavior for navigation links - Dark mode preference is saved in local storage and syncs with system preference This implementation provides a visually appealing, accessible, and functional responsive portfolio with dark mode support, using HTML, Tailwind CSS, and vanilla JavaScript for the

Author:
nejaa badr

1 year ago

3.3k
Contact Page

Author:
Sedat Kumcu

1 year ago

1.8k
My Coding Journey
To transform a standard timeline into an engaging, scroll-driven narrative experience.

Author:
Code Master(Mfuranziza Dusabe Hamza)

6 months ago

611
Made a sinup form
Made a sinnup form

Author:
Sufyan jutt

1 month ago

185
Skill showcase section for resume / porfolio website
show skill progression

Author:
Ava Brown

2 years ago

14k
Checkbox models
Tailwind Checkbox models

Author:
QQ-VVN

10 months ago

1.1k
Multi Step form with javascript
A Beautiful multi step form using HTML CSS and JS

Author:
Walid Ahmad

1 year ago

1.4k
baseball bros
baseball

Author:
Abel Wright

3 weeks ago

169
Payment form

Author:
ORGIN_DREAMS

9 months ago

672

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components