Settings Toggle Card

<!DOCTYPE html>
<title>My Example</title>

<style>
/* This is an optional body style to provide a background for the page */
body {
    background-color: #f3f4f6;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
}

/* Container for the settings cards */
.settings-list-container {
    background-color: #ffffff;
    max-width: 600px;
    margin: 2rem auto;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.06);
    overflow: hidden;
}

.settings-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.settings-list li:not(:last-child) {
    border-bottom: 1px solid #e5e7eb;
}

/* === Settings Toggle Card Styles === */
.stc-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    gap: 1.5rem;
}

.stc-content {
    flex-grow: 1;
}

.stc-title {
    font-size: 1rem;
    font-weight: 500;
    color: #1f2937;
    margin: 0;
}
.stc-description {
    font-size: 0.875rem;
    color: #6b7280;
    margin: 0.25rem 0 0;
}

/* The CSS Toggle Switch */
.stc-toggle-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}
.stc-toggle-switch input { 
    opacity: 0;
    width: 0;
    height: 0;
}

.stc-toggle-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 24px;
}

.stc-toggle-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked + .stc-toggle-slider {
    background-color: #4f46e5;
}

input:focus-visible + .stc-toggle-slider {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #4f46e5;
}

input:checked + .stc-toggle-slider:before {
    transform: translateX(20px);
}
</style>

<div class="settings-list-container">
    <ul class="settings-list">
        <li>
            <div class="stc-card">
                <div class="stc-content">
                    <label for="toggle-email" class="stc-title">Email Notifications</label>
                    <p class="stc-description">Receive updates and marketing emails.</p>
                </div>
                <label class="stc-toggle-switch">
                    <input type="checkbox" id="toggle-email" checked>
                    <span class="stc-toggle-slider"></span>
                </label>
            </div>
        </li>
        <li>
            <div class="stc-card">
                <div class="stc-content">
                    <label for="toggle-push" class="stc-title">Push Notifications</label>
                    <p class="stc-description">Get instant alerts on your device.</p>
                </div>
                <label class="stc-toggle-switch">
                    <input type="checkbox" id="toggle-push">
                    <span class="stc-toggle-slider"></span>
                </label>
            </div>
        </li>
         <li>
            <div class="stc-card">
                <div class="stc-content">
                    <label for="toggle-dark" class="stc-title">Dark Mode</label>
                    <p class="stc-description">Enable the dark color scheme.</p>
                </div>
                <label class="stc-toggle-switch">
                    <input type="checkbox" id="toggle-dark">
                    <span class="stc-toggle-slider"></span>
                </label>
            </div>
        </li>
    </ul>
</div>