Iconos en Angular con Font Awesome

Cursos Empresas Blog Live Conf Precios

Contenido del curso

Introducción

Maquetando con Tailwind

Componentes interactivos con Angular CDK

Drag and drop

Modales y listas

Table CDK

Próximos pasos para completar el Clon de Trello

Tomar examen

Iconos en Angular con Font Awesome

Comentarios

Johann Nicolás Nieto Cárdenas

student

En vez de poner ese div adicional que pone Nico para separar los íconos entre sí, pueden usan la propiedad gap-x-2 para separarlos entre sí:

<div class="flex items-center gap-x-2">
      <button class="text-white" type="button">
      	<fa-icon [icon]="faBell"></fa-icon>
      </button>
      <button class="text-white" type="button">
        <fa-icon [icon]="faInfoCircle"></fa-icon>
      </button>
      <button type="button" class="flex rounded-full" ...>
        ...
      </button>
</div>

David Matias Casco Lobos

student

Como reto personal, he renderizado los boards de forma dinámica (ngFor + Array de objetos) , a los objetos le puse propiedad label y color, label contiene el nombre del board y color contiene la clase de tailwind del color de background. Utilicé ngClass para renderizar el color.

Es un reto sencillo pero sirve para practicar.

Diego Lozano

student

Buen aporte, lo hice igual que tú y sirve demasiado para practicar.

José Nicolás Aristizabal Ramírez

student

Tengo la version 13.1.3 de angular y tuve problemas instalando Font Awesome 6 por ende tuve que intentar con la version 5 y funciona !!! Espero que no existan muchas diferencias entre estas versiones de Awesome

Rolando Fernández

student

En la versión 3.3.5 de TailwindCSS me funcionó la siguiente configuración

container: {
  screens: {
    mobile: "600px",
    tablet: "900px",
    desktop: "1200px",
  },
},

Victor Alfredo Matzar Say

student

Mi solución :):

<app-navbar></app-navbar>
<main class="container mx-auto md:flex">
  <aside class="hidden w-64 px-4 pt-10 md:block">
    <ul class="space-y-1">
      <li>
        <a
          class="text flex rounded py-1.5 text-sm font-medium transition duration-200 ease-out hover:bg-gray-200 hover:ease-in active:bg-sky-100 active:text-sky-500"
          href=""
          ><fa-icon class="mx-2" [icon]="faTrello"></fa-icon>
          <p>Boards</p></a
        >
      </li>
      <li>
        <a
          class="flex rounded py-1.5 text-sm font-medium transition duration-200 ease-out hover:bg-gray-200 hover:ease-in active:bg-sky-100 active:text-sky-500"
          href=""
          ><fa-icon class="mx-2" [icon]="faBorderTopLeft"></fa-icon>
          <p>Templates</p></a
        >
      </li>
      <li>
        <a
          class="flex rounded py-1.5 text-sm font-medium transition duration-200 ease-out hover:bg-gray-200 hover:ease-in active:bg-sky-100 active:text-sky-500"
          href=""
          ><fa-icon class="mx-2" [icon]="faChartLine"></fa-icon>
          <p>Home</p></a
        >
      </li>
    </ul>
  </aside>
  <article class="w-full">
    <section class="px-3">
      <h3 class="pt-5 font-medium md:pt-10">
        <fa-icon class="px-3" [icon]="faClock"></fa-icon> Recently viewed
      </h4>
      <div
        class="my-4 grid grid-cols-[repeat(auto-fit,minmax(200px,_1fr))] gap-4"
      >
        <div
          class="relative h-24 w-full rounded bg-blue-500 p-1.5 hover:cursor-pointer hover:opacity-75"
        >
          <p class="absolute font-semibold text-white">Demo</p>
        </div>
        <div
          class="relative h-24 w-full rounded bg-blue-500 p-1.5 hover:cursor-pointer hover:opacity-75"
        >
          <p class="absolute font-semibold text-white">Proob</p>
        </div>
        <div
          class="relative h-24 w-full rounded bg-blue-500 p-1.5 hover:cursor-pointer hover:opacity-75"
        >
          <p class="absolute font-semibold text-white">Proob</p>
        </div>
        <div
          class="relative h-24 w-full rounded bg-blue-500 p-1.5 hover:cursor-pointer hover:opacity-75"
        >
          <p class="absolute font-semibold text-white">Proob</p>
        </div>
      </div>
    </section>
  </article>
