https://github.com/bccpadge/sunflower-card-component-cli

Simple sunflower card component using TailwindCSS
https://github.com/bccpadge/sunflower-card-component-cli

responsive-web-design tailwindcss

Last synced: about 1 month ago
JSON representation

Simple sunflower card component using TailwindCSS

• Host: GitHub
• URL: https://github.com/bccpadge/sunflower-card-component-cli
• Owner: bccpadge
• Created: 2023-08-22T23:24:54.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2023-08-22T23:31:01.000Z (over 1 year ago)
• Last Synced: 2023-08-23T03:43:59.965Z (over 1 year ago)
• Topics: responsive-web-design, tailwindcss
• Language: CSS
• Homepage: https://bccpadge.github.io/sunflower-card-component-cli/
• Size: 423 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Sunflower Card Component 

## Table of Contents

- [Project Description](#project-description)

- [Screenshot](#screenshot)

- [Live Demo](#live-demo)

- [My process](#my-process)

  - [Built with](#built-with)

  - [What I learned](#what-i-learned)

- [Author](#author)

## Project Description

A simple sunflower card component using TailwindCSS

## Screenshot

![](./sunflower-card.png)

## Live demo

Live Demo: [Github Pages](https://bccpadge.github.io/sunflower-card-component-cli/)

## 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. 

```html

  

```

## Useful Resources

- Documentation - [TailwindCSS](https://tailwindcss.com/)

- Image Credit - [Unsplash](https://unsplash.com/)

## Author

- Github - [bccpadge](https://github.com/bccpadge)

- Frontend Mentor - [bccpadge](https://www.frontendmentor.io/profile/bccpadge)