## Tarefa
Utilizando Tailwind CSS, criar um componente de cartão com os seguintes requisitos:
1. O cartão deve ter:
   - Largura máxima de `md`;
   - Cantos arredondados;
   - Cor de fundo.
2. O cartão deve conter:
   - Uma imagem que ocupe toda a largura do cartão;
   - Um título com texto em negrito e tamanho de fonte grande;
   - Um parágrafo com tamanho de fonte base e estilo itálico.
3. Adicionar badges ao cartão com:
   - Cantos arredondados e tamanho de fonte pequeno.


PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxtZXRhIGNoYXJzZXQ9IlVURi04IiAvPgogICAgPG1ldGEgbmFtZT0idmlld3BvcnQiIGNvbnRlbnQ9IndpZHRoPWRldmljZS13aWR0aCwgaW5pdGlhbC1zY2FsZT0xLjAiIC8+CiAgICA8dGl0bGU+Q2hhbGxlbmdlOiBDYXJkcyAtIFRhc2s8L3RpdGxlPgogICAgPHNjcmlwdCBzcmM9Imh0dHBzOi8vY2RuLnRhaWx3aW5kY3NzLmNvbSI+PC9zY3JpcHQ+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPGRpdiBjbGFzcz0ibWF4LXctX19fX18gX19fX18gb3ZlcmZsb3ctaGlkZGVuIHNoYWRvdy1sZyBfX19fXy1wdXJwbGUtMTAwIj4KICAgICAgPGltZwogICAgICAgIGNsYXNzPSJfX19fXy1fX19fXyIKICAgICAgICBzcmM9Imh0dHBzOi8vY29kZWZpbml0eS1jb250ZW50LW1lZGlhLXYyLnMzLmV1LXdlc3QtMS5hbWF6b25hd3MuY29tL2NvdXJzZXMvNjE1NTY3ZGEtYjA1My00Njc0LWI4OWMtMDUzMDU3ZDJiY2E3L3NlY3Rpb24tMy9mYW4ucG5nIgogICAgICAgIGFsdD0iU2FtcGxlIEltYWdlIgogICAgICAvPgogICAgICA8ZGl2IGNsYXNzPSJweC02IHB5LTQiPgogICAgICAgIDxoMiBjbGFzcz0iZm9udC1fX19fXyB0ZXh0LV9fX19fIHRleHQtcHVycGxlLTkwMCBtYi0yIj5DYXJkIFRpdGxlPC9oMj4KICAgICAgICA8cCBjbGFzcz0idGV4dC1wdXJwbGUtNzAwIHRleHQtX19fX18gX19fX18iPgogICAgICAgICAgVGhpcyBpcyBhIHNpbXBsZSBjYXJkIGNvbXBvbmVudCBjcmVhdGVkIHVzaW5nIFRhaWx3aW5kIENTUy4gSXQKICAgICAgICAgIGluY2x1ZGVzIGFuIGltYWdlLCBhIHRpdGxlLCBzb21lIHRleHQsIGFuZCBhY3Rpb25zLgogICAgICAgIDwvcD4KICAgICAgPC9kaXY+CiAgICAgIDxkaXYgY2xhc3M9InB4LTYgcHQtNCBwYi0yIj4KICAgICAgICA8c3BhbgogICAgICAgICAgY2xhc3M9ImlubGluZS1ibG9jayBiZy15ZWxsb3ctMjAwIF9fX19fLWZ1bGwgcHgtMyBweS0xIHRleHQtX19fX18gZm9udC1zZW1pYm9sZCB0ZXh0LXllbGxvdy03MDAgbXItMiBtYi0yIgogICAgICAgICAgPiN0YWcxPC9zcGFuCiAgICAgICAgPgogICAgICAgIDxzcGFuCiAgICAgICAgICBjbGFzcz0iaW5saW5lLWJsb2NrIGJnLXBpbmstMjAwIF9fX19fLWZ1bGwgcHgtMyBweS0xIHRleHQtX19fX18gZm9udC1zZW1pYm9sZCB0ZXh0LXBpbmstNzAwIG1yLTIgbWItMiIKICAgICAgICAgID4jdGFnMjwvc3BhbgogICAgICAgID4KICAgICAgICA8c3BhbgogICAgICAgICAgY2xhc3M9ImlubGluZS1ibG9jayBiZy1ncmVlbi0yMDAgX19fX18tZnVsbCBweC0zIHB5LTEgdGV4dC1fX19fXyBmb250LXNlbWlib2xkIHRleHQtZ3JlZW4tNzAwIG1yLTIgbWItMiIKICAgICAgICAgID4jdGFnMzwvc3BhbgogICAgICAgID4KICAgICAgPC9kaXY+CiAgICAgIDxkaXYgY2xhc3M9InB4LTYgcHQtNCBwYi0yIj4KICAgICAgICA8YnV0dG9uCiAgICAgICAgICBjbGFzcz0iYmctYmx1ZS01MDAgaG92ZXI6YmctYmx1ZS03MDAgdGV4dC13aGl0ZSBmb250LWJvbGQgcHktMiBweC00IHJvdW5kZWQiCiAgICAgICAgPgogICAgICAgICAgQWN0aW9uIDEKICAgICAgICA8L2J1dHRvbj4KICAgICAgICA8YnV0dG9uCiAgICAgICAgICBjbGFzcz0iYmctcmVkLTUwMCBob3ZlcjpiZy1yZWQtNzAwIHRleHQtd2hpdGUgZm9udC1ib2xkIHB5LTIgcHgtNCByb3VuZGVkIG1sLTIiCiAgICAgICAgPgogICAgICAgICAgQWN0aW9uIDIKICAgICAgICA8L2J1dHRvbj4KICAgICAgPC9kaXY+CiAgICA8L2Rpdj4KICA8L2JvZHk+CjwvaHRtbD4=