</main>

import { Component } from '@angular/core';
import { faTrello } from '@fortawesome/free-brands-svg-icons';
import { faClock } from '@fortawesome/free-regular-svg-icons';
import { faBorderTopLeft, faChartLine } from '@fortawesome/free-solid-svg-icons';

@Component({
  selector: 'app-boards',
  templateUrl: './boards.component.html'
})
export class BoardsComponent {
  faClock = faClock;
  faBorderTopLeft = faBorderTopLeft;
  faChartLine= faChartLine;
  faTrello = faTrello;
}

Sebastian Mateus Martinez

student

Solución del reto (no encontré todos los iconos así que puse los que mas se relacionara o pareciera): Original:

Clon:

https://github.com/Smateus919/Curso-cdk-tailwind

Brenda Sutara

student

Cómo puedo hacer para que los iconos sean regular? no se cómo cambiar para que los iconos no sean sólidos. Asi lo tengo ahora 👇

<button class="text-gray-800 text-xl" type="button">
     <fa-icon [icon]="faBell"></fa-icon>
</button>

asi quiero dejarlo 👇

Hearly Sebastian Huertas Perez

student

Mi solución

Juan Daniel Castrellon

student

Yo logré esto con mi solución

Comparto la solución por si alguien tiene una mejora:<app-navbar /><div class="flex flex-row w-auto h-auto bg-white mx-32 my-10 gap-10"> <div class="w-1/4"> <ul class="py-1 mb-3" > <li class="block py-3 px-4 font-bold text-base text-sky-900 hover:bg-sky-100 hover:text-sky-600 rounded"> <fa-icon [icon]="faTrello"></fa-icon> <a href="#" class="ml-4" >Board</a> </li> <li class="block py-3 px-4 font-bold text-base text-sky-900 hover:bg-sky-100 hover:text-sky-600 rounded"> <fa-icon [icon]="faGopuram"></fa-icon> <a href="#" class="ml-4" >Templates</a> </li> <li class="block py-3 px-4 font-bold text-base text-sky-900 hover:bg-sky-100 hover:text-sky-600 rounded"> <fa-icon [icon]="faHome"></fa-icon> <a href="#" class="ml-4" >Home</a> </li> </ul> <div class="flex w-auto"> <div class="text-sm px-4 w-11/12 text-gray-500 font-bold">Workspaces</div> <div class="w-1/12"><fa-icon [icon]="faPlus"></fa-icon></div> </div> </div> <div class="w-3/4"> <div class="flex gap-3 text-xl font-bold text-sky-950 pt-1 pl-3"> <fa-icon [icon]="faClock"></fa-icon> <span>Recently viewed</span> </div> <app-board color="sky-700">Demo</app-board> <div class="w-auto h-24" ></div> <h2 class="font-bold text-lg text-gray-500 ml-1 mb-3" > YOUR WORKSPACES </h3> <div class="flex w-auto h-auto justify-between" > <div class="flex bg-gradient-to-t from-red-700 to-red-300 h-12 w-12 rounded text-white text-3xl font-bold justify-center items-center ml-1"> J </div> <div class = "flex justify-center items-center ml-3 mr-10"> <h3 class="text-sky-950 font-bold text-lg" > Juan Daniel's workspace </h4> </div> <div class="flex gap-5 justify-start w-auto" > <button class="bg-sky-100 px-3 rounded text-sky-900 font-semibold my-1 hover:bg-sky-600 hover:text-white" >Boards</button> <button class="bg-sky-100 px-3 rounded text-sky-900 font-semibold my-1 hover:bg-sky-600 hover:text-white" >Views</button> <button class="bg-sky-100 px-3 rounded text-sky-900 font-semibold my-1 hover:bg-sky-600 hover:text-white" >Members</button> <button class="bg-sky-100 px-3 rounded text-sky-900 font-semibold my-1 hover:bg-sky-600 hover:text-white" >Settings</button> <button class="bg-sky-100 px-3 rounded text-sky-900 font-semibold my-1 hover:bg-sky-600 hover:text-white" >Upgrade</button> </div> </div> <div class="flex overflow-x-auto gap-3 w-auto" > <app-board color="sky-700" fontWeight="bold">Demo</app-board> <app-board color="sky-700" fontWeight="bold">Demo</app-board> <app-board color="sky-700" fontWeight="bold">Demo</app-board> <app-board color="sky-100" [location]="true" fontSize="sm">Create new board</app-board> </div> </div></div>

