Sunflower Card Component

Table of Contents

• Project Description
• Screenshot
• Live Demo
• My process
  • Built with
  • What I learned
• Author

Project Description

A simple sunflower card component using TailwindCSS

Screenshot

Live demo

Live Demo: Github Pages

My process

Built with

• Semantic HTML5 Markup
• CSS Grid
• Mobile-first workflow
• TailwindCSS

What I learned

I learned using flexbox can be tricky when making a two column layout. Also, you are added more utility classes using flexbox which is uncessary. So, I ended up using CSS Grid. I wanted the image on the right and used the code below.

<figure class="order-1">
  <img>
</figure>

Useful Resources

• Documentation - TailwindCSS
• Image Credit - Unsplash

Author

• Github - bccpadge
• Frontend Mentor - bccpadge