Kcko

<!-- https://play.tailwindcss.com/CF9WdM43Jf -->

<section class="bg-slate-900 min-h-screen text-slate-100">

    <!-- Shopping Cart -->
    <div class="rounded-md bg-slate-800 p-8 grid grid-cols-[auto_1fr_auto_auto_auto] gap-6">
        <div class="grid gap-6 col-span-5 grid-cols-subgrid">
            <p class="col-span-2">Product</p>
            <p>Price</p>
            <p>Quantity</p>

Kcko

<!--
https://github.com/tailwindlabs/tailwindcss-aspect-ratio/blob/master/src/index.js#L39
https://play.tailwindcss.com/4cuLPqCv05
https://www.youtube.com/watch?v=sxxUK0l8jKE
-->

<div class="p-20 flex justify-center items-center gap-12">
  <img class="avatar-sm" src="https://res.cloudinary.com/thirus/image/upload/v1705061543/images/avatar.png" alt="" />
  <img class="avatar" src="https://res.cloudinary.com/thirus/image/upload/v1705061543/images/avatar.png" alt="" />
  <img class="avatar-lg" src="https://res.cloudinary.com/thirus/image/upload/v1705061543/images/avatar.png" alt="" />

Kcko

<div class="bg-green-200 hocus:bg-red-300">cusss</div>
<hr>
<div data-error=true class="error:bg-red-600 error:text-white">
  
  Chyba?
  
  <div class="error:bg-blue-300">Chyba 2 - child</div>  
</div>

Kcko

<script setup>
import   { useSlots, onMounted, ref } from "vue";

const test = ref()

onMounted(() => {
// 1
console.log(test.value.children[0])
 
 // 2 nebo bez refu primo ze slotu useSlots().default()[0].el

Kcko

// Parallel
async function getData() {
    const [user, posts] = await Promise.all([
        fetchUserData(),
        fetchPostsData()
    ]);
    console.log(user, posts);
}

Kcko

<script>
export default {
  data() {
    return {
      status: 'idle',
    };
  },
  methods: {
    copy(text) {
      // create textarea

Kcko

<template>
    <h3 class="mb-2 mt-6 text-lg font-medium">{{ label }}</h3>
    <div class="grid grid-cols-3 gap-5">
        <label class="col-span-2 block text-sm font-medium text-gray-700">
            Street
            <input class="block mt-1 w-full text-sm placeholder-gray-400 rounded-md border-gray-300 focus:ring-blue-500 focus:border-blue-500"
                   type="text"
                   @input="$emit('update:street', $event.target.value)"
                   :value="street"
                   placeholder="Street"/>

Kcko

<template>
  <div class="my-20 mx-auto px-10 w-full">
    <label class="block text-sm w-full font-medium text-gray-700">
      Street
      <input type="text"
             ref="streetRef"
             placeholder="Search street..."
             class="block mt-1 w-full text-sm placeholder-gray-400 rounded-md border-gray-300 focus:ring-blue-500 focus:border-blue-500">
    </label>
  </div>

Kcko

<script setup>
import axios from "axios";
import Player from "@vimeo/player";
import {throttle} from "lodash";
import ForwardIcon from "./svgs/ForwardIcon";
import BackwardIcon from "./svgs/BackwardIcon";
import LoadingIcon from "./svgs/LoadingIcon";
import {computed, onMounted, onUnmounted, ref, useSlots} from "vue";

const props = defineProps({

Kcko

<script setup>
import ShoppingCart from "./ShoppingCart.vue";
import {ref} from "vue";
 
const isOpened = ref(false);
</script>
 
<template>
  <button @click="isOpened = true">Open cart</button>
  <ShoppingCart :is-opened="isOpened" @toggle="(value) => isOpened = value"/>