Privacy Policy

This tailwind example is contributed by Tanvir Hasan Bappy (Tanvir), on 03-Dec-2024. Component is made with Tailwind CSS v3. It is responsive.

Other

Author Tanvir Hasan Bappy (Tanvir)

153

Fork Fullscreen

<div class="bg-gradient-to-r from-gray-50 to-gray-100 min-h-screen py-12">
  <div class="container mx-auto max-w-5xl px-6">
      <div class="bg-white rounded-lg shadow-xl p-8">
          
          <h1 class="text-4xl font-extrabold text-gray-800 text-center mb-10">
              <span class="text-[#006A4E]">Privacy Policy</span>
          </h1>

<section class="text-lg text-gray-600 mb-8 leading-relaxed">
              <p class="mb-4">
                  Welcome to <span class="font-semibold text-[#006A4E]">BongoChat</span>! Your privacy is our top priority. This document explains how we collect, use, and protect your information while ensuring transparency and trust.
              </p>
              <p>By using our services, you agree to the terms outlined in this Privacy Policy.</p>
          </section>

<div class="border-b border-gray-300 my-6"></div>

<section class="mb-8">
              <h2 class="text-2xl font-bold text-gray-800 mb-4 flex items-center">
                  <span class="bg-[#006A4E] text-white w-8 h-8 flex justify-center items-center rounded-full mr-3">
                      1
                  </span>
                  Information We Collect
              </h2>
              <ul class="list-inside list-disc text-gray-600 pl-4 space-y-2">
                  <li><strong>Account Information:</strong> Name, email address, phone number, profile photo.</li>
                  <li><strong>Content:</strong> Messages, images, videos, or files shared via chat or posts.</li>
                  <li><strong>Automatically Collected Data:</strong> Device information, IP address, usage data.</li>
                  <li><strong>Third-Party Data:</strong> Analytics or payment data from authorized SDKs.</li>
              </ul>
          </section>

<section class="mb-8">
              <h2 class="text-2xl font-bold text-gray-800 mb-4 flex items-center">
                  <span class="bg-[#006A4E] text-white w-8 h-8 flex justify-center items-center rounded-full mr-3">
                      2
                  </span>
                  How We Use Your Information
              </h2>
              <p class="text-gray-600 leading-relaxed">
                  Your data is used to provide and improve our services, personalize your experience, ensure security, and comply with legal obligations.
              </p>
          </section>

<section class="mb-8">
              <h2 class="text-2xl font-bold text-gray-800 mb-4 flex items-center">
                  <span class="bg-[#006A4E] text-white w-8 h-8 flex justify-center items-center rounded-full mr-3">
                      3
                  </span>
                  Data Sharing and Third-Party Access
              </h2>
              <p class="text-gray-600 mb-4">
                  We do not sell your data. However, we may share it with:
              </p>
              <ul class="list-disc list-inside pl-4 text-gray-600 space-y-2">
                  <li>Service providers for notifications or payment processing.</li>
                  <li>Legal authorities as required by law.</li>
              </ul>
          </section>

<section class="mb-8">
              <h2 class="text-2xl font-bold text-gray-800 mb-4 flex items-center">
                  <span class="bg-[#006A4E] text-white w-8 h-8 flex justify-center items-center rounded-full mr-3">
                      4
                  </span>
                  Account Deletion
              </h2>
              <p class="text-gray-600 mb-4">
                  You can delete your account anytime. To delete your account:
              </p>
              <ol class="list-decimal list-inside pl-4 text-gray-600 space-y-2">
                  <li>Go to <strong>Settings > Account > Delete Account</strong> in the app.</li>
                  <li>Confirm your request.</li>
              </ol>
              <p class="text-gray-600 mt-4">
                  Or send a deletion request to: 
                  <a href="mailto:support@bongochat.com.bd" class="text-[#006A4E] hover:underline">support@bongochat.com.bd</a>.
              </p>
          </section>

<section class="mb-8">
              <h2 class="text-2xl font-bold text-gray-800 mb-4 flex items-center">
                  <span class="bg-[#006A4E] text-white w-8 h-8 flex justify-center items-center rounded-full mr-3">
                      5
                  </span>
                  Contact Us
              </h2>
              <ul class="list-none pl-0 text-gray-600 space-y-2">
                  <li><strong>Email:</strong> <a href="mailto:support@bongochat.com.bd" class="text-[#006A4E] hover:underline">support@bongochat.com.bd</a></li>
                  <li><strong>Address:</strong> Jashore, Bangladesh</li>
              </ul>
          </section>

<section class="mt-8">
              <h2 class="text-2xl font-bold text-gray-800 mb-4 flex items-center">
                  <span class="bg-[#006A4E] text-white w-8 h-8 flex justify-center items-center rounded-full mr-3">
                      6
                  </span>
                  Data Deletion Form
              </h2>
              <p class="text-gray-600 mb-4">
                  Submit your data deletion request via the following link:
              </p>
              <a href="{% url 'pages:account_delete' %}" class="inline-block bg-[#006A4E] text-white px-6 py-2 rounded-lg shadow hover:bg-[#006A4E] transition">
                  Delete My Data
              </a>
          </section>
      </div>
  </div>
</div>

Related Examples

Tag Input field
This code creates a dynamic tag input field using HTML, JavaScript, and TailwindCSS. Users can type tags into the input field and press "Enter" to add them. Each tag is displayed inside the input field as a styled container with a remove button. The tag input is limited to a maximum of 5 tags, and an error message is shown if the limit is exceeded. Users can remove tags to free up space for new ones. The input field and tags are styled using TailwindCSS, ensuring a clean and responsive design.

Author:
Ranit Saha

4 days ago

34
Fancy underline

Author:
Simon Scheffer

1 year ago

10.5k
Invoice
Invoice

Author:
Ameth Galarcio

6 months ago

1.4k
Basic Terms of Service Page
Basic Terms of Service Page setup for light and dark mode. Repeat the sections to add as many as you need.

Author:
Monica D.

6 months ago

1.7k
Maintenance page template
The site is under maintenance placeholder page

Author:
Anonymous

1 year ago

6.3k
Popover
basic popover example

Author:
Dipti narayan

1 year ago

11.1k
Aurora Spinner
Aurora Spinner using tailwindcss

Author:
Deepak Kumar Chouhan

2 weeks ago

190
Privacy policy page template

Author:
Anonymous

8 months ago

1.5k
Background image section

Author:
Marc

1 year ago

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

Author:
Abhiraj

4 days ago

10
Maintenance page

Author:
Faye

1 month ago

125
Tailwind CSS Blog sharing buttons with blog details
Introducing our Blog Sharing Buttons with Blog Details component, designed to enhance the social sharing experience on your blog posts.

Author:
Abid Ullah

3 months ago

705

Explore components by Tags

Didn't find component you were looking for?

Search from 1900+ components