gistfile1.vue

<template>
  <div class="card">
    <input placeholder="Title" class="title" />
    <textarea
      placeholder="Write a description..."
      class="description"
    ></textarea>
    <div class="action">
      <button type="button">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          stroke-width="1.5"
          stroke="currentColor"
          class="size-6"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5"
          />
        </svg>
        <span>Due date</span>
      </button>
      <button type="button">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          stroke-width="1.5"
          stroke="currentColor"
          class="size-6"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="M9.568 3H5.25A2.25 2.25 0 0 0 3 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 0 0 5.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 0 0 9.568 3Z"
          />
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="M6 6h.008v.008H6V6Z"
          />
        </svg>
        <span>Label</span>
      </button>
      <button type="button">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          stroke-width="1.5"
          stroke="currentColor"
          class="size-6"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="M17.982 18.725A7.488 7.488 0 0 0 12 15.75a7.488 7.488 0 0 0-5.982 2.975m11.963 0a9 9 0 1 0-11.963 0m11.963 0A8.966 8.966 0 0 1 12 21a8.966 8.966 0 0 1-5.982-2.275M15 9.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
          />
        </svg>
        <span>Assign</span>
      </button>
    </div>
    <div class="footer">
      <button class="attachment" type="button">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          stroke-width="1.5"
          stroke="currentColor"
          class="size-6"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="m18.375 12.739-7.693 7.693a4.5 4.5 0 0 1-6.364-6.364l10.94-10.94A3 3 0 1 1 19.5 7.372L8.552 18.32m.009-.01-.01.01m5.699-9.941-7.81 7.81a1.5 1.5 0 0 0 2.112 2.13"
          />
        </svg>
        <span> Attach a file </span>
      </button>
      <button class="create" type="button">Create</button>
    </div>
  </div>
</template>

<style>
.card {
  border: 1px solid #e5e7eb;
  width: 576px;
  border-radius: 0.5rem;
}

.card .title {
  width: calc(100% - 1.5rem);
  margin: 0;
  border: 0;
  padding-top: 0.625rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.card .description {
  height: 46px;
  width: calc(100% - 1.5rem);
  padding: 0.375rem 0.75rem;
  border: 0;
  overflow-y: scroll;
  resize: none;
}

.card .action {
  display: flex;
  padding: 0.5rem 0.75rem;
  flex-direction: row-reverse;
}

.card .action button {
  display: flex;
  flex-direction: row;
  align-items: center;
  border: 0;
  background-color: rgb(249, 250, 251);
  border-radius: 9999px;
  padding: 0.5rem 0.75rem;
}

.card .action button svg {
  height: 20px;
  width: 20px;
}

.card .action button span {
  margin-left: 0.5rem;
}

.card .footer {
  display: flex;
  justify-content: space-between;
  align-items: center;

  border-top: 1px solid #e5e7eb;
  padding: 0.5rem 0.75rem;
  height: 36px;
}

.card .footer .attachment {
  font-style: italic;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: rgb(107, 114, 128);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: 0;
  background-color: transparent;
}

.card .footer .attachment svg {
  height: 16px;
  width: 16px;
  opacity: 0.5;
}

.card .footer .create {
  font-size: 0.875rem;
  line-height: 1.25rem;
  border: 0;
  border-radius: 0.375rem;
  padding: 0.5rem 0.75rem;
  color: white;
  background-color: rgb(79, 70, 229);
  font-weight: 600;
}
</style>