wadez

<script setup>
import { defineRefs } from '@/helpers'
const inputs = defineRefs(['f1', 'f2', 'f3'])
//...
</script>

wadez

function defineRefs(refs) {
    return _.chain(refs).keyBy().mapValues(ref).value();
}

wadez

<script setup>
import { ref } from 'vue';

const inputs = {
    f1: ref(),
    f2: ref(),
    f3: ref(),
}

function clickMe(refId) {

wadez

<template>
    <div @click="clickMe('f1')">
        <input ref="f1" />
        <Icon/>
    </div>
    <div @click="clickMe('f2')">
        <input ref="f2" />
        <Icon/>
    </div>
    <div @click="clickMe('f3')">

wadez

/*
 * Subscribe to my YouTube
 * https://shorturl.at/anuV2
 */

const flatten = list => list.reduce((c, v) => {
    return c.concat(Array.isArray(v) ? flatten(v) : v)
}, [])

wadez

module.exports = {
  theme: {
    extend: {
      aspectRatio: {        
        '4/3': '4 / 3',
        'banner': '1500/500'      
      },
    },
  },
  plugins: [],

wadez

<iframe class="w-full aspect-video ..." 
        src="https://www.youtube.com/ ...">
</iframe>

wadez

<iframe class="w-full aspect-video ..." 
        src="https://www.youtube.com/ ...">
</iframe>

wadez

<!-- Pin to top left corner -->
<div class="relative aspect-square ...">
  <div class="absolute left-0 top-0 h-1/2 w-1/2 ...">01</div>
</div>

<!-- Span top edge -->
<div class="relative aspect-square ...">
  <div class="absolute inset-x-0 top-0 h-1/2 ...">02</div>
</div>

wadez

<ul class="divide-y border">
    <li class="p-3">a</li>
    <li class="p-3">b</li>
    <li class="p-3">c</li>
    <li class="p-3">d</li>
</ul>