Aspect ratio cards are a great way to display videos or images with a consistent aspect ratio, ensuring a visually pleasing layout. In this example, we'll create a card that displays a YouTube video with a 16:9 aspect ratio.

HTML Markup

<div class="flex h-full w-full items-center justify-center bg-[white]">
  <div class="flex w-full flex-col space-y-6 border border-solid border-[color:var(--blue--b)] bg-[color:var(--blue)] p-4 md:w-8/12">
    <h1 class="text-2xl font-bold">Video Title</h1>
    <div class="border border-solid bg-black">
      <iframe
        class="aspect-video w-full"
        src="https://www.youtube.com/embed/qm0IfG1GyZU?si=Y90Nc503V8I3FX8N"
        title="YouTube video player"
        frameborder="0"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
        allowfullscreen
      </iframe>
    </div>
    <p>Descriptive text for aspect ratio card demo.</p>
  </div>
</div>
            

Explanation of HTML Structure

1. We start with a <div> element that serves as the outer container of our aspect ratio card. It uses Flexbox to vertically and horizontally center its content. The bg-[white] class sets the background color to white.

2. Inside the outer container, we have another <div> element. This inner <div> is responsible for creating the card layout. It has several Tailwind CSS classes applied to it:

   • flex makes it a flex container.
   • w-full makes it take up the full width.
   • flex-col arranges its children in a column layout.
   • space-y-6 adds vertical spacing between its children.
   • border, border-solid, and border-[color:var(--blue--b)] give the card a border with a custom blue color.
   • bg-[color:var(--blue)] sets the background color to a custom blue shade.
   • p-4 adds padding to the card.
   • md:w-8/12 sets the card's width to 8/12 (two-thirds of the container's width) on medium-sized screens and larger.

3. Inside the card, we have a <h1> element for the video title. It uses Tailwind CSS classes for text styling.

4. Next, there's a <div> with a black background. This is where we'll embed our YouTube video. We also add a border around this <div>.

5. Inside this black <div>, we embed the YouTube video using an <iframe>. The aspect-video class ensures that the video maintains a responsive 16:9 aspect ratio.

6. Finally, we have a paragraph (<p>) for some descriptive text below the video.

Styling with Tailwind CSS

To achieve the card's styling, we've used Tailwind CSS classes extensively. Tailwind CSS is a utility-first CSS framework that makes it easy to apply styles directly in your HTML markup. The classes used in this example control layout, spacing, borders, and text styling.

Customizing Colors

You can customize the colors by modifying the CSS variables defined in the <style> section. In this example, we've defined a custom blue color:

<style>
    :root {
        --blue: #3498db;
    }
</style>
            

Using Different Aspect Ratios

To use a different aspect ratio, you can adjust the padding-bottom property of the .aspect-video class. For example, for a 4:3 aspect ratio, you can use:

.aspect-video {
    position: relative;
    padding-bottom: 75%; /* 4:3 Aspect Ratio (divide height by width) */
    height: 0;
    overflow: hidden;
}

.aspect-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
            

Conclusion

By combining HTML and Tailwind CSS, we've created an elegant aspect ratio card for displaying videos. This technique allows for consistent and visually appealing layouts, enhancing the user experience. Feel free to customize the card further to suit your specific needs and branding.