<app-navbar />
<div class="flex flex-row w-auto h-auto bg-white mx-32 my-10 gap-10">
  <div class="w-1/4">
    <ul class="py-1 mb-3" >
      <li class="block py-3 px-4 font-bold text-base text-sky-900 hover:bg-sky-100 hover:text-sky-600 rounded">
        <fa-icon [icon]="faTrello"></fa-icon>
        <a
          href="#"
          class="ml-4"
          >Board</a>
      </li>
      <li class="block py-3 px-4 font-bold text-base text-sky-900 hover:bg-sky-100 hover:text-sky-600 rounded">
        <fa-icon [icon]="faGopuram"></fa-icon>
        <a
          href="#"
          class="ml-4"
        >Templates</a>
      </li>
      <li class="block py-3 px-4 font-bold text-base text-sky-900 hover:bg-sky-100 hover:text-sky-600 rounded">
        <fa-icon [icon]="faHome"></fa-icon>
        <a
          href="#"
          class="ml-4"
        >Home</a>
      </li>
    </ul>
    <div class="flex w-auto">
      <div class="text-sm px-4 w-11/12 text-gray-500 font-bold">Workspaces</div>
      <div class="w-1/12"><fa-icon [icon]="faPlus"></fa-icon></div>
    </div>
  </div>
  <div class="w-3/4">
    <div class="flex gap-3 text-xl font-bold text-sky-950 pt-1 pl-3">
      <fa-icon [icon]="faClock"></fa-icon> <span>Recently viewed</span>
    </div>
    <app-board color="sky-700">Demo</app-board>
    <div
      class="w-auto h-24"
    ></div>
    <h2
      class="font-bold text-lg text-gray-500 ml-1 mb-3"
    >
      YOUR WORKSPACES
    </h3>
    <div
      class="flex w-auto h-auto justify-between"
    >
      <div class="flex bg-gradient-to-t from-red-700 to-red-300 h-12 w-12 rounded text-white text-3xl font-bold justify-center items-center ml-1">
        J
      </div>
      <div class = "flex justify-center items-center ml-3 mr-10">
        <h3
          class="text-sky-950 font-bold text-lg"
        >
          Juan Daniel's workspace
        </h4>
      </div>
      <div
        class="flex gap-5 justify-start w-auto"
      >
        <button
          class="bg-sky-100 px-3 rounded text-sky-900 font-semibold my-1 hover:bg-sky-600 hover:text-white"
        >Boards</button>
        <button
        class="bg-sky-100 px-3 rounded text-sky-900 font-semibold my-1 hover:bg-sky-600 hover:text-white"
        >Views</button>
        <button
        class="bg-sky-100 px-3 rounded text-sky-900 font-semibold my-1 hover:bg-sky-600 hover:text-white"
        >Members</button>
        <button
        class="bg-sky-100 px-3 rounded text-sky-900 font-semibold my-1 hover:bg-sky-600 hover:text-white"
        >Settings</button>
        <button
        class="bg-sky-100 px-3 rounded text-sky-900 font-semibold my-1 hover:bg-sky-600 hover:text-white"
        >Upgrade</button>
      </div>
    </div>
    <div
     class="flex overflow-x-auto gap-3 w-auto"
    >
      <app-board color="sky-700" fontWeight="bold">Demo</app-board>
      <app-board color="sky-700" fontWeight="bold">Demo</app-board>
      <app-board color="sky-700" fontWeight="bold">Demo</app-board>
      <app-board color="sky-100" [location]="true" fontSize="sm">Create new board</app-board>
  </div>
  </div>
