Tailwind Demo Project
A simple repo for Tailwind UI/UX training using Tailwind 2.0.
Uses
- TailwindCSS 2.0
- Webpack 4.0
- PostCSS
Usage
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
Head over to Avatar image and add h-6 w-6 mx-auto rounded-full to the class.
In the Card Descriptions div add the following classes text-center
To the mentor name div add text-lg font-bold
Add text-blue-600 font-medium to mentor role div class
Add text-gray-500 to mentor email div class
Add text-gray-700 to mentor description div class
Step 2
Head over to Main Card Div and add lg:flex lg:flex-row
Go to Avatar image and add md:h-24 md:w-24 md:mr-6 md:my-auto to the class.
Go to Card Descriptions div add the following classes md:text-left
