https://github.com/melvinaguilar/single-price-grid-component

This is a solution to the "Single Price Grid Component" challenge on Frontend Mentor challenges.
https://github.com/melvinaguilar/single-price-grid-component

css fronetend-mentor-challenge tailwind tailwindcss

Last synced: 2 days ago
JSON representation

This is a solution to the "Single Price Grid Component" challenge on Frontend Mentor challenges.

• Host: GitHub
• URL: https://github.com/melvinaguilar/single-price-grid-component
• Owner: MelvinAguilar
• Created: 2023-02-15T02:47:39.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2023-02-25T05:47:52.000Z (almost 2 years ago)
• Last Synced: 2024-11-21T19:12:47.410Z (2 months ago)
• Topics: css, fronetend-mentor-challenge, tailwind, tailwindcss
• Language: CSS
• Homepage: https://single-price-grid-component-hdez.vercel.app/
• Size: 112 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        




  

  
Single price grid component solution

  


    Frontend Mentor Challenge

    


    


    View Demo

    ·

    Report Bug

    ·

    Request Feature

  





  

  

    

  

  

    

    

  




#



![](./design/desktop-preview.jpg)



This is a solution to the [Single price grid component challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/single-price-grid-component-5ce41129d0ff452fec5abbbc). Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Links


- Solution URL: [Single price grid component (Tailwind CSS) | Frontend Mentor](https://www.frontendmentor.io/solutions/single-price-grid-component-tailwind-css-q8vKg0vRi-)

- Live Site URL: [https://github.com/MelvinAguilar/single-price-grid-component](https://github.com/MelvinAguilar/single-price-grid-component)




## Table of contents

- [Overview](#overview)

  - [The challenge](#the-challenge)

- [My process](#my-process)

  - [Built with](#built-with)

- [Author](#author)

- [Acknowledgments](#acknowledgments)

## Overview

### The challenge

Users should be able to:

- View the optimal layout depending on their device's screen size

- See hover states for interactive elements

## My process

### Built with

![](https://img.shields.io/badge/HTML5-E34F26?style=for-the-badge&logo=html5&logoColor=white)

![](https://img.shields.io/badge/Tailwind%20CSS-38B2AC?style=for-the-badge&logo=tailwind-css&logoColor=white)

![](https://img.shields.io/badge/Git-F05032?style=for-the-badge&logo=git&logoColor=white)

- Tailwind CSS

- Semantic HTML5 markup

### Useful resources

- [Tailwind CSS](https://tailwindcss.com/)

## Author

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

## Acknowledgments

### Run the project

To run the client, you need to run the following command:

```bash

npm install

npm run dev

```