</div>

Juan Daniel Castrellon

student

Yo logr<app-navbar /><div class="flex flex-row w-auto h-auto bg-white mx-32 my-10 gap-10"> <div class="w-1/4"> <ul class="py-1 mb-3" > <li class="block py-3 px-4 font-bold text-base text-sky-900 hover:bg-sky-100 hover:text-sky-600 rounded"> <fa-icon [icon]="faTrello"></fa-icon> <a href="#" class="ml-4" >Board</a> </li> <li class="block py-3 px-4 font-bold text-base text-sky-900 hover:bg-sky-100 hover:text-sky-600 rounded"> <fa-icon [icon]="faGopuram"></fa-icon> <a href="#" class="ml-4" >Templates</a> </li> <li class="block py-3 px-4 font-bold text-base text-sky-900 hover:bg-sky-100 hover:text-sky-600 rounded"> <fa-icon [icon]="faHome"></fa-icon> <a href="#" class="ml-4" >Home</a> </li> </ul> <div class="flex w-auto"> <div class="text-sm px-4 w-11/12 text-gray-500 font-bold">Workspaces</div> <div class="w-1/12"><fa-icon [icon]="faPlus"></fa-icon></div> </div> </div> <div class="w-3/4"> <div class="flex gap-3 text-xl font-bold text-sky-950 pt-1 pl-3"> <fa-icon [icon]="faClock"></fa-icon> <span>Recently viewed</span> </div> <app-board color="sky-700">Demo</app-board> <div class="w-auto h-24" ></div> <h2 class="font-bold text-lg text-gray-500 ml-1 mb-3" > YOUR WORKSPACES </h3> <div class="flex w-auto h-auto justify-between" > <div class="flex bg-gradient-to-t from-red-700 to-red-300 h-12 w-12 rounded text-white text-3xl font-bold justify-center items-center ml-1"> J </div> <div class = "flex justify-center items-center ml-3 mr-10"> <h3 class="text-sky-950 font-bold text-lg" > Juan Daniel's workspace </h4> </div> <div class="flex gap-5 justify-start w-auto" > <button class="bg-sky-100 px-3 rounded text-sky-900 font-semibold my-1 hover:bg-sky-600 hover:text-white" >Boards</button> <button class="bg-sky-100 px-3 rounded text-sky-900 font-semibold my-1 hover:bg-sky-600 hover:text-white" >Views</button> <button class="bg-sky-100 px-3 rounded text-sky-900 font-semibold my-1 hover:bg-sky-600 hover:text-white" >Members</button> <button class="bg-sky-100 px-3 rounded text-sky-900 font-semibold my-1 hover:bg-sky-600 hover:text-white" >Settings</button> <button class="bg-sky-100 px-3 rounded text-sky-900 font-semibold my-1 hover:bg-sky-600 hover:text-white" >Upgrade</button> </div> </div> <div class="flex overflow-x-auto gap-3 w-auto" > <app-board color="sky-700" fontWeight="bold">Demo</app-board> <app-board color="sky-700" fontWeight="bold">Demo</app-board> <app-board color="sky-700" fontWeight="bold">Demo</app-board> <app-board color="sky-100" [location]="true" fontSize="sm">Create new board</app-board> </div> </div></div>

Yo logré hacer esto con la maquetación.

Comparto mi código, y si alguien tiene mejoras súper :)

