Tailwind CSS Call Device Settings Blocks

All Blocks
Application UI
Communication
Call Device Settings

Call Device Settings

Call device settings panels for camera, speaker, and microphone selection in video meeting interfaces.

Call Device Settings Panel with Camera Speaker and Microphone Selects Pro

Device settings panel stacks camera, speaker, and microphone selects with inline test actions and level meters.

Create a responsive UI block named "Call Device Settings Panel with Camera Speaker and Microphone Selects" that visually and behaviorally matches the Preline source block. Use the destination project's existing framework, Tailwind setup, semantic tokens, component primitives, icon system, routing/link conventions, and dark-mode strategy.

Implementation preflight:
- Exact public block reference: https://preline.co/blocks/communication/call-device-settings/#call-device-settings-panel-with-camera-speaker-and-microphone-selects. Open this exact anchored block and inspect its Preview and HTML tabs when browsing is available; do not use neighboring examples or surrounding docs chrome as source.
- Before writing code, inspect the destination project's package manifest, Tailwind/theme configuration, global styles, app shell/container conventions, icon system, and existing components. Reuse or compose an existing implementation when it already represents the same source partial or behavior; do not duplicate its markup, state, assets, or interaction logic.
- If neither the public reference nor local source paths are accessible, use only the explicit source-derived details in this prompt. If those details are insufficient, request the source HTML instead of guessing from the block title or category.

Build only this source block. Do not add unrelated page chrome, marketing sections, dashboard widgets, extra cards, extra modals, placeholder states, or footer content unless they are present in the source block.

Source metadata:
- Catalog family: communication/call-device-settings
- Block ID: call-device-settings-panel-with-camera-speaker-and-microphone-selects
- Source description: Device settings panel stacks camera, speaker, and microphone selects with inline test actions and level meters.
- Preview iframe: https://preline.co/blocks/communication/call-device-settings/iframes/pro/call-device-settings-panel-with-camera-speaker-and-microphone-selects.html (repo path: blocks/communication/call-device-settings/iframes/pro/call-device-settings-panel-with-camera-speaker-and-microphone-selects.html)
- Source markup reference:
  - partials/pro/video-call/layouts-components/video-and-call-interface.html

Use the source HTML tab and referenced partials as the source of truth. Preserve exact visible copy, content order, hierarchy, component density, spacing relationships, borders, radii, icons, status markers, dropdown/menu rows, form states, responsive order, and interaction content. If the source imports shared partials or assets, reuse those local components/assets when the destination can import them; otherwise recreate their visible structure faithfully from the source.

Block-specific fidelity rules:
- Preserve message grouping, avatar/channel badge anchoring, per-message action menus, timestamps, delivery/read-status icons, composer order, reply previews, and conversation pane density.
- Source content inventory (from the source markup):
  - Exactly 3 stacked groups in a `flex flex-col gap-y-10` column (preview width `w-full max-w-lg mx-auto`), labelled `Camera`, `Speaker`, `Microphone` with `block mb-1 font-medium text-sm text-foreground` labels. There is no panel heading, no card border, and no footer buttons.
  - Camera options, in order: a `Choose` placeholder option, then `FaceTime HD Camera (3A71:F4B5)` (selected on load), `Logitech C920 (1B2C:2C99)`, `Integrated Webcam (0A5C:5800)`, `OBS Virtual Camera`.
  - Speaker options: `Choose`, then `Default - MacBook Pro Microphone (Built-in)` (selected). Microphone options: `Choose`, then `MacBook Pro Microphone (Built-in) Default` (selected), then `Default - MacBook Pro Microphone (Built-in)` - the two device strings are deliberately near-duplicates with the word `Default` moved; copy them exactly.
  - All three controls are Preline HSSelect: a `<select class="hidden">` carrying a `data-hs-select='{...}'` JSON config with `"placeholder"` values `Select camera`/`Select speaker`/`Select microphone`, `"dropdownScope": "window"`, `"viewport": "#hs-modal-settings-body"` (that viewport element is not part of this standalone block), a checkmark shown on the selected option via `hs-selected:block`, and a toggle styled `py-2 px-9 ... bg-layer border border-layer-line rounded-lg text-sm`.
  - Each trigger shows two absolutely positioned icons injected through the config's `extraMarkup`: a `size-4.5` device glyph at `inset-s-3` (video camera, speaker-with-waves, microphone respectively) and a `size-4 text-muted-foreground-1` chevron-down at `inset-e-2`.
  - The Camera group has no test button and no level meter. Speaker and Microphone each add a `mt-3 flex flex-wrap justify-between items-center gap-2` row holding a `bg-surface text-surface-foreground py-2 px-3 text-sm rounded-lg` button - `Test speaker` with a play triangle icon, `Test microphone` with a concentric-circles icon.
  - Each meter is exactly 10 bars (`w-2.5 h-5 rounded-sm`, `role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"`) in a `flex gap-x-1 h-3.5` row: the speaker meter has its first 4 bars filled `bg-primary` and the remaining 6 `bg-surface-2`, while the microphone meter has all 10 bars `bg-surface-2` (nothing lit).
  - Runtime: the Preline HSSelect plugin plus Floating UI (`@floating-ui/core` and `@floating-ui/dom` UMD builds) for dropdown positioning; the meters are static markup with no live audio animation.

