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)

1.2k

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

Play, Pause and Stop buttons

Author:
Lukas Müller

3 years ago

11.3k
Lifetime Access (iOS 26 Style)
Lifetime Access (iOS 26 Style)

Author:
Tanvir Hasan Bappy (Tanvir)

1 month ago

28
Forgot Password
Forgot Password

Author:
Tanvir Hasan Bappy (Tanvir)

1 month ago

103
Custom Audio Player
🎧 Custom Audio Player (HTML, Tailwind CSS & Alpine.js) A modern, responsive custom audio player built with Tailwind CSS and Alpine.js, designed for a smooth user experience and elegant visuals in both light and dark mode. ✨ Features: 🎵 Play, pause, and mute/unmute controls 📈 Interactive progress bar with seek functionality 🔊 Dynamic volume slider with live preview 🖼️ Album art and track details display ⌨️ Keyboard support — toggle play/pause with the spacebar 🌓 Fully responsive and dark-mode compatible This player uses minimal JavaScript, relying on Alpine.js for reactivity, and can be easily customized or integrated into any web project. Perfect for portfolios, podcasts, or music web apps.

Author:
wavy kits

3 months ago

558
Apple Dock Navigation Bar

Author:
Cristian

1 year ago

1.9k
Login Form (Balsamiq Look)

Author:
Ahmad Syaifuddin

3 months ago

359
portfolio
This portfolio page for Claire includes: 1. Responsive design that works on both desktop and mobile 2. Indigo-800 and Blue-900 color scheme for the background 3. Dark mode support (the design is already dark-themed) 4. Beautiful animations and effects: 1. Fade-in and slide-up animations for sections 2. Animated skill bars 3. Hover effects on projects and buttons 4. Smooth scrolling for navigation 5. Mobile-friendly navigation with a toggle menu 6. Sections for About, Skills, 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) Key features: - The background uses a gradient from Indigo-800 to Blue-900 - The header and footer have a frosted glass effect using backdrop filters - Text is white for high contrast against the dark background - Sections fade in and slide up as they enter the viewport - Skill bars animate when the skills section is in view - Project cards have a hover effect with scaling and increased opacity - 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 This implementation provides a visually appealing and functional portfolio page for Claire, using HTML, Tailwind CSS, and vanilla JavaScript for the interactions and animations.

Author:
nejaa badr

1 year ago

2.5k
cards
cards with background animation

Author:
Anonymous

2 years ago

11.4k
BONIMATOR Responsive Tailwind Starter Template
Responsive Tailwind Starter Template

Author:
Bonimater

7 months ago

809
Free SEO Audit & Analysis Tool
Instant SEO analysis of your website. Check 50+ ranking factors including on-page SEO, technical issues, and mobile performance.

Author:
MD Mostafa Niloy

2 months ago

102
Collapsible content

Author:
Rafferty Kim

2 years ago

13.8k
Upvote downvote buttons [alpine]
upvote and downvote buttons made as working version in alpine.js

Author:
Anonymous

2 years ago

9k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components