Palabra (ventanita desplegable multiproposito)

<label class="MM022"><input type="checkbox"><b>Palabra</b>
<div><div><strong><i>Título Aquí</i><b>×</b></strong>
<div class="MM022-txt"><div><div style="background-image: url(https://i.pinimg.com/564x/53/65/ae/5365aec07ec2ee1032a9fe0ce115e737.jpg);"></div></div><span>Gummi bears marzipan croissant chocolate cupcake tootsie roll caramels toffee pie.

Donut carrot cake candy canes gingerbread gingerbread gingerbread cake.

Jujubes brownie topping. Biscuit sugar plum icing chocolate cake croissant danish.</span></div></div></div></label>

<style>.MM022, .MM022 * { box-sizing: border-box; scrollbar-color: var(--mm-uno) #0002; scrollbar-width: thin; transition: .5s; } .MM022 { cursor: crosshair; margin: 0; } .MM022 > b { color: #2d87e6; } .MM022 > b:hover { color: #d00000; } .MM022 > div { position: fixed; background: #0009; top: -100px; left: -100px; right: -100px; bottom: -100px; z-index: 999; display: flex; align-items: center; justify-content: center; opacity: 0; filter: blur(100px); pointer-events: none; } .MM022 > input:checked ~ div { opacity: 1; filter: blur(0px); pointer-events: auto; } .MM022 > div > div { width: 350px; background: #222; border: 1px #111; box-shadow: 0 20px 30px -20px #000; color: #BBB; cursor: auto; } .MM022 > div > div > strong { display: flex; border-bottom: 1px solid #111; background: #0003; align-items: center; } .MM022 > div > div > strong i { padding: 6px 8px 4px; font: bold 10px calibri; text-transform: uppercase; letter-spacing: 2px; flex: 1; } .MM022 > div > div > strong b { padding: 10px; line-height: 6px; border-left: 1px solid #111; cursor: crosshair; } .MM022 > div > div > strong b:hover { background: #ff00004a; } .MM022-txt { display: flex; } .MM022-txt > span { flex: 1; height: 170px; border: 20px solid transparent; overflow: auto; font: 12px calibri; padding-right: 3px; } .MM022-txt > div { width: 120px; border-right: 1px solid #111; padding: 10px; } .MM022-txt > div > div { height: 100%; border: 1px solid #111; padding: 5px; box-shadow: inset 0 0 0 5px #0003; background-position: center; background-size: cover; background-clip: content-box; } .MM022 input, .MM022 br { display: none; } .MM022-txt > span br { display: block; margin: 5px; } .MM div::-webkit-scrollbar { width: 5px !important; height: 5px !important; background: #0002 !important; } .MM022 div::-webkit-scrollbar-thumb { background: var(--mm-uno) !important; }</style>