<app-navbar />
<div class="flex flex-row w-auto h-auto bg-white mx-32 my-10 gap-10">
  <div class="w-1/4">
    <ul class="py-1 mb-3" >
      <li class="block py-3 px-4 font-bold text-base text-sky-900 hover:bg-sky-100 hover:text-sky-600 rounded">
        <fa-icon [icon]="faTrello"></fa-icon>
        <a
          href="#"
          class="ml-4"
          >Board</a>
      </li>
      <li class="block py-3 px-4 font-bold text-base text-sky-900 hover:bg-sky-100 hover:text-sky-600 rounded">
        <fa-icon [icon]="faGopuram"></fa-icon>
        <a
          href="#"
          class="ml-4"
        >Templates</a>
      </li>
      <li class="block py-3 px-4 font-bold text-base text-sky-900 hover:bg-sky-100 hover:text-sky-600 rounded">
        <fa-icon [icon]="faHome"></fa-icon>
        <a
          href="#"
          class="ml-4"
        >Home</a>
      </li>
    </ul>
    <div class="flex w-auto">
      <div class="text-sm px-4 w-11/12 text-gray-500 font-bold">Workspaces</div>
      <div class="w-1/12"><fa-icon [icon]="faPlus"></fa-icon></div>
    </div>
  </div>
  <div class="w-3/4">
    <div class="flex gap-3 text-xl font-bold text-sky-950 pt-1 pl-3">
      <fa-icon [icon]="faClock"></fa-icon> <span>Recently viewed</span>
    </div>
    <app-board color="sky-700">Demo</app-board>
    <div
      class="w-auto h-24"
    ></div>
    <h2
      class="font-bold text-lg text-gray-500 ml-1 mb-3"
    >
      YOUR WORKSPACES
    </h3>
    <div
      class="flex w-auto h-auto justify-between"
    >
      <div class="flex bg-gradient-to-t from-red-700 to-red-300 h-12 w-12 rounded text-white text-3xl font-bold justify-center items-center ml-1">
        J
      </div>
      <div class = "flex justify-center items-center ml-3 mr-10">
        <h3
          class="text-sky-950 font-bold text-lg"
        >
          Juan Daniel's workspace
        </h4>
      </div>
      <div
        class="flex gap-5 justify-start w-auto"
      >
        <button
          class="bg-sky-100 px-3 rounded text-sky-900 font-semibold my-1 hover:bg-sky-600 hover:text-white"
        >Boards</button>
        <button
        class="bg-sky-100 px-3 rounded text-sky-900 font-semibold my-1 hover:bg-sky-600 hover:text-white"
        >Views</button>
        <button
        class="bg-sky-100 px-3 rounded text-sky-900 font-semibold my-1 hover:bg-sky-600 hover:text-white"
        >Members</button>
        <button
        class="bg-sky-100 px-3 rounded text-sky-900 font-semibold my-1 hover:bg-sky-600 hover:text-white"
        >Settings</button>
        <button
        class="bg-sky-100 px-3 rounded text-sky-900 font-semibold my-1 hover:bg-sky-600 hover:text-white"
        >Upgrade</button>
      </div>
    </div>
    <div
     class="flex overflow-x-auto gap-3 w-auto"
    >
      <app-board color="sky-700" fontWeight="bold">Demo</app-board>
      <app-board color="sky-700" fontWeight="bold">Demo</app-board>
      <app-board color="sky-700" fontWeight="bold">Demo</app-board>
      <app-board color="sky-100" [location]="true" fontSize="sm">Create new board</app-board>
  </div>
  </div>
</div>

Alejandro Ruiz

student

Mi solucion!

Este es el codigo que hice para poner la estrellita en la esquina de abajo:

<div
          *ngFor="let board of boards"
          class="bg-sky-700 text-white px-4 py-2 flex flex-col justify-between w-full h-24 rounded"
        >
          <h1 class="capitalize">{{ board.title }}</h2>
          <div class="text-right text-sm">
            <button (click)="board.favorite = !board.favorite">
              <fa-icon [icon]="board.favorite ? faStarSolid : faStar"></fa-icon>
            </button>
          </div>
        </div>

