https://github.com/clementmadiot/bank_modern_app_react-tailwindcss

It's a fully responsive Website with modern UI/UX in React JS with Tailwind
https://github.com/clementmadiot/bank_modern_app_react-tailwindcss

Last synced: 12 days ago
JSON representation

It's a fully responsive Website with modern UI/UX in React JS with Tailwind

• Host: GitHub
• URL: https://github.com/clementmadiot/bank_modern_app_react-tailwindcss
• Owner: ClementMadiot
• Created: 2024-06-02T16:19:31.000Z (7 months ago)
• Default Branch: main
• Last Pushed: 2024-06-17T07:16:28.000Z (6 months ago)
• Last Synced: 2024-06-17T08:37:35.625Z (6 months ago)
• Language: JavaScript
• Homepage: https://bank-modern-cm.netlify.app/
• Size: 2.71 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


  

  
HookBank



## 
 📋 Summary

- ✨ [Introduction](#introduction)

- 🛠 [Technology Used](#tech-stack)

- 🚀 [Launch App](#launch-app)

- 🎨 [Styling](#style)

## 
 ✨ Introduction

Web design of an online bank, that propose the next generation payment method. A new way to make the payment an easy, reliable and secure. I use react vite for this project

## 
 🛠 Technology Used

- [TailwindCSS](https://tailwindcss.com/docs/installation): is a utility-first CSS framework designed to help you rapidly build modern websites without writing a lot of custom CSS.

- [react-icon](https://www.npmjs.com/package/react-icons)

Include popular icons in your React projects easily with react-icons, which utilizes ES6 imports that allows you to include only the icons that your project is using.

  

## 
 🚀 Launch App


**Cloning the Repository**

```bash

git clone {git remote URL}

```


**installation**

> After cloning the repository, run the command `npm install` to install the project's dependencies.

> Once the dependencies are installed, start the project with the command `npm run dev`.

## 
 🚀 Styling

Global styling are defined using TailwindCSS in the tailwind.config.js file.

```

  theme: {

    extend: {

      colors: {

        primary: '#00040f',

        secondary: '#00f6ff',

        dimWhite: 'rgba(255,255,255,0.7)',

        dimBlue: 'rgba(9,151,124,0.1)',

        transparent: "transparent",

        lightBlue:"rgb(51, 187, 207)"

      },

      fontFamily:{

        poppins: ["Poppins", "sans-serif"]

      },

    },

    screens: {

      xs: "480px",

      ss: "620px",

      sm: "768px",

      md: "1060px",

      lg: "1200px",

      xl: "1700px",

    }

  },

```