Beginner Tailwind
by
Chris Sev
Login
Buy for $47
Pure Color Form
Beginner Tailwind
/
Creating Components: Forms
This content is locked.
You'll need to
purchase
or
sign in
to view this content.
Beginner Tailwind
Tailwind is an amazing CSS framework that changes the way we think about CSS frameworks.
Learn why Tailwind is amazing and how it speeds up designs and makes them look amazing.
Buy for $47
Learn more
Already enrolled?
Sign in to continue learning.
Table of contents
Beginner Tailwind
by
Chris Sev
ui-24px-outline-1_lock
Getting Started
Getting Started
Draft
Intro
Draft
Intro
Draft
Updated for Tailwind 2
Draft
Updated for Tailwind 2
Draft
How I Design
Draft
How I Design
Draft
CodePen Tailwind Template
Draft
CodePen Tailwind Template
Draft
CodePen Tips and Tricks
Draft
CodePen Tips and Tricks
Draft
Tailwind Docs and Workflow
Draft
Tailwind Docs and Workflow
Draft
Tailwind Introduction
Draft
Tailwind Introduction
Draft
Resources
Draft
Resources
ui-24px-outline-1_lock
Main Concepts
Main Concepts
Draft
Overview & What We'll Build
Draft
Overview & What We'll Build
Draft
Tailwind 2 Colors Update
Draft
Tailwind 2 Colors Update
Draft
Spacing w/ Margin and Padding
Draft
Spacing w/ Margin and Padding
Draft
Box Properties
Draft
Box Properties
Draft
Sizing and Numbering System
Draft
Sizing and Numbering System
Draft
Typography
Draft
Typography
Draft
Colors
Draft
Colors
Draft
Pseudo Classes
Draft
Pseudo Classes
Draft
Transitions & Transforms
Draft
Transitions & Transforms
Draft
Animations
Draft
Animations
Draft
Restyling All the Things
Draft
Restyling All the Things
Draft
Gradients
Draft
Gradients
ui-24px-outline-1_lock
Layout Concepts
Layout Concepts
Draft
Layout and Positioning
Draft
Layout and Positioning
Draft
Responsive Classes
Draft
Responsive Classes
Draft
Flexbox
Draft
Flexbox
Draft
Grid
Draft
Grid
ui-24px-outline-1_lock
Creating Components: Cards
Creating Components: Cards
Draft
Basic Card
Draft
Basic Card
Draft
Card w/ an Image
Draft
Card w/ an Image
Draft
Horizontal & Responsive Card
Draft
Horizontal & Responsive Card
ui-24px-outline-1_lock
Creating Components: Buttons
Creating Components: Buttons
Draft
Basic Buttons
Draft
Basic Buttons
Draft
Outlined and Shadowed Buttons
Draft
Outlined and Shadowed Buttons
Draft
Grouped and w/ an Icon Buttons
Draft
Grouped and w/ an Icon Buttons
ui-24px-outline-1_lock
Creating Components: Forms
Creating Components: Forms
Draft
Basic Form
Draft
Basic Form
Draft
Minimal Form
Draft
Minimal Form
Draft
Pure Color Form
Draft
Pure Color Form
ui-24px-outline-1_lock
Building a Course Site
Building a Course Site
Draft
What We'll Build
Draft
What We'll Build
Draft
Setting Up Our Build System
Draft
Setting Up Our Build System
Draft
Purging Unused Classes
Draft
Purging Unused Classes
Draft
Customizing Colors
Draft
Customizing Colors
Draft
Deploying to Netlify
Draft
Deploying to Netlify
Draft
Tailwind in VS Code
Draft
Tailwind in VS Code
Draft
Setting Up HTML
Draft
Setting Up HTML
ui-24px-outline-1_lock
Header/Navigation Section
Header/Navigation Section
Draft
Header Layout
Draft
Header Layout
Draft
Header Styling
Draft
Header Styling
Draft
Header Responsive
Draft
Header Responsive
ui-24px-outline-1_lock
Hero Section
Hero Section
Draft
Hero Layout
Draft
Hero Layout
Draft
Hero Styling
Draft
Hero Styling
Draft
Hero Fun Elements
Draft
Hero Fun Elements
Draft
Hero Responsive
Draft
Hero Responsive
ui-24px-outline-1_lock
Overview Section
Overview Section
Draft
Overview Layout
Draft
Overview Layout
Draft
Overview Styling
Draft
Overview Styling
Draft
Overview Fun Elements
Draft
Overview Fun Elements
Draft
Overview Responsive
Draft
Overview Responsive
ui-24px-outline-1_lock
About Me Section
About Me Section
Draft
About Layout
Draft
About Layout
Draft
About Styling
Draft
About Styling
Draft
About Responsive
Draft
About Responsive
ui-24px-outline-1_lock
What You'll Learn Section
What You'll Learn Section
Draft
What You'll Learn Layout
Draft
What You'll Learn Layout
Draft
What You'll Learn Styling
Draft
What You'll Learn Styling
Draft
What You'll Learn Fun Elements
Draft
What You'll Learn Fun Elements
Draft
What You'll Learn Responsive
Draft
What You'll Learn Responsive
ui-24px-outline-1_lock
What You'll Build Section
What You'll Build Section
Draft
Layout + Styling + Responsive
Draft
Layout + Styling + Responsive
ui-24px-outline-1_lock
Pricing Section
Pricing Section
Draft
Pricing Layout
Draft
Pricing Layout
Draft
Pricing Styling
Draft
Pricing Styling
Draft
Pricing Fun
Draft
Pricing Fun
Draft
Pricing Responsive
Draft
Pricing Responsive
ui-24px-outline-1_lock
FAQ Section
FAQ Section
Draft
Layout + Styling + Responsive
Draft
Layout + Styling + Responsive
ui-24px-outline-1_lock
Footer & Newsletter Section
Footer & Newsletter Section
Draft
Footer Layout
Draft
Footer Layout
Draft
Footer Styling
Draft
Footer Styling
Draft
Footer Fun
Draft
Footer Fun
Draft
Footer Responsive
Draft
Footer Responsive
ui-24px-outline-1_lock
Fixes
Fixes
Draft
Fixing Containers
Draft
Fixing Containers
Draft
Adding Links
Draft
Adding Links
ui-24px-outline-1_lock
Going Beyond
Going Beyond
Draft
Customizing Tailwind
Draft
Customizing Tailwind
Draft
Extracting Tailwind Styles
Draft
Extracting Tailwind Styles
Draft
Tailwind and Vue
Draft
Tailwind and Vue
Draft
Tailwind Typography
Draft
Tailwind Typography
Draft
Tailwind Tools
Draft
Tailwind Tools
ui-24px-outline-1_lock
Video List Section
Video List Section
Draft
Videos Layout + Styling + Responsive
Draft
Videos Layout + Styling + Responsive
ui-24px-outline-1_lock
Conclusion
Conclusion
Draft
Recap
Draft
Recap
Draft
Outro
Draft
Outro
Welcome!
Enter your info below to login.
Your email
Your password
Login
Forgot your password?