Now that we covered fundamentals, we're going to design and implement common components that you will see in the wild. 

We'll start with a basic Vue.js application and some hard-coded data that will be displayed within the application.


Before styling, we'll check out what data we're dealing with by dumping it into the browser to see how it fits with some initial HTML structure.

Once the structure is in place we'll start applying style to the card at the root level. The way I like to think of the root level is the styles that affect the edges of the card and only apply those styles to it. For example, we'll add a background color and border-radius to the card we are styling. If we want to add padding or style to the content of the card, we will group that content and apply the necessary styling directly which won't affect the root level styles.

Structure a Basic Card in Tailwind

The content in our card is currently pretty bland with the browser defaults. In this lesson we'll work through how to apply style to the text content to make it catch the eye.

We'll start by adjusting the browser default color as well as the antialiasing (which will make our cards look better on high res displays). Then we'll work through the text content to highlight the important parts, with bold, dark text and de-emphasizing the less important content by making it lighter and smaller.

Design Text in a Tailwind Card to Emphasize Important Content

In this lesson, we'll be replacing the text-based rating in our card to use SVG icons to signal how the property is rated.

To do this, we'll start with a custom, raw SVG icon that was exported from sketch (best to export as a square SVG for easier styling). One thing to note is that this file is much bigger than you need it to be when it's exported. To clean it up, you can run it through a service like [SVGOMG](https://jakearchibald.github.io/svgomg) that will reduce the file size drastically. After this, we'll remove the SVG color and sizing and use Tailwind utility classes to style these icons how we'd like them, with `h-` / `w-` utilities for size and `fill-current` for color. 

Lastly, the positioning of the icons will be adjusted with Tailwind's flexbox utility classes.

Style SVG Icons with Tailwind Utility Classes 

In this lesson, we'd like to highlight that this listing is new. To do this we'll need to build a badge that will do just that.

The badge will be an inline element with the text right above the title as a span. We'll see how to color, position, and size it with Tailwind utility classes. 

Some classes we will use: 

- `inline-block` for correct padding behavior in the span
- `bg-teal-200` and `text-teal-800` to adjust color
- `uppercase` `font-semibold` `tracking-wide` to adjust the look of the badge text
- `flex` and`items-baseline` to adjust the positioning

Use Tailwind to Design a span that Looks like a Badge

The intrinsic aspect ratio has been controlling the look of the image in our card. If we wanted to adjust the styling of the image it could scale and distort in ways that wouldn't look good.

We need to tell the browser how to render the object regardless of the size. In Tailwind, we use the `object-fit` utilities which will let us crop and size an image in a way that works for our use-case. 

Note: IE11 doesn't support this feature so we'll see how we can get around this with setting the image as a `backgroundImage` style. This accessible so should be avoided whenever possible.

Crop and Position Images with Tailwind object-fit Utilities

Right now the card looks great at this screensize but when that is adjusted (and gets larger) you'll notice that the image resolution will stretch to fit the screen. We will want to respect the original aspect ratio of the image so as the image gets wider, it gets proportionally taller.

To respect the original aspect ratio of the image, we'll need to position the image `absolute`ly in a containing div that has its bottom padding set to a percentage. This will fix that div's aspect ratio which in turn will keep the images aspect ratio fixed as well.

Lock an Image to a Fixed Aspect Ratio with Percentage-based Padding in Tailwind

The card is designed with a pretty flat. We can add depth through shadows and layers to make it look even better. This will make it look like some elements are closer and some farther away.

To do this, we'll make the images containing div `relative` so that we can pull the text content on top of the image with a negative margin (`-mt-4`). We'll adjust the style of the image and content to look great in a layered fashion with adjusting the shadow of each section of the component.

Design and Implement Common Tailwind Components

Instructor

Course Content