Daniel Andrés Pinto Ortega

student

Para la versión 3.3.3 de Tailwind solo tendrían que agregar en 'themes' el siguiente código: screens:{ sm: '640px', md: '768px', lg: '1024px', xl: '1024px', '2xl': '1536px' }

<div class="flex items-center gap-x-2">
      <button class="text-white" type="button">
      	<fa-icon [icon]="faBell"></fa-icon>
      </button>
      <button class="text-white" type="button">
        <fa-icon [icon]="faInfoCircle"></fa-icon>
      </button>
      <button type="button" class="flex rounded-full" ...>
        ...
      </button>
</div>

<app-navbar></app-navbar>
<main class="container mx-auto md:flex">
  <aside class="hidden w-64 px-4 pt-10 md:block">
    <ul class="space-y-1">
      <li>
        <a
          class="text flex rounded py-1.5 text-sm font-medium transition duration-200 ease-out hover:bg-gray-200 hover:ease-in active:bg-sky-100 active:text-sky-500"
          href=""
          ><fa-icon class="mx-2" [icon]="faTrello"></fa-icon>
          <p>Boards</p></a
        >
      </li>
      <li>
        <a
          class="flex rounded py-1.5 text-sm font-medium transition duration-200 ease-out hover:bg-gray-200 hover:ease-in active:bg-sky-100 active:text-sky-500"
          href=""
          ><fa-icon class="mx-2" [icon]="faBorderTopLeft"></fa-icon>
          <p>Templates</p></a
        >
      </li>
      <li>
        <a
          class="flex rounded py-1.5 text-sm font-medium transition duration-200 ease-out hover:bg-gray-200 hover:ease-in active:bg-sky-100 active:text-sky-500"
          href=""
          ><fa-icon class="mx-2" [icon]="faChartLine"></fa-icon>
          <p>Home</p></a
        >
      </li>
    </ul>
  </aside>
  <article class="w-full">
    <section class="px-3">
      <h3 class="pt-5 font-medium md:pt-10">
        <fa-icon class="px-3" [icon]="faClock"></fa-icon> Recently viewed
      </h4>
      <div
        class="my-4 grid grid-cols-[repeat(auto-fit,minmax(200px,_1fr))] gap-4"
      >
        <div
          class="relative h-24 w-full rounded bg-blue-500 p-1.5 hover:cursor-pointer hover:opacity-75"
        >
          <p class="absolute font-semibold text-white">Demo</p>
        </div>
        <div
          class="relative h-24 w-full rounded bg-blue-500 p-1.5 hover:cursor-pointer hover:opacity-75"
        >
          <p class="absolute font-semibold text-white">Proob</p>
        </div>
        <div
          class="relative h-24 w-full rounded bg-blue-500 p-1.5 hover:cursor-pointer hover:opacity-75"
        >
          <p class="absolute font-semibold text-white">Proob</p>
        </div>
        <div
          class="relative h-24 w-full rounded bg-blue-500 p-1.5 hover:cursor-pointer hover:opacity-75"
        >
          <p class="absolute font-semibold text-white">Proob</p>
        </div>
      </div>
    </section>
  </article>
</main>

import { Component } from '@angular/core';
import { faTrello } from '@fortawesome/free-brands-svg-icons';
import { faClock } from '@fortawesome/free-regular-svg-icons';
import { faBorderTopLeft, faChartLine } from '@fortawesome/free-solid-svg-icons';

@Component({
  selector: 'app-boards',
  templateUrl: './boards.component.html'
})
export class BoardsComponent {
  faClock = faClock;
  faBorderTopLeft = faBorderTopLeft;
  faChartLine= faChartLine;
  faTrello = faTrello;
}

