<div class="cookie-settings">
<div class="cookie-header">
<h3>Cookie Preferences</h3>
<p>Manage your privacy settings. Essential cookies are always on.</p>
</div>
<div class="cookie-body">
<div class="preference-item">
<div class="pref-info">
<strong>Essential</strong>
<span>Required for the site to work.</span>
</div>
<label class="switch disabled">
<input type="checkbox" checked disabled>
<span class="slider"></span>
</label>
</div>
<div class="preference-item">
<div class="pref-info">
<strong>Analytics</strong>
<span>Helps us improve our website.</span>
</div>
<label class="switch">
<input type="checkbox" checked>
<span class="slider"></span>
</label>
</div>
<div class="preference-item">
<div class="pref-info">
<strong>Marketing</strong>
<span>Used for targeted advertising.</span>
</div>
<label class="switch">
<input type="checkbox">
<span class="slider"></span>
</label>
</div>
</div>
<div class="cookie-footer">
<button class="btn-secondary">Reject All</button>
<button class="btn-primary">Save Preferences</button>
</div>
</div>
Back to Snippets
Cookie Preferences Modal HTML & CSS
Allow users to choose which cookies they accept with this detailed settings modal. It features toggles for different categories like analytics and marketing, which helps you comply with GDPR regulations while respecting user privacy.
344