Product preview card component

Table of Contents

• Overview
• Screenshot
• Built with
• Install (How it works)
• Development mode
• Production mode
• The Project Structure
• Author

Overview

This is a solution to the Product preview card component. The purpose of this challenge is to improve my coding skills by building realistic projects.

Screenshot

⚙ Built with

Languages & Dependencies

• HTML5
• Tailwind css
• Mobile-first workflow

Dev Dependencies

• Prettier

Install

How it works

Clone the project or download ZIP

git clone https://github.com/Bayoumi-dev/Product-preview-card-component.git

You must install Node js on the local machine, then install the dependencies used in this project. Run the command in the root

npm install

Development mode

Start the Tailwind CLI dev process (Can watch files and recompile whenever they change).

npm run dev:css

Production mode

Start the Tailwind CLI build process to generate the output.css after your changes.

npm run build:css

The Project Structure

├── .prettierignore
├── package-lock.json
├── package.json
├── prettier.config.js
├── README.md
├── style-guide.md
├── tailwind.config.js
├── design
└── src     
    ├── assets
    ├── style
    │   ├── input.css 
    │   └── output.css
    └── index.html

Author

• Website - bayoumi.dev
• Frontend Mentor - @Bayoumi-dev