https://github.com/kimkykie/tailwind-demo

Demo project for Tailwind UI/UX talk
https://github.com/kimkykie/tailwind-demo

Last synced: about 4 hours ago
JSON representation

Demo project for Tailwind UI/UX talk

• Host: GitHub
• URL: https://github.com/kimkykie/tailwind-demo
• Owner: Kimkykie
• Created: 2021-01-19T07:49:28.000Z (almost 4 years ago)
• Default Branch: master
• Last Pushed: 2021-01-21T06:16:15.000Z (almost 4 years ago)
• Last Synced: 2024-04-16T08:57:59.007Z (7 months ago)
• Language: JavaScript
• Size: 177 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Tailwind Demo Project

A simple repo for Tailwind UI/UX training using Tailwind 2.0.

# Uses

- TailwindCSS 2.0

- Webpack 4.0

- PostCSS

# Usage

```bash

git clone https://github.com/Kimkykie/tailwind-demo.git

cd tailwind-demo/

npm install

npm start

```

The project will open up on ```http://localhost:8080/```.

# Follow along

The main html file that can be edited is at `./dist/index.html`.

## Step 1

1. Head over to Avatar image and add **h-6 w-6 mx-auto rounded-full** to the class.

2. In the Card Descriptions div add the following classes **text-center**

3. To the mentor name div add **text-lg font-bold**

4. Add **text-blue-600 font-medium** to mentor role div class

5. Add **text-gray-500** to mentor email div class

6. Add **text-gray-700** to mentor description div class

## Step 2

1. Head over to Main Card Div and add **lg:flex lg:flex-row**

2. Go to Avatar image and add **md:h-24 md:w-24 md:mr-6 md:my-auto** to the class.

3. Go to Card Descriptions div add the following classes **md:text-left**