Token and Tailwind rules:
- Treat source token classes as semantic roles, not fixed class names to blindly copy.
- Map every source `primary` role to the destination project's current primary token/config/CSS variable. Active links, checked states, progress lines, focus rings, primary gradients, logo primary fills/strokes, and primary buttons must share that destination primary color.
- Do not hardcode Preline blue or emit `text-blue-*`, `bg-blue-*`, `border-blue-*`, `fill-blue-*`, `stroke-blue-*`, `from-blue-*`, `via-blue-*`, `to-blue-*`, or fixed blue hex/rgb values for primary roles unless the destination primary is explicitly blue.
- Before using source-only token classes such as `text-foreground-inverse`, `bg-layer`, `border-layer-line`, `bg-navbar`, `border-line-2`, `bg-dropdown`, or similar Preline tokens, inspect the destination Tailwind config, global CSS/theme variables, and existing components for an equivalent utility/token.
- Prefer existing destination utilities such as `text-white`, `text-primary-foreground`, `text-foreground`, `text-muted-foreground`, `bg-background`, `bg-card`, `bg-popover`, `border-border`, `bg-muted`, `bg-accent`, `ring-ring`, or app-specific tokens when they match the source role.
- If no equivalent exists, add the smallest project-appropriate token or utility before using it. Do not leave undefined source classes in the generated markup.

Asset and icon rules:
- Use exact source images, avatars, product media, branded SVGs, payment marks, channel logos, and app icons when the source provides them.
- Do not replace source assets with initials, emojis, generic icons, generated placeholders, or different stock media.
- Ordinary interface icons should match the destination icon system. If the project uses Lucide-style outline icons, keep the 24 viewBox, `fill="none"`, `stroke="currentColor"`, rounded caps/joins, and source stroke widths.
- Brand/source SVG shape is fixed content. Only map semantic colors such as primary fill/stroke to the destination token.

Behavior and accessibility:
- Preserve source interactions: links, buttons, dropdowns, tooltips, tabs, menus, drawers, modals, toggles, search, filters, form controls, validation states, loading/empty states, and open/closed defaults.
- For source behavior powered by Preline JS or a third-party package, inspect installed dependencies and existing primitives first. Reuse a destination primitive only when it can preserve the source geometry, states, accessibility, and behavior.
- Treat new dependencies as allowed by default unless the user, repository instructions, or package policy explicitly prohibit them. When no faithful equivalent exists, install/use the Preline UI runtime/plugin or the exact source third-party package; do not silently substitute ad hoc JavaScript or custom React state.
- Only under an explicit dependency prohibition may you implement a scoped framework-native equivalent. It must preserve keyboard and focus management, placement and layering, responsive behavior, and accessibility; static or simplified approximations are not acceptable.
- Use semantic HTML and accessible names. Keep `aria-current`, `aria-expanded`, `aria-haspopup`, `role`, labels, focus states, and keyboard behavior when the source exposes them or the destination primitive requires them.
- Desktop and mobile states must not overlap text, clip controls, or shift layout unexpectedly. Controls with icons, counters, badges, and labels should keep stable dimensions across hover/focus/active states.

Final QA:
- Compare the result against the source preview and HTML tab.
- Verify primary color follows the destination project, not Preline's default blue.
- Verify all emitted classes exist in the destination or are added deliberately.
- Verify responsive layout, focus states, dropdown/popover layering, long-text truncation, and source asset paths.
- Keep the final implementation scoped to this block and avoid unrelated refactors.

