Tailwind + Vue + Oruga UI: Card Component - 44

▶

Let's create a letter component or simply a bunch of classes that define a structure in this case for a letter a letter is nothing more than a container usually white with some border maybe with shading and little else and some spacing:

src/css/main.css

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

And then we use:

src/components/CRUD/Movies/ListComponent.vue

<h1>List</h1>

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

So we usually put this as a parent element to place content, for example all this content:

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>

You can customize the size, color, and other aspects you consider important at the HTML or CSS level.