- Utilize `max-w-md` para definir a largura máxima do cartão;
- Utilize `rounded` para adicionar cantos arredondados ao cartão;
- Utilize `bg-purple-100` para definir a cor de fundo do cartão;
- Utilize `w-full` para que a imagem ocupe toda a largura do cartão;
- Utilize `font-bold` para aplicar negrito ao texto;
- Utilize `text-xl` para definir um tamanho de fonte maior para o título;
- Utilize `text-base` para definir o tamanho de fonte base para o texto do parágrafo;
- Utilize `italic` para aplicar estilo itálico ao texto;
- Utilize `rounded-full` para adicionar cantos arredondados às badges;
- Utilize `text-sm` para definir o tamanho de fonte pequeno para as badges.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxtZXRhIGNoYXJzZXQ9IlVURi04IiAvPgogICAgPG1ldGEgbmFtZT0idmlld3BvcnQiIGNvbnRlbnQ9IndpZHRoPWRldmljZS13aWR0aCwgaW5pdGlhbC1zY2FsZT0xLjAiIC8+CiAgICA8dGl0bGU+Q2hhbGxlbmdlOiBDYXJkcyAtIFNvbHV0aW9uPC90aXRsZT4KICAgIDxzY3JpcHQgc3JjPSJodHRwczovL2Nkbi50YWlsd2luZGNzcy5jb20iPjwvc2NyaXB0PgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxkaXYgY2xhc3M9Im1heC13LW1kIHJvdW5kZWQgb3ZlcmZsb3ctaGlkZGVuIHNoYWRvdy1sZyBiZy1wdXJwbGUtMTAwIj4KICAgICAgPGltZwogICAgICAgIGNsYXNzPSJ3LWZ1bGwiCiAgICAgICAgc3JjPSJodHRwczovL2NvZGVmaW5pdHktY29udGVudC1tZWRpYS12Mi5zMy5ldS13ZXN0LTEuYW1hem9uYXdzLmNvbS9jb3Vyc2VzLzYxNTU2N2RhLWIwNTMtNDY3NC1iODljLTA1MzA1N2QyYmNhNy9zZWN0aW9uLTMvZmFuLnBuZyIKICAgICAgICBhbHQ9IlNhbXBsZSBJbWFnZSIKICAgICAgLz4KICAgICAgPGRpdiBjbGFzcz0icHgtNiBweS00Ij4KICAgICAgICA8aDIgY2xhc3M9ImZvbnQtYm9sZCB0ZXh0LXhsIHRleHQtcHVycGxlLTkwMCBtYi0yIj5DYXJkIFRpdGxlPC9oMj4KICAgICAgICA8cCBjbGFzcz0idGV4dC1wdXJwbGUtNzAwIHRleHQtYmFzZSBpdGFsaWMiPgogICAgICAgICAgVGhpcyBpcyBhIHNpbXBsZSBjYXJkIGNvbXBvbmVudCBjcmVhdGVkIHVzaW5nIFRhaWx3aW5kIENTUy4gSXQKICAgICAgICAgIGluY2x1ZGVzIGFuIGltYWdlLCBhIHRpdGxlLCBzb21lIHRleHQsIGFuZCBhY3Rpb25zLgogICAgICAgIDwvcD4KICAgICAgPC9kaXY+CiAgICAgIDxkaXYgY2xhc3M9InB4LTYgcHQtNCBwYi0yIj4KICAgICAgICA8c3BhbgogICAgICAgICAgY2xhc3M9ImlubGluZS1ibG9jayBiZy15ZWxsb3ctMjAwIHJvdW5kZWQtZnVsbCBweC0zIHB5LTEgdGV4dC1zbSBmb250LXNlbWlib2xkIHRleHQteWVsbG93LTcwMCBtci0yIG1iLTIiCiAgICAgICAgICA+I3RhZzE8L3NwYW4KICAgICAgICA+CiAgICAgICAgPHNwYW4KICAgICAgICAgIGNsYXNzPSJpbmxpbmUtYmxvY2sgYmctcGluay0yMDAgcm91bmRlZC1mdWxsIHB4LTMgcHktMSB0ZXh0LXNtIGZvbnQtc2VtaWJvbGQgdGV4dC1waW5rLTcwMCBtci0yIG1iLTIiCiAgICAgICAgICA+I3RhZzI8L3NwYW4KICAgICAgICA+CiAgICAgICAgPHNwYW4KICAgICAgICAgIGNsYXNzPSJpbmxpbmUtYmxvY2sgYmctZ3JlZW4tMjAwIHJvdW5kZWQtZnVsbCBweC0zIHB5LTEgdGV4dC1zbSBmb250LXNlbWlib2xkIHRleHQtZ3JlZW4tNzAwIG1yLTIgbWItMiIKICAgICAgICAgID4jdGFnMzwvc3BhbgogICAgICAgID4KICAgICAgPC9kaXY+CiAgICAgIDxkaXYgY2xhc3M9InB4LTYgcHQtNCBwYi0yIj4KICAgICAgICA8YnV0dG9uCiAgICAgICAgICBjbGFzcz0iYmctYmx1ZS01MDAgaG92ZXI6YmctYmx1ZS03MDAgdGV4dC13aGl0ZSBmb250LWJvbGQgcHktMiBweC00IHJvdW5kZWQiCiAgICAgICAgPgogICAgICAgICAgQWN0aW9uIDEKICAgICAgICA8L2J1dHRvbj4KICAgICAgICA8YnV0dG9uCiAgICAgICAgICBjbGFzcz0iYmctcmVkLTUwMCBob3ZlcjpiZy1yZWQtNzAwIHRleHQtd2hpdGUgZm9udC1ib2xkIHB5LTIgcHgtNCByb3VuZGVkIG1sLTIiCiAgICAgICAgPgogICAgICAgICAgQWN0aW9uIDIKICAgICAgICA8L2J1dHRvbj4KICAgICAgPC9kaXY+CiAgICA8L2Rpdj4KICA8L2JvZHk+CjwvaHRtbD4=