<div class="flex flex-col gap-y-10">
                      
                      <div>
                        <label class="block mb-1 font-medium text-sm text-foreground">
                          Camera
                        </label>

<div class="relative inline-block w-full">
                          <select id="hs-pro-select-camera" data-hs-select='{
                            "placeholder": "Select camera",
                            "toggleTag": "<button type=\"button\" aria-expanded=\"false\"><div data-icon></div></button>",
                            "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative py-2 px-9 flex gap-x-2 text-nowrap w-full cursor-pointer bg-layer border border-layer-line rounded-lg text-start text-sm text-layer-foreground hover:bg-surface-hover focus:outline-hidden focus:bg-surface-focus",
                            "dropdownClasses": "inset-e-0 w-full min-w-45 max-h-60 p-1 space-y-0.5 z-80 w-full overflow-hidden overflow-y-auto bg-select border border-select-line rounded-xl shadow-xl [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb",
                            "optionClasses": "hs-selected:bg-select-item-active py-2 px-4 w-full text-sm text-select-item-foreground cursor-pointer hover:bg-select-item-hover rounded-lg focus:outline-hidden focus:bg-select-item-focus",
                            "optionTemplate": "<div><div class=\"flex items-center gap-x-2\"><div data-icon></div><div class=\"text-foreground\" data-title></div><span class=\"hidden hs-selected:block ms-auto\"><svg class=\"shrink-0 size-3.5 text-foreground\" xmlns=\"http:.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"/></svg></span></div></div>",
                            "extraMarkup": "<div><div class=\"absolute top-1/2 inset-s-3 z-1 cursor-pointer -translate-y-1/2\"><svg class=\"shrink-0 size-4.5 text-foreground\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m16 13 5.223 3.482a.5.5 0 0 0 .777-.416V7.87a.5.5 0 0 0-.752-.432L16 10.5\"/><rect x=\"2\" y=\"6\" width=\"14\" height=\"12\" rx=\"2\"/></svg></div><div class=\"absolute top-1/2 inset-e-2 cursor-pointer -translate-y-1/2\"><svg class=\"shrink-0 size-4 text-muted-foreground-1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m6 9 6 6 6-6\"/></svg></div></div>",
                            "dropdownScope": "window",
                            "viewport": "#hs-modal-settings-body"
                          }' class="hidden">
                            <option value="">Choose</option>
                            <option selected>FaceTime HD Camera (3A71:F4B5)</option>
                            <option>Logitech C920 (1B2C:2C99)</option>
                            <option>Integrated Webcam (0A5C:5800)</option>
                            <option>OBS Virtual Camera</option>
                          </select>
                        </div>
                        
                      </div>

<div>
                        <label class="block mb-1 font-medium text-sm text-foreground">
                          Speaker
                        </label>

<div class="relative inline-block w-full">
                          <select id="hs-pro-select-speaker" data-hs-select='{
                            "placeholder": "Select speaker",
                            "toggleTag": "<button type=\"button\" aria-expanded=\"false\"><div data-icon></div></button>",
                            "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative py-2 px-9 flex gap-x-2 text-nowrap w-full cursor-pointer bg-layer border border-layer-line rounded-lg text-start text-sm text-layer-foreground hover:bg-surface-hover focus:outline-hidden focus:bg-surface-focus",
                            "dropdownClasses": "inset-e-0 w-full min-w-45 max-h-60 p-1 space-y-0.5 z-80 w-full overflow-hidden overflow-y-auto bg-select border border-select-line rounded-xl shadow-xl [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb",
                            "optionClasses": "hs-selected:bg-select-item-active py-2 px-4 w-full text-sm text-select-item-foreground cursor-pointer hover:bg-select-item-hover rounded-lg focus:outline-hidden focus:bg-select-item-focus",
                            "optionTemplate": "<div><div class=\"flex items-center gap-x-2\"><div data-icon></div><div class=\"text-foreground\" data-title></div><span class=\"hidden hs-selected:block ms-auto\"><svg class=\"shrink-0 size-3.5 text-foreground\" xmlns=\"http:.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"/></svg></span></div></div>",
                            "extraMarkup": "<div><div class=\"absolute top-1/2 inset-s-3 z-1 cursor-pointer -translate-y-1/2\"><svg class=\"shrink-0 size-4.5 text-foreground\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M11 4.702a.705.705 0 0 0-1.203-.498L6.413 7.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298z\"/><path d=\"M16 9a5 5 0 0 1 0 6\"/><path d=\"M19.364 18.364a9 9 0 0 0 0-12.728\"/></svg></div><div class=\"absolute top-1/2 inset-e-2 cursor-pointer -translate-y-1/2\"><svg class=\"shrink-0 size-4 text-muted-foreground-1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m6 9 6 6 6-6\"/></svg></div></div>",
                            "dropdownScope": "window",
                            "viewport": "#hs-modal-settings-body"
                          }' class="hidden">
                            <option value="">Choose</option>
                            <option selected>Default - MacBook Pro Microphone (Built-in)</option>
                            <option>MacBook Pro Microphone (Built-in) Default</option>
                          </select>
                        </div>

<div class="mt-3 flex flex-wrap justify-between items-center gap-2">
                          <button type="button" class="py-2 px-3 text-nowrap inline-flex justify-center items-center gap-x-2 text-start whitespace-nowrap bg-surface text-surface-foreground text-sm rounded-lg hover:bg-surface-hover focus:outline-hidden focus:bg-surface-focus disabled:opacity-50 disabled:pointer-events-none">
                            <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z"/></svg>
                            Test speaker
                          </button>

<div>
                        <label class="block mb-1 font-medium text-sm text-foreground">
                          Microphone
                        </label>

<div class="relative inline-block w-full">
                          <select id="hs-pro-select-microphone" data-hs-select='{
                            "placeholder": "Select microphone",
                            "toggleTag": "<button type=\"button\" aria-expanded=\"false\"><div data-icon></div></button>",
                            "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative py-2 px-9 flex gap-x-2 text-nowrap w-full cursor-pointer bg-layer border border-layer-line rounded-lg text-start text-sm text-layer-foreground hover:bg-surface-hover focus:outline-hidden focus:bg-surface-focus",
                            "dropdownClasses": "inset-e-0 w-full min-w-45 max-h-60 p-1 space-y-0.5 z-80 w-full overflow-hidden overflow-y-auto bg-select border border-select-line rounded-xl shadow-xl [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb",
                            "optionClasses": "hs-selected:bg-select-item-active py-2 px-4 w-full text-sm text-select-item-foreground cursor-pointer hover:bg-select-item-hover rounded-lg focus:outline-hidden focus:bg-select-item-focus",
                            "optionTemplate": "<div><div class=\"flex items-center gap-x-2\"><div data-icon></div><div class=\"text-foreground\" data-title></div><span class=\"hidden hs-selected:block ms-auto\"><svg class=\"shrink-0 size-3.5 text-foreground\" xmlns=\"http:.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"/></svg></span></div></div>",
                            "extraMarkup": "<div class=\"absolute top-1/2 inset-e-2 cursor-pointer -translate-y-1/2\"><svg class=\"shrink-0 size-4 text-muted-foreground-1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m6 9 6 6 6-6\"/></svg></div>",
                            "dropdownScope": "window",
                            "viewport": "#hs-modal-settings-body",
                            "extraMarkup": "<div><div class=\"absolute top-1/2 inset-s-3 z-1 cursor-pointer -translate-y-1/2\"><svg class=\"shrink-0 size-4.5 text-foreground \" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 19v3\"/><path d=\"M19 10v2a7 7 0 0 1-14 0v-2\"/><rect x=\"9\" y=\"2\" width=\"6\" height=\"13\" rx=\"3\"/></svg></div><div class=\"absolute top-1/2 inset-e-2 cursor-pointer -translate-y-1/2\"><svg class=\"shrink-0 size-4 text-muted-foreground-1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m6 9 6 6 6-6\"/></svg></div></div>"
                          }' class="hidden">
                            <option value="">Choose</option>
                            <option selected>MacBook Pro Microphone (Built-in) Default</option>
                            <option>Default - MacBook Pro Microphone (Built-in)</option>
                          </select>
                        </div>

<div class="mt-3 flex flex-wrap justify-between items-center gap-2">
                          <button type="button" class="py-2 px-3 text-nowrap inline-flex justify-center items-center gap-x-2 text-start whitespace-nowrap bg-surface text-surface-foreground text-sm rounded-lg hover:bg-surface-hover focus:outline-hidden focus:bg-surface-focus disabled:opacity-50 disabled:pointer-events-none">
                            <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="4"/><path d="M12 12h.01"/></svg>
                            Test microphone
                          </button>