<app-navbar />
<div class="flex flex-row w-auto h-auto bg-white mx-32 my-10 gap-10">
  <div class="w-1/4">
    <ul class="py-1 mb-3" >
      <li class="block py-3 px-4 font-bold text-base text-sky-900 hover:bg-sky-100 hover:text-sky-600 rounded">
        <fa-icon [icon]="faTrello"></fa-icon>
        <a
          href="#"
          class="ml-4"
          >Board</a>
      </li>
      <li class="block py-3 px-4 font-bold text-base text-sky-900 hover:bg-sky-100 hover:text-sky-600 rounded">
        <fa-icon [icon]="faGopuram"></fa-icon>
        <a
          href="#"
          class="ml-4"
        >Templates</a>
      </li>
      <li class="block py-3 px-4 font-bold text-base text-sky-900 hover:bg-sky-100 hover:text-sky-600 rounded">
        <fa-icon [icon]="faHome"></fa-icon>
        <a
          href="#"
          class="ml-4"
        >Home</a>
      </li>
    </ul>
    <div class="flex w-auto">
      <div class="text-sm px-4 w-11/12 text-gray-500 font-bold">Workspaces</div>
      <div class="w-1/12"><fa-icon [icon]="faPlus"></fa-icon></div>
    </div>
  </div>
  <div class="w-3/4">
    <div class="flex gap-3 text-xl font-bold text-sky-950 pt-1 pl-3">
      <fa-icon [icon]="faClock"></fa-icon> <span>Recently viewed</span>
    </div>
    <app-board color="sky-700">Demo</app-board>
    <div
      class="w-auto h-24"
    ></div>
    <h2
      class="font-bold text-lg text-gray-500 ml-1 mb-3"
    >
      YOUR WORKSPACES
    </h3>
    <div
      class="flex w-auto h-auto justify-between"
    >
      <div class="flex bg-gradient-to-t from-red-700 to-red-300 h-12 w-12 rounded text-white text-3xl font-bold justify-center items-center ml-1">
        J
      </div>
      <div class = "flex justify-center items-center ml-3 mr-10">
        <h3
          class="text-sky-950 font-bold text-lg"
        >
          Juan Daniel's workspace
        </h4>
      </div>
      <div
        class="flex gap-5 justify-start w-auto"
      >
        <button
          class="bg-sky-100 px-3 rounded text-sky-900 font-semibold my-1 hover:bg-sky-600 hover:text-white"
        >Boards</button>
        <button
        class="bg-sky-100 px-3 rounded text-sky-900 font-semibold my-1 hover:bg-sky-600 hover:text-white"
        >Views</button>
        <button
        class="bg-sky-100 px-3 rounded text-sky-900 font-semibold my-1 hover:bg-sky-600 hover:text-white"
        >Members</button>
        <button
        class="bg-sky-100 px-3 rounded text-sky-900 font-semibold my-1 hover:bg-sky-600 hover:text-white"
        >Settings</button>
        <button
        class="bg-sky-100 px-3 rounded text-sky-900 font-semibold my-1 hover:bg-sky-600 hover:text-white"
        >Upgrade</button>
      </div>
    </div>
    <div
     class="flex overflow-x-auto gap-3 w-auto"
    >
      <app-board color="sky-700" fontWeight="bold">Demo</app-board>
      <app-board color="sky-700" fontWeight="bold">Demo</app-board>
      <app-board color="sky-700" fontWeight="bold">Demo</app-board>
      <app-board color="sky-100" [location]="true" fontSize="sm">Create new board</app-board>
  </div>
  </div>
</div>