Aprenda a estilizar sites de forma eficiente utilizando Tailwind CSS, um framework utility-first para desenvolvimento rápido de interfaces. Descubra como configurar o Tailwind e aplicar classes utilitárias para cores, tipografia, bordas e sombras. Construa e estilize componentes essenciais como botões, cartões e formulários. Domine técnicas de layout utilizando espaçamento, flexbox e utilitários de grid. Crie designs responsivos e personalize o Tailwind conforme as necessidades do seu projeto.

Conheça o Tailwind CSS, um framework utility-first reconhecido por sua flexibilidade e eficiência na estilização web. Descubra os principais benefícios e a filosofia utility-first. Além disso, explore os métodos simples de instalação utilizando CDN ou npm/yarn.

Descubra os elementos fundamentais do Tailwind CSS, incluindo a compreensão das classes utilitárias e sua aplicação em elementos HTML. Explore técnicas essenciais de estilização, como definição de cores, bordas, sombras e utilitários de tipografia.

Aprofunde-se em aplicações práticas com foco na criação e estilização de Botões, Formulários e Cartões. Por meio de desafios práticos, você dominará a construção desses componentes essenciais de UI, aprimorando suas habilidades com exemplos do mundo real.

Explore as utilidades essenciais de espaçamento do Tailwind CSS, abordando como aplicar margens e preenchimentos aos seus elementos. Você também aprenderá a utilizar utilidades de flexbox para controlar o layout com configurações de display, direção do flex e alinhamento horizontal e vertical. Além disso, você irá aprofundar-se nas utilidades de grid para criar layouts de grade simples, porém poderosos, dominando a configuração de containers e itens de grid.

Descubra como personalizar o Tailwind CSS para atender aos requisitos de design do seu projeto e criar layouts adaptáveis para diversos dispositivos.

Desafio: Construir Componente de Cartão

Tarefa

Awesome!

Desafio: Construir Componente de Cartão

Tarefa