Let's Learn HTML
Tailwind.

Tailwind CSS is a utility-first CSS framework that allows developers to build custom designs quickly by composing pre-defined classes.

Get Started

Columns

Item 1
Item 2
Item 3
Item 4

For this case, I use grid-cols-1 sm:grid-cols-1 md:grid-cols-2 xl:grid-cols-4 in Tailwind CSS. This means:

  • It will show 4 items per row on screens larger than 1280px (xl breakpoint).
  • It will show 2 items per row on screens larger than 768px (md breakpoint).
  • It will show 1 item per row on screens larger than 640px (sm breakpoint).
  • On screens smaller than 640px, it will also show 1 item per row.

In comparison, Bootstrap's grid system can be achieved using col-12 col-md-6 col-xl-3.


grid grid-cols-12 you can change hows the cols works by changing col-span nor grid-cols as you want

grid
col-span-4
Column
1
col-span-11
2
col-span-10
3
col-span-9
4
col-span-10
col-span-5
col-span-5
col-span-6
col-span-6

Layout Justify

justify-start
One of two columns
justify-center
One of two columns
justify-end
One of two columns
justify-around
One of two columns
justify-between
One of two columns
justify-evenly
One of two columns

Accordion

Material Tailwind is a framework that enhances Tailwind CSS with additional styles and components.
You can use Material Tailwind by importing its components into your Tailwind CSS project.
Material Tailwind allows you to quickly build modern, responsive websites with a focus on design.
no its not.





Alert

Card, Avatar & Badges

Banner & Timer

Loading...
Loading...
Loading...

Days

Hours

Minutes

Seconds

form

Forgot Your Password?

Just enter your email address below and we'll send you a link to reset your password!!

Dont Have Account? Sign Up.

Or connect with

Tabs

It really matters and then like it really doesn't matter. What matters is the people who are sparked by it. And the people who are like offended by it, it doesn't matter.




Galery

gallery-photo
gallery-photo
gallery-photo
gallery-photo
gallery-photo
gallery-photo
gallery-photo
gallery-photo
gallery-photo
gallery-photo
gallery-photo

Popover

tania andrew
Wildan Zavents • @Zavents

Vocational High School student, majoring in software engineering.

Indonesia

Rawkuma
tania andrew
Wildan Zavents • @Zavents

Vocational High School student, majoring in software engineering.

Indonesia

Rawkuma
Newsletter Subscription

Your Name

Material Tailwind

Material Tailwind is an easy to use components library for Tailwind CSS and Material Design.

image

Proggres bar

Rating and Select

Your location helps us to provide location-specific services.

"Good website "

image
Wildan Zavents

Frontend Developer

loader

tabel

Overview of the key persons involved in the next project and their geographical distribution.

Name

Role

Email

Location

John Michael

Manager

john.michael@example.com

New York, USA

Alexa Liras

Developer

alexa.liras@example.com

San Francisco, USA

Laurent Perrier

Executive

laurent.perrier@example.com

Paris, France

Michael Levi

Developer

michael.levi@example.com

London, UK

toggle switch

pagination

Page 1 of 10