<app-navbar />
<div class="flex flex-row w-auto h-auto bg-white mx-32 my-10 gap-10">
  <div class="w-1/4">
    <ul class="py-1 mb-3" >
      <li class="block py-3 px-4 font-bold text-base text-sky-900 hover:bg-sky-100 hover:text-sky-600 rounded">
        <fa-icon [icon]="faTrello"></fa-icon>
        <a
          href="#"
          class="ml-4"
          >Board</a>
      </li>
      <li class="block py-3 px-4 font-bold text-base text-sky-900 hover:bg-sky-100 hover:text-sky-600 rounded">
        <fa-icon [icon]="faGopuram"></fa-icon>
        <a
          href="#"
          class="ml-4"
        >Templates</a>
      </li>
      <li class="block py-3 px-4 font-bold text-base text-sky-900 hover:bg-sky-100 hover:text-sky-600 rounded">
        <fa-icon [icon]="faHome"></fa-icon>
        <a
          href="#"
          class="ml-4"
        >Home</a>
      </li>
    </ul>
    <div class="flex w-auto">
      <div class="text-sm px-4 w-11/12 text-gray-500 font-bold">Workspaces</div>
      <div class="w-1/12"><fa-icon [icon]="faPlus"></fa-icon></div>
    </div>
  </div>
  <div class="w-3/4">
    <div class="flex gap-3 text-xl font-bold text-sky-950 pt-1 pl-3">
      <fa-icon [icon]="faClock"></fa-icon> <span>Recently viewed</span>
    </div>
    <app-board color="sky-700">Demo</app-board>
    <div
      class="w-auto h-24"
    ></div>
    <h2
      class="font-bold text-lg text-gray-500 ml-1 mb-3"
    >
      YOUR WORKSPACES
    </h3>
    <div
      class="flex w-auto h-auto justify-between"
    >
      <div class="flex bg-gradient-to-t from-red-700 to-red-300 h-12 w-12 rounded text-white text-3xl font-bold justify-center items-center ml-1">
        J
      </div>
      <div class = "flex justify-center items-center ml-3 mr-10">
        <h3
          class="text-sky-950 font-bold text-lg"
        >
          Juan Daniel's workspace
        </h4>
      </div>
      <div
        class="flex gap-5 justify-start w-auto"
      >
        <button
          class="bg-sky-100 px-3 rounded text-sky-900 font-semibold my-1 hover:bg-sky-600 hover:text-white"
        >Boards</button>
        <button
        class="bg-sky-100 px-3 rounded text-sky-900 font-semibold my-1 hover:bg-sky-600 hover:text-white"
        >Views</button>
        <button
        class="bg-sky-100 px-3 rounded text-sky-900 font-semibold my-1 hover:bg-sky-600 hover:text-white"
        >Members</button>
        <button
        class="bg-sky-100 px-3 rounded text-sky-900 font-semibold my-1 hover:bg-sky-600 hover:text-white"
        >Settings</button>
        <button
        class="bg-sky-100 px-3 rounded text-sky-900 font-semibold my-1 hover:bg-sky-600 hover:text-white"
        >Upgrade</button>
      </div>
    </div>
    <div
     class="flex overflow-x-auto gap-3 w-auto"
    >
      <app-board color="sky-700" fontWeight="bold">Demo</app-board>
      <app-board color="sky-700" fontWeight="bold">Demo</app-board>
      <app-board color="sky-700" fontWeight="bold">Demo</app-board>
      <app-board color="sky-100" [location]="true" fontSize="sm">Create new board</app-board>
  </div>
  </div>
</div>

<div
          *ngFor="let board of boards"
          class="bg-sky-700 text-white px-4 py-2 flex flex-col justify-between w-full h-24 rounded"
        >
          <h1 class="capitalize">{{ board.title }}</h2>
          <div class="text-right text-sm">
            <button (click)="board.favorite = !board.favorite">
              <fa-icon [icon]="board.favorite ? faStarSolid : faStar"></fa-icon>
            </button>
          </div>
        </div>

Introducción

¿Qué es el Angular CDK?

Instalando Angular CDK y TailwindCSS

Maquetando con Tailwind

Maquetando la página de login con Tailwind

Maquetando formularios con Tailwind

Componente de botón reutilizable

Reto: colores y propiedades dinámicas

Componentes interactivos con Angular CDK

Creando Overlays

Múltiples Overlays