Tailwind + Vue + Oruga UI: Componente de Carta/Card - 44

▶

Vamos a crear un componente de carta o simplemente un montón de clases que definan una estructura en este caso para una carta una carta no es más que un contenedor usualmente de color blanco con algún borde puede con sombreado y poco más y algún espaciado:

src/css/main.css

.card {
   @apply bg-white p-6 rounded-md shadow-lg
}

Y luego usamos:

src/components/CRUD/Movies/ListComponent.vue

<h1>List</h1>

<div class="card">
   <div class="mb-4 ms-2">
    ***
  </o-table>
</div>

 Entonces esto usualmente lo colocamos como un elemento padre para colocar contenido por ejemplo todo este contenido:

src/components/CRUD/Movies/SaveComponent.vue

<div class="card">
  <o-field label="Title" :variant="errors.title ? 'danger' : ''" :message="errors.title">
  ***
  <o-button variant="primary" @click="send">Send</o-button>
</div>

Puedes personalizar a nivel del HTML o CSS el tamaño, color, entre otros aspectos que consideres importantes.