JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/dist/panzoom/panzoom.css"
/>
<style>
#myPanzoom {
max-width: 600px;
height: 300px;
background: #eee;
}
.f-custom-controls {
position: absolute;
border-radius: 4px;
overflow: hidden;
z-index: 1;
}
.f-custom-controls.top-right {
right: 16px;
top: 16px;
}
.f-custom-controls.bottom-right {
right: 16px;
bottom: 16px;
}
.f-custom-controls button {
width: 32px;
height: 32px;
background: none;
border: none;
margin: 0;
padding: 0;
background: #222;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.f-custom-controls svg {
pointer-events: none;
width: 18px;
height: 18px;
stroke: #fff;
stroke-width: 2;
}
.f-custom-controls button[disabled] svg {
opacity: 0.7;
}
[data-panzoom-action=toggleFS] g:first-child {
display: flex
}
[data-panzoom-action=toggleFS] g:last-child {
display: none
}
.in-fullscreen [data-panzoom-action=toggleFS] g:first-child {
display: none
}
.in-fullscreen [data-panzoom-action=toggleFS] g:last-child {
display: flex
}
</style>
</head>
<body>
<div>
<div class="f-panzoom" id="myPanzoom">
<div class="f-custom-controls top-right">
<button data-panzoom-action="toggleFS" class="toggleFullscreen">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
stroke